/* ==========================================================================
   Red Pericial — Design tokens
   Único punto de verdad del sistema visual. Modifique aquí colores,
   tipografía, espaciado, radios y tiempos de transición.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Color (tema claro) ---- */
  --color-background: #efeff1;
  --color-surface: #f8f8fa;
  --color-surface-2: #e8e8ed;
  --color-elevated: #ffffff;
  --color-text: #0b0b0f;
  --color-text-soft: #2b2c33;
  --color-muted: #5d5e66;
  --color-line: rgba(11, 11, 15, 0.1);
  --color-line-strong: rgba(11, 11, 15, 0.2);
  --color-accent: #0071e3;
  --color-accent-hover: #0066cc;
  --color-accent-soft: rgba(0, 113, 227, 0.08);
  --color-on-accent: #ffffff;
  --color-success: #15803d;
  --color-danger: #b42318;

  /* Escena invertida (bloque "Problema") */
  --color-inverse-bg: #0b0b0f;
  --color-inverse-text: #f5f5f7;
  --color-inverse-muted: #a1a1aa;

  /* Canales RGB para canvas y transparencias */
  --rgb-text: 11, 11, 15;
  --rgb-accent: 0, 113, 227;

  /* Haz de luz del faro (motivo de marca) */
  --rgb-beam: 0, 113, 227;
  --beam-alpha: 0.07;

  /* Vidrio (navbar) */
  --glass-bg: rgba(251, 251, 253, 0.72);
  --glass-line: rgba(11, 11, 15, 0.06);

  /* ---- Tipografía ---- */
  --font-primary: "Inter Var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --fs-h4: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-statement: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.14em;

  /* ---- Espaciado (base 4px) ---- */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;
  --spacing-3xl: 9rem;
  --section-space: clamp(5rem, 3rem + 8vw, 10rem);

  --gutter: clamp(1.25rem, 0.5rem + 3.4vw, 4rem);
  --container: 1320px;
  --container-narrow: 860px;

  /* ---- Radios ---- */
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-normal: 420ms var(--ease-out);
  --transition-slow: 900ms var(--ease-out);

  /* ---- Capas y medidas ---- */
  --header-h: 64px;
  --z-header: 100;
  --z-menu: 95;
  --z-skip: 200;
}

/* ---- Tema oscuro explícito ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Paleta tomada del logotipo: azul noche que se funde a negro + dorado */
  --color-background: #040c18;
  --color-surface: #0a1b33;
  --color-surface-2: #10264a;
  --color-elevated: #0b1f3b;
  --color-text: #f4f6fa;
  --color-text-soft: #d2dae7;
  --color-muted: #9fb0c8;
  --color-line: rgba(190, 210, 240, 0.12);
  --color-line-strong: rgba(190, 210, 240, 0.22);
  --color-accent: #e2b04e;
  --color-accent-hover: #f1c76c;
  --color-accent-soft: rgba(226, 176, 78, 0.12);
  --color-on-accent: #071629;
  --color-success: #4ade80;
  --color-danger: #ff8a80;
  --color-inverse-bg: #02070f;
  --color-inverse-text: #f4f6fa;
  --color-inverse-muted: #9fb0c8;
  --rgb-text: 244, 246, 250;
  --rgb-accent: 226, 176, 78;
  --rgb-beam: 243, 206, 120;
  --rgb-beam-scene: 243, 206, 120;
  --beam-alpha: 0.07;
  --glass-bg: rgba(4, 13, 26, 0.66);
  --glass-line: rgba(190, 210, 240, 0.1);

  /* Fondos degradados (solo modo oscuro). En el tema claro estas
     variables no existen y cada regla usa su color sólido de respaldo. */
  --bg-canvas: linear-gradient(100deg, #01040a 0%, #04101f 34%, #07182d 68%, #0a1f39 100%);
  --bg-body: transparent;
  /* Secciones alternas en gris casi negro (#141414) que se intercalan con el azul */
  --bg-surface:
    radial-gradient(70% 60% at 88% 0%, rgba(243, 206, 120, 0.035), transparent 62%),
    linear-gradient(165deg, #1b1b1b 0%, #141414 50%, #0e0e0e 100%);
  --bg-scene: linear-gradient(100deg, #000000 0%, #030b16 38%, #071a31 72%, #0a1f39 100%);
  --bg-footer: linear-gradient(180deg, rgba(10, 31, 57, 0.55) 0%, #050e1b 55%, #010307 100%);
  --bg-menu: linear-gradient(160deg, #0a1f39 0%, #04101f 55%, #01040a 100%);
}

/* ---- Respaldo sin JavaScript: seguir al sistema ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    /* Paleta tomada del logotipo: azul noche que se funde a negro + dorado */
    --color-background: #040c18;
    --color-surface: #0a1b33;
    --color-surface-2: #10264a;
    --color-elevated: #0b1f3b;
    --color-text: #f4f6fa;
    --color-text-soft: #d2dae7;
    --color-muted: #9fb0c8;
    --color-line: rgba(190, 210, 240, 0.12);
    --color-line-strong: rgba(190, 210, 240, 0.22);
    --color-accent: #e2b04e;
    --color-accent-hover: #f1c76c;
    --color-accent-soft: rgba(226, 176, 78, 0.12);
    --color-on-accent: #071629;
    --color-success: #4ade80;
    --color-danger: #ff8a80;
    --color-inverse-bg: #02070f;
    --color-inverse-text: #f4f6fa;
    --color-inverse-muted: #9fb0c8;
    --rgb-text: 244, 246, 250;
    --rgb-accent: 226, 176, 78;
    --rgb-beam: 243, 206, 120;
    --rgb-beam-scene: 243, 206, 120;
    --beam-alpha: 0.07;
    --glass-bg: rgba(4, 13, 26, 0.66);
    --glass-line: rgba(190, 210, 240, 0.1);

    /* Fondos degradados (solo modo oscuro). En el tema claro estas
       variables no existen y cada regla usa su color sólido de respaldo. */
    --bg-canvas: linear-gradient(100deg, #01040a 0%, #04101f 34%, #07182d 68%, #0a1f39 100%);
    --bg-body: transparent;
    /* Secciones alternas en gris casi negro (#141414) que se intercalan con el azul */
    --bg-surface:
      radial-gradient(70% 60% at 88% 0%, rgba(243, 206, 120, 0.035), transparent 62%),
      linear-gradient(165deg, #1b1b1b 0%, #141414 50%, #0e0e0e 100%);
    --bg-scene: linear-gradient(100deg, #000000 0%, #030b16 38%, #071a31 72%, #0a1f39 100%);
    --bg-footer: linear-gradient(180deg, rgba(10, 31, 57, 0.55) 0%, #050e1b 55%, #010307 100%);
    --bg-menu: linear-gradient(160deg, #0a1f39 0%, #04101f 55%, #01040a 100%);
  }
}