/*
 * tokens.css — Smart Catering Child
 *
 * Source of truth de design tokens + declaracion global de @layer order.
 *
 * NOTA SOBRE COLORS:
 * Los valores --color-gold / --color-cream / --color-dark vienen de la
 * validacion final aprobada por Pepe (kickoff Fase 0):
 *   gold  = #D99E39
 *   cream = #F8F7F2
 *   dark  = #000000 (negro puro — paridad con proto HTML)
 * El design doc 2026-06-03-foundations-design.md lista valores anteriores
 * (#c5a572 / #f5f1ea / #1a1a1a) — quedan registrados como soft/secondary.
 * Cambio 2026-06-03: --color-dark pasó de #050418 → #000000 para igualar
 * el negro puro del prototipo. Las sombras siguen usando rgba(5,4,24,...)
 * inline porque dan más profundidad que rgba(0,0,0,...).
 */

@layer reset, theme, components, utilities, overrides;

:root {
  /* ─── COLORS ─── */
  --color-gold:      #D99E39;
  --color-gold-soft: #d4b888;
  --color-gold-dark: #a88a5c;
  /* gold-ink (WCAG AA, 2026-06-03): variante accesible para TEXTO sobre fondos
   * claros (cream / white). --color-gold sobre #fff = 2.36:1 (FAIL AA).
   * --color-gold-ink #a87410 sobre #fff = 4.61:1 (PASS AA). Usar en
   * .sc-eyebrow, .sc-link-arrow, .sc-event-card__arrow--soon, etc.
   * Mantener --color-gold para fondos/icons/decoración donde el texto es negro. */
  --color-gold-ink:  #a87410;

  --color-dark:      #000000;
  --color-ink:       #2b2b2b;
  --color-body:      #4a4a4a;
  /* WCAG AA fix: #8a8a8a = ~3.2:1 on white (FAIL). #767676 = 4.54:1 on white (PASS AA). */
  --color-mute:      #767676;

  --color-cream:     #F8F7F2;
  --color-paper:     #faf7f2;
  --color-white:     #ffffff;

  --color-accent:    #8b4513;
  --color-border:    rgba(5, 4, 24, 0.08);

  /* Semantic status colors (Fase 2 foundations — doc 03 §2.1).
   * Used for form validation, alerts, info banners. Closed palette. */
  --color-success:   #2e7d4f;
  --color-warning:   #b8860b;
  --color-error:     #c0392b;
  --color-info:      #2c6e8f;

  /* ─── TYPOGRAPHY ─── */
  --font-serif: 'Merriweather', Georgia, serif;
  --font-sans:  'Overpass', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Semantic font aliases (Fase 2 foundations — doc 03 §2 / AC-F5).
   * Several components reference --font-display / --font-body (and the
   * legacy-prefixed --sc-font-* / --scc-font-* variants) which were never
   * declared, falling back to the system stack. Declare them all here as
   * aliases of the canonical --font-serif / --font-sans so every font var
   * used in components resolves to a real value. */
  --font-display:     var(--font-serif);
  --font-body:        var(--font-sans);
  --sc-font-display:  var(--font-serif);
  --sc-font-body:     var(--font-sans);
  --scc-font-display: var(--font-serif);
  --scc-font-body:    var(--font-sans);

  /* Legacy color aliases — map --sc-color-* / --c-* to canonical tokens.
   * Components that were written against old prefixes resolve here without
   * changing every consumer. */
  --sc-color-cream:      var(--color-cream);
  --sc-color-gold:       var(--color-gold);
  --sc-color-text:       var(--color-ink);
  --sc-color-text-muted: var(--color-body);

  --fs-xs:   clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
  --fs-xl:   clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.39rem + 0.55vw, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.71rem + 0.82vw, 2.4375rem);
  --fs-4xl:  clamp(2.25rem, 2.02rem + 1.18vw, 3.0625rem);
  --fs-5xl:  clamp(2.75rem, 2.42rem + 1.64vw, 3.8125rem);
  --fs-6xl:  clamp(3.5rem, 3.02rem + 2.4vw, 5rem);
  --fs-7xl:  clamp(4.25rem, 3.59rem + 3.27vw, 6.5rem);
  --fs-8xl:  clamp(5rem, 4.15rem + 4.18vw, 8rem);
  --fs-9xl:  clamp(6rem, 4.85rem + 5.64vw, 10rem);

  --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.05em;
  --ls-wider:    0.15em;

  /* ─── SPACING (base 4px) ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Section rhythm (Fase 2 foundations — doc 03 §2.3).
   * Vertical padding scale for .sc-section. md is the default. */
  --space-section-sm: 4rem;
  --space-section-md: 6rem;
  --space-section-lg: 8rem;

  /* ─── CONTAINER ─── */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* ─── RADIUS ─── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 2px rgba(5,4,24,0.06);
  --shadow-md: 0 4px 12px rgba(5,4,24,0.08);
  --shadow-lg: 0 16px 40px rgba(5,4,24,0.12);

  /* ─── EASING ─── */
  --ease-out-soft:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-sharp: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);

  /* ─── DURATIONS ─── */
  --dur-fast:   180ms;
  --dur-normal: 280ms;
  --dur-slow:   480ms;

  /* ─── TRANSITION SHORTHANDS ─────────────────────────────────────────
   * Composed tokens for the most common transition patterns.
   * Consume via: transition: var(--transition-fast);
   * Use --transition-fast for press/active feedback (buttons, icons).
   * Use --transition-base for hover state changes (colors, shadows, transforms).
   * Use --transition-slow for larger layout transitions (mobile menu, modals).
   * ─────────────────────────────────────────────────────────────────── */
  --transition-fast: var(--dur-fast) var(--ease-out-soft);
  --transition-base: var(--dur-normal) var(--ease-out-soft);
  --transition-slow: var(--dur-slow) var(--ease-out-soft);
}