/* ============================================
   DESIGN TOKENS — Cob's Café
   Sistema único de variables CSS para toda la web
   ============================================ */

:root {
  /* ──────────────── COLOR ──────────────── */
  /* Primario — Azul Tintero familia */
  --color-primary:        #0D2438;
  --color-primary-700:    #1A3A52;
  --color-primary-600:    #2B5573;
  --color-primary-500:    #4A7A99;
  --color-primary-200:    #B8CDD9;
  --color-primary-100:    #E8EFF3;

  /* Crema — fondo papel */
  --color-cream:          #F5EFE5;
  --color-cream-light:    #FAF6EE;
  --color-cream-off:      #FFFCF6;

  /* Acento café (research-validated #B8842F) */
  --color-coffee-dark:    #6B4423;
  --color-coffee:         #B8842F;
  --color-coffee-light:   #E5B768;

  /* Verde laurel (uso quirúrgico) */
  --color-sage:           #4A5D3F;

  /* Neutros texto */
  --color-text:           #1C1C1E;
  --color-text-soft:      #444448;
  --color-text-muted:     #8B8B92;
  --color-border:         #D4D0C8;

  /* Sistema */
  --color-success:        #5A8A3B;
  --color-error:          #C73E3E;
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1FA855;

  /* ──────────────── TYPOGRAPHY ──────────────── */
  --font-display: 'Cormorant', 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Escala fluida con clamp — perf > media queries */
  --fs-display-xl: clamp(2.75rem, 6vw + 1rem, 5.5rem);  /* H1 hero */
  --fs-display-l:  clamp(2rem, 4vw + 0.5rem, 3.5rem);   /* H2 */
  --fs-display-m:  clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); /* H3 */
  --fs-display-s:  clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); /* H4 */

  --fs-body-xl:    clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* lead editorial */
  --fs-body-l:     clamp(1rem, 0.25vw + 0.95rem, 1.125rem); /* lead */
  --fs-body-m:     1rem;       /* 16px default */
  --fs-body-s:     0.875rem;   /* 14px */
  --fs-body-xs:    0.75rem;    /* 12px microcopia */

  /* Pesos / line-heights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.08em;
  --ls-wider:     0.12em;

  /* ──────────────── SPACING ──────────────── */
  --space-3xs:  0.125rem; /*  2px */
  --space-2xs:  0.25rem;  /*  4px */
  --space-xs:   0.5rem;   /*  8px */
  --space-s:    0.75rem;  /* 12px */
  --space-m:    1rem;     /* 16px */
  --space-l:    1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4.5rem;   /* 72px */
  --space-4xl:  6rem;     /* 96px */
  --space-5xl:  8rem;     /* 128px */

  /* Fluido para secciones */
  --space-section: clamp(4rem, 8vw, 8rem);
  --space-gutter:  clamp(1rem, 3vw, 2rem);

  /* ──────────────── LAYOUT ──────────────── */
  --container-max:    1320px;
  --container-narrow: 800px;
  --container-prose:  680px;

  /* ──────────────── BORDER / RADII ──────────────── */
  --radius-sharp:   2px;
  --radius-soft:    4px;
  --radius-card:    8px;
  --radius-pill:    9999px;

  --border-thin:    1px solid var(--color-border);
  --border-mid:     1.5px solid var(--color-border);
  --border-strong:  2px solid var(--color-primary);

  /* ──────────────── SHADOWS ──────────────── */
  --shadow-xs:    0 1px 2px rgba(13,36,56,0.04);
  --shadow-s:     0 2px 8px rgba(13,36,56,0.06);
  --shadow-m:     0 8px 24px rgba(13,36,56,0.08);
  --shadow-l:     0 20px 48px rgba(13,36,56,0.12);
  --shadow-xl:    0 32px 80px rgba(13,36,56,0.16);

  /* Sombras coloreadas (cálidas) */
  --shadow-warm:  0 12px 40px rgba(184, 132, 47, 0.15);

  /* ──────────────── MOTION ──────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);    /* circ-in-out */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot sutil */
  --ease-organic:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    150ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;
  --dur-slower:  900ms;
  --dur-cinema:  1400ms;

  /* ──────────────── Z-INDEX ──────────────── */
  --z-base:      0;
  --z-content:   10;
  --z-sticky:    100;
  --z-nav:       200;
  --z-fab:       300;
  --z-modal:     400;
  --z-toast:     500;

  /* ──────────────── BACKDROP / EFFECTS ──────────────── */
  --backdrop-nav:    saturate(180%) blur(12px);
  --backdrop-modal:  saturate(180%) blur(20px);
}

/* Soporte dark mode para Fase 2 (estructura lista) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* Fase 2 — paleta nocturna ya documentada en 03-sistema-visual.md */
  }
}