/* Design tokens — single source of truth for the visual system. */
/* Sourced from docs/brand/identity.md (canonical 2026-04-25). */

:root {
  /* ---------- Brand palette ---------- */
  --ella-gold: #C8A85C;
  --ella-gold-dark: #B89845;
  --ella-gold-soft: rgba(200, 168, 92, 0.12);
  --ella-charcoal: #16181C;
  --ella-charcoal-soft: rgba(22, 24, 28, 0.85);
  --ella-warm: #F5EFE5;
  --ella-warm-deep: #E8E2D8;
  --ella-brown: #201E1B;
  --ella-pale: #FAF8F5;
  --ella-stroke: #DED8D4;
  --ella-navy: #1E3A5F;
  --ella-navy-dark: #152A45;
  --white: #FFFFFF;

  /* Semantic surface tokens (light only — no dark mode for marketing v1) */
  --surface-page: var(--ella-warm);
  --surface-card: var(--ella-pale);
  --surface-elevated: var(--white);
  --surface-authority: var(--ella-charcoal);
  --text-primary: var(--ella-brown);
  --text-on-dark: var(--white);
  --text-muted: rgba(32, 30, 27, 0.68);
  --border-subtle: var(--ella-stroke);

  /* Functional state colours */
  --color-error: #B91C1C;
  --color-success: #15803D;

  /* ---------- Gradients ---------- */
  --gradient-gold: linear-gradient(135deg, #C8A85C 0%, #B89845 100%);
  --gradient-charcoal: linear-gradient(135deg, #16181C 0%, #201E1B 100%);
  --gradient-navy: linear-gradient(135deg, #1E3A5F 0%, #152A45 100%);
  --gradient-warm: linear-gradient(180deg, #F5EFE5 0%, #E8E2D8 100%);
  --gradient-hero: linear-gradient(135deg, #16181C 0%, #1E3A5F 50%, #C8A85C 100%);
  --gradient-card-gold: linear-gradient(135deg, rgba(200,168,92,0.08) 0%, rgba(200,168,92,0.02) 100%);

  /* ---------- Typography ---------- */
  --font-heading: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale — uses clamp() for responsive scaling */
  --fs-2xs: 0.625rem;     /* 10px */
  --fs-xs: 0.75rem;       /* 12px */
  --fs-sm: 0.875rem;      /* 14px */
  --fs-base: 1rem;        /* 16px */
  --fs-lg: 1.125rem;      /* 18px */
  --fs-xl: 1.25rem;       /* 20px */
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.5vw, 1.5rem);   /* 22 → 24 */
  --fs-3xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* 24 → 30 */
  --fs-4xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);   /* 28 → 36 */
  --fs-5xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);         /* 32 → 48 */
  --fs-6xl: clamp(2.25rem, 1.7rem + 3vw, 3.75rem);     /* 36 → 60 */
  --fs-hero: clamp(2.5rem, 1.5rem + 5vw, 4.75rem);     /* 40 → 76 */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.05em;
  --tracking-eyebrow: 0.3em;

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --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;

  /* Section vertical padding (responsive) */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);
  --section-y-lg: clamp(4rem, 2.5rem + 7vw, 8rem);

  /* Container widths */
  --container-narrow: 720px;
  --container-base: 1120px;
  --container-wide: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px rgba(22, 24, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 24, 28, 0.10);
  --shadow-lg: 0 16px 48px rgba(22, 24, 28, 0.14);
  --shadow-gold: 0 4px 14px rgba(200, 168, 92, 0.25);
  --shadow-gold-lg: 0 8px 24px rgba(200, 168, 92, 0.35);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
}