/* ============================================================
   KCP · DESIGN TOKENS CANÓNICOS
   Fuente única de verdad: Digital Product Bible v1.0 · Cap. 13
   NO reemplazar por valores aproximados extraídos de imágenes.
   Valores deprecados (NO USAR): #0D1B2A #0A1A2F #2BA671 #2E7D6B #1E8C7A
   ============================================================ */

:root {
  /* --- Color · marca --- */
  --color-brand-navy:      #0A1D33;
  --color-brand-navy-deep: #071524;
  --color-brand-navy-mid:  #17314D;
  --color-brand-green:     #2FA36B;
  --color-brand-green-dark:#258357;
  --color-brand-sand:      #D8C9A7;

  /* --- Color · neutrales --- */
  --color-neutral-50:  #F4F6F8;
  --color-neutral-200: #E8EDF2;
  --color-neutral-600: #6B7280;
  --color-white:       #FFFFFF;

  /* Semántico de formularios. ADICIÓN al set canónico: la Bible no define
     un color de error y WCAG exige no depender solo del color. Pendiente de
     aprobación de Diseño para incorporarlo al capítulo 13. */
  --color-feedback-error: #9B1C1C;

  /* --- Color · derivados de uso (solo alpha de tokens canónicos) --- */
  --overlay-navy-strong: rgba(7, 21, 36, .82);
  --overlay-navy-soft:   rgba(10, 29, 51, .55);
  --hairline-light: rgba(232, 237, 242, 1);
  --hairline-dark:  rgba(255, 255, 255, .14);

  /* --- Tipografía --- */
  --font-display: "Playfair Display", Georgia, serif;   /* editorial, uso selectivo */
  --font-heading: "Montserrat", Arial, sans-serif;      /* H1-H3, nav, cards */
  --font-body:    "Inter", Arial, sans-serif;           /* body, UI, forms */

  /* Escala tipográfica (desktop / mobile vía clamp) */
  --fs-display-xl: clamp(2.625rem, 1.6rem + 4.4vw, 4.5rem);  /* 42 → 72 */
  --fs-h1:         clamp(2.375rem, 1.6rem + 3.3vw, 4rem);    /* 38 → 64 */
  --fs-h2:         clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem); /* 30 → 44 */
  --fs-h3:         clamp(1.375rem, 1.25rem + .6vw, 1.75rem); /* 22 → 28 */
  --fs-body-lg:    clamp(1.0625rem, 1rem + .3vw, 1.25rem);   /* 17 → 20 */
  --fs-body:       1rem;                                     /* 16 */
  --fs-small:      .875rem;                                  /* 14 */
  --fs-eyebrow:    .8125rem;                                 /* 13 */

  --lh-display: 1.08;
  --lh-h1: 1.10;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-body: 1.55;
  --lh-small: 1.45;

  /* --- Espaciado --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* --- Radios --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Sombras --- */
  --shadow-light:   0 8px 24px rgba(7, 21, 36, .08);
  --shadow-medium:  0 16px 40px rgba(7, 21, 36, .14);
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, .25);

  /* --- Grid y contenedor --- */
  --container-max: 1440px;
  --gutter: 20px;          /* mobile */
  --grid-gap: 16px;        /* mobile */

  /* --- Header --- */
  --header-h: 72px;
  --header-h-desktop: 90px;
  --header-h-sticky: 72px;

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-reveal: 700ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* --- Ritmo vertical de sección --- */
  --section-y: var(--space-5);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --grid-gap: 20px; --section-y: 80px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 80px; --grid-gap: 24px; --section-y: var(--space-6); --header-h: var(--header-h-desktop); }
}