/**
 * AviatorCanada design tokens
 * Single source of truth for color, typography, spacing, and motion.
 * WCAG 2.2 AA contrast targets against --color-bg-primary / --color-bg-card.
 *
 * Theme: rich dark forest green + champagne gold.
 */

:root {
  /* ——— Surfaces (deep forest, green undertone) ——— */
  --color-bg-primary: #070509;
  --color-bg-secondary: #0e090c;
  --color-bg-card: #16101a;
  --color-bg-card-hover: #1e1424;
  --color-bg-elevated: #1a1108;

  /* ——— Brand (jewel emerald — higher chroma) ——— */
  --color-primary: #26b86e;
  --color-primary-hover: #1fa05e;
  --color-primary-light: #4ee094;
  --color-primary-dark: #178a52;
  --color-primary-soft: #7ee0b0;

  /* ——— Champagne gold (dominant luxury accent) ——— */
  --color-gold: #f0b429;
  --color-gold-light: #ffe066;
  --color-gold-dark: #a87820;
  --color-gold-ink: #1a1408; /* text on gold fills */

  /* ——— Semantic ——— */
  --color-success: #3de09a;
  --color-success-light: #6eefb8;
  --color-success-dark: #12a06a;
  --color-warning: #f5b942;
  --color-warning-light: #ffd56a;
  --color-error: #ef4444;

  /* ——— CTA (deep forest — white text ≥4.5:1; gold for promo accents) ——— */
  --color-cta-from: #1fa05e;
  --color-cta-mid: #178a52;
  --color-cta-to: #126b40;
  --gradient-cta: linear-gradient(135deg, var(--color-cta-from), var(--color-cta-mid), var(--color-cta-to));
  --gradient-gold: linear-gradient(135deg, #b87d10 0%, #e8a820 30%, #ffe066 55%, #f0b429 75%, #a87820 100%);
  /* Keep both ends luminous so italic N doesn't look clipped */
  --gradient-brand-text: linear-gradient(110deg, #fff1a8 0%, #ffe07a 28%, #f0c43a 55%, #ffe07a 100%);
  --gradient-brand-text-alt: linear-gradient(110deg, #ffe07a 0%, #f0c43a 50%, #ffe07a 100%);

  /* ——— Button fills (gold primary — use --color-gold-ink for labels) ——— */
  --color-btn-primary: #f0c43a;
  --color-btn-primary-hover: #c9971a;
  --gradient-btn-primary: var(--gradient-gold);
  --gradient-btn-primary-hover: linear-gradient(135deg, #fff6c4 0%, var(--color-gold-light) 40%, var(--color-gold) 100%);

  /* ——— Text (AA ≥ 4.5:1 on bg-primary / bg-card) ——— */
  --color-text-primary: #f0e8e0;
  --color-text-secondary: #c4b4b0;
  --color-text-muted: #9a8a90;
  --color-text-faint: #7a6a70;
  --color-text-inverse: #ffffff;
  --color-text-link: var(--color-primary-light);
  --color-text-link-hover: var(--color-gold-light);

  /* ——— Borders / glass ——— */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-focus: rgba(38, 184, 110, 0.5);
  --color-glass: rgba(5, 21, 16, 0.78);
  --color-glass-strong: rgba(5, 21, 16, 0.92);

  /* ——— Brand alpha ladder (emerald #26b86e) ——— */
  --color-primary-a03: rgba(38, 184, 110, 0.03);
  --color-primary-a06: rgba(38, 184, 110, 0.06);
  --color-primary-a08: rgba(38, 184, 110, 0.08);
  --color-primary-a10: rgba(38, 184, 110, 0.1);
  --color-primary-a15: rgba(38, 184, 110, 0.15);
  --color-primary-a20: rgba(38, 184, 110, 0.2);
  --color-primary-a25: rgba(38, 184, 110, 0.25);
  --color-primary-a30: rgba(38, 184, 110, 0.3);
  --color-primary-a40: rgba(38, 184, 110, 0.4);

  /* ——— Gold alpha ladder (#f0c43a) ——— */
  --color-gold-a10: rgba(240, 196, 58, 0.12);
  --color-gold-a20: rgba(240, 196, 58, 0.22);
  --color-gold-a35: rgba(240, 196, 58, 0.4);
  --color-gold-a50: rgba(240, 196, 58, 0.55);
  --color-gold-a70: rgba(240, 196, 58, 0.7);

  /* ——— White alpha (decorative only; use text-* for copy) ——— */
  --color-white-a04: rgba(255, 255, 255, 0.04);
  --color-white-a06: rgba(255, 255, 255, 0.06);
  --color-white-a08: rgba(255, 255, 255, 0.08);
  --color-white-a10: rgba(255, 255, 255, 0.1);
  --color-white-a12: rgba(255, 255, 255, 0.12);
  --color-white-a15: rgba(255, 255, 255, 0.15);
  --color-white-a20: rgba(255, 255, 255, 0.2);

  /* ——— Typography: families ——— */
  --font-primary: 'Inter', 'DM Sans', 'Segoe UI', sans-serif;
  --font-display: 'Oswald', 'Syne', 'Segoe UI', sans-serif;
  --font-logo: 'Oswald', 'Syne', 'Segoe UI', sans-serif;

  /* ——— Typography: scale (consolidates ~89 rem micro-variants) ——— */
  --text-2xs: 0.68rem;   /* badges / eyebrows */
  --text-xs: 0.75rem;    /* labels */
  --text-sm: 0.85rem;    /* secondary UI (was 0.82–0.88) */
  --text-md: 0.9rem;     /* default UI copy */
  --text-lg: 0.95rem;    /* section subcopy */
  --text-xl: 1.1rem;     /* logo / emphasis */
  --text-2xl: 1.2rem;
  --text-3xl: 1.5rem;
  --text-4xl: clamp(1.6rem, 3.5vw, 2.5rem); /* h2 */
  --text-5xl: clamp(2.2rem, 5vw, 3.5rem);   /* h1 */

  /* ——— Typography: weights & leading ——— */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --leading-loose: 1.75;

  /* ——— Spacing ——— */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ——— Radius ——— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-btn: 10px;

  /* ——— Shadows ——— */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 24px rgba(240, 196, 58, 0.22);
  --shadow-glow-strong: 0 8px 32px rgba(240, 196, 58, 0.35);
  --shadow-gold: 0 6px 28px rgba(240, 196, 58, 0.4);

  /* ——— Motion ——— */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  /* ——— Layout ——— */
  --max-width: 1200px;
  --prose-width: 42ch;   /* section ledes */
  --hero-title-width: 30ch; /* hub / reading page-hero h1 */
  --hero-lede-width: 54ch;  /* hub page-hero supporting line */
  --faq-width: 40rem;    /* legal/RG reading column (+ legacy alias) */
  --hero-rail-width: 48rem; /* home/hubs//faq accordion + FAQ/legal/RG hero */
  --method-width: var(--faq-width); /* legacy alias; homepage method is full-width in CSS */
  --title-width: 28rem;  /* short board / compact section titles */

  /* ——— Legacy aliases ——— */
  --color-green: var(--color-success);
  --color-green-light: var(--color-success-light);
  --color-green-dark: var(--color-success-dark);
}