/* Valley Flash design system — draft from Marcos's 6 references (2026-10-27).
   Spec: DESIGN.md. Primitives → semantic → component. */

:root {
  /* ── Primitives: color ─────────────────────────────── */
  --color-horchata: #faede7;      /* warm blush-cream canvas */
  --color-concha: #f6d3c6;        /* soft peach: sparkles, quiet bands */
  --color-flash-orange: #f4400c;  /* the brand's loud color */
  --color-coral: #ff8a65;         /* repeat-text on orange */
  --color-chile-red: #b3171d;     /* second voice in stacked headlines */
  --color-sparkle-yellow: #f9c41a;/* sparkles on orange / photos */
  --color-ink: #161010;
  --color-cocoa: #5e4944;         /* secondary copy on cream */
  --color-noche: #1e0b0a;         /* closing dark section */
  --color-white: #ffffff;

  /* ── Primitives: type ──────────────────────────────── */
  --font-poster: 'League Spartan', 'Arial Black', sans-serif;  /* UPPERCASE statements */
  --font-party: 'Rubik', 'Arial Rounded MT Bold', sans-serif;  /* friendly headings, repeat text */
  --font-body: 'Lexend', 'Helvetica Neue', Arial, sans-serif;  /* body, UI */

  --text-poster: clamp(56px, 11vw, 168px);  --leading-poster: 0.86; --tracking-poster: -0.035em;
  --text-wordmark: 12.4vw;
  --text-h2: clamp(36px, 5.4vw, 72px);      --leading-h2: 0.95;     --tracking-h2: -0.02em;
  --text-h3: clamp(30px, 3.4vw, 44px);      --leading-h3: 1;
  --text-lead: clamp(19px, 1.7vw, 24px);    --leading-lead: 1.35;
  --text-body: 17px;                        --leading-body: 1.55;
  --text-small: 14px;
  --text-label: 12px;                       --tracking-label: 0.14em;

  /* ── Primitives: space (4px base) ──────────────────── */
  /* Spacing borrowed from the `gallery` (Apple-style) system — scale, section,
     card and element gaps only; colors, type and shapes stay Valley Flash. */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-52: 52px; --space-64: 64px;
  --space-76: 76px; --space-80: 80px; --space-128: 128px; --space-144: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-gap: 90px;
  --card-padding: 28px;
  --element-gap: 20px;
  --max-width: 1240px;

  /* ── Primitives: shape ─────────────────────────────── */
  --radius-card: 28px;
  --radius-photo: 22px;
  --radius-frame: 6px;      /* photobooth-strip frames */
  --radius-pill: 999px;

  /* ── Semantic ──────────────────────────────────────── */
  --surface-canvas: var(--color-horchata);
  --surface-soft: var(--color-concha);
  --surface-loud: var(--color-flash-orange);
  --surface-night: var(--color-noche);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-cocoa);
  --text-on-loud: var(--color-white);
  --text-on-night: var(--color-horchata);
  --accent: var(--color-flash-orange);
  --accent-deep: var(--color-chile-red);
  --sparkle-soft: var(--color-concha);
  --sparkle-bright: var(--color-sparkle-yellow);

  /* ── Component ─────────────────────────────────────── */
  --button-primary-bg: var(--color-flash-orange);
  --button-primary-fg: var(--color-ink);
  --button-primary-bg-hover: var(--color-ink);
  --button-primary-fg-hover: var(--color-horchata);
  --button-ghost-border: var(--color-ink);
  --card-radius: var(--radius-card);
  --nav-height: 76px;
}