/* ==========================================================================
   tokens.css — PMUS Digital
   Fuente de verdad única. Un token, un cambio.
   Identidad vinculante según el brandboard validado por el cliente (7 sep 2026):
   paleta celeste · azul marino · morado · crema · verde, tipografía Archivo,
   motivo de rutas serpenteantes. Los hex de marca son los OFICIALES, tomados del logotipo
   vectorial que entregó el cliente (7 sep 2026). Los derivados se calculan a partir de ellos.
   Mundo visual v2 «Escenas de ciudad» (7 sep 2026): predominio claro, fotografía a sangre,
   capítulos marinos para hero, Camino y cierre.
   ========================================================================== */
:root {
  /* ---------- Paleta de marca ---------- */
  --brand-navy: #171C42;      /* oficial, del logotipo */
  --brand-aqua: #BDEAEF;      /* oficial */
  --brand-aqua-light: #D6F2F5;   /* hover del botón celeste */
  --brand-cream: #E5E5CE;
  --brand-purple: #41256D;    /* oficial */
  --brand-purple-2: #63479A;
  --brand-purple-3: #8168B4;
  --brand-purple-4: #A491CB;
  --brand-purple-5: #CFC6E0;
  --brand-green: #376B4D;     /* oficial */
  --brand-white: #FFFFFF;

  /* ---------- Roles: superficie clara (suelo de la web) ---------- */
  --color-bg: #F5F5EE;                 /* blanco roto derivado de la crema: el suelo claro */
  --color-surface: #FFFFFF;
  --color-surface-2: var(--brand-cream);/* crema de marca para tarjetas y bloques secundarios */
  --color-ink: var(--brand-navy);
  --color-ink-2: #4A4F73;
  --color-ink-3: #5F6480;
  --color-line: #D9D9C8;
  --color-line-strong: #B4B49B;
  --color-accent: var(--brand-navy);
  --color-on-accent: var(--brand-aqua);
  --color-accent-2: #1E9BA5;           /* celeste accesible sobre claro */
  --color-focus: var(--brand-purple);

  --verb-plan: var(--brand-navy);
  --verb-mide: var(--brand-green);
  --verb-com: #1E9BA5;
  --verb-act: var(--brand-purple);
  --verb-mide-soft: #DCE9E1;           /* fondo del aviso de éxito */
  --state-off: #9296B0;
  --color-error: #B3261E;

  /* ---------- Roles: superficie oscura (capítulos marinos y fotografía) ---------- */
  --panel-bg: var(--brand-navy);
  --panel-bg-2: #232A5E;
  --panel-ink: #F2F7F7;
  --panel-ink-2: #BAC0DA;
  --panel-ink-3: #808AAF;
  --panel-line: #2E3568;
  --panel-accent: var(--brand-aqua);
  --panel-on-accent: var(--brand-navy);
  --panel-verb-plan: #F2F7F7;
  --panel-verb-mide: #7CCFA5;
  --panel-verb-com: var(--brand-aqua);
  --panel-verb-act: #B3A1D8;
  --panel-state-off: #414879;

  /* ---------- Tipografía ---------- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wdth-normal: 100;
  --wdth-wide: 112;

  --font-size-xs: .8125rem;
  --font-size-sm: .9375rem;
  --font-size-base: 1.0625rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --font-size-2xl: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --font-size-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --font-size-display: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);   /* 92 px máx., por debajo del techo de 6 rem */

  --font-weight-light: 300;     /* titulares enormes */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-tight: 1.02;
  --line-snug: 1.12;
  --line-base: 1.55;
  --tracking-display: -.03em;
  --tracking-tight: -.015em;
  --tracking-caps: .1em;

  /* ---------- Espaciado ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-gap: clamp(72px, 9vw, 140px);

  /* ---------- Radios ---------- */
  --radius-xs: 3px;   /* tiras, líneas y raíles */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-panel: 28px;
  --radius-hero: 40px;   /* paneles fotográficos a pantalla completa */
  --radius-full: 999px;

  /* ---------- Iconos ---------- */
  --icon-size-md: 20px;
  --icon-size-nav: 24px;
  --stroke-icon: 1.75;

  /* ---------- Motion ---------- */
  --motion-fast: 160ms;
  --motion-base: 300ms;
  --motion-slow: 800ms;
  --motion-ciclo: 1100ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);    /* salida exponencial: entradas y hovers */
  --ease-board: var(--ease-expo);              /* alias heredado: revelados */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-popup: 300;
  --z-intro: 400;

  /* ---------- Layout ---------- */
  --site-max-width: 1520px;             /* contenido dentro del lienzo */
  --canvas-max: 1880px;                /* ancho máximo de los bloques a sangre; a partir de ahí se centran */
  --site-padding-x: clamp(16px, 4vw, 48px);
  --frame: clamp(10px, 1.5vw, 20px);     /* margen claro alrededor de los paneles fotográficos */
  --header-height: 76px;
  --header-pill: 60px;                   /* alto de la píldora de navegación */
  --header-bottom: calc(var(--frame) + 10px + var(--header-pill));  /* dónde acaba la cabecera flotante */

  /* ---------- Sombras (con desplazamiento y desenfoque) ---------- */
  --shadow-sm: 0 2px 6px -2px rgba(0, 0, 0, .14);
  --shadow-md: 0 14px 34px -18px rgba(0, 0, 0, .3);
  --shadow-panel: 0 28px 70px -34px rgba(0, 0, 0, .45);
}