/* ==================================================
   DESIGN TOKENS & CSS VARIABLES
   Extracted from Figma: Damon-West-Website (185:53)
   ================================================== */

:root {
  /* Colors — Primary (brand teals, verified per-node from Figma) */
  --color-primary: #0E586F; /* section bg (Damon Talks), white-button label */
  --color-primary-light: #1A677E; /* card gradient mid */
  --color-primary-dark: #083949; /* footer bg */
  --color-heading-dark: #06313D; /* dark headings, dark button bg */
  --color-teal-mid: #0B5D72;
  --color-teal-deep: #0C4A5D; /* storytelling section bg */
  --color-hero-base: #09414F; /* hero base under image */

  /* Colors — Light section background (Figma: #F4FCFF @20% over white) */
  --color-bg-light: #FDFEFF;

  /* Colors — Accent */
  --color-accent: #FFFFFF;
  --color-gold: #FBBF24; /* stars, highlights */
  --color-turquoise: #3EC6B8; /* script accent ("Prison" in Letters band) */

  /* Colors — Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.9);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-faint: rgba(255, 255, 255, 0.4); /* footer copyright / legal */
  --color-text-dark: #000000;
  --color-text-gray: #4B5563;

  /* Colors — Border & Glass */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-glass-bg: rgba(255, 255, 255, 0.25);
  --color-glass-bg-light: rgba(14, 88, 111, 0.4);
  --color-glass-bg-subtle: rgba(255, 255, 255, 0.05);

  /* Gradients (verified per-node from Figma) */
  /* Card fill: #0E586F -> #1A677E (56%) -> #0E586F */
  --gradient-card: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-light) 56%,
    var(--color-primary) 100%
  );
  --gradient-primary: var(--gradient-card);
  --gradient-section: linear-gradient(
    180deg,
    #053641 0%,
    #12596A 50%,
    #06313D 100%
  );
  /* Hero image overlay: #0E586F @80% (13.5%) -> transparent (47.6%),
     anchored at the BOTTOM of the frame (Figma gradientTransform) */
  --gradient-hero-overlay: linear-gradient(
    0deg,
    rgba(14, 88, 111, 0.8) 13.5%,
    rgba(14, 88, 111, 0) 47.6%
  );
  --gradient-sheen: linear-gradient(90deg, #EBEBEB 0%, #FFFFFF 51%, #EBEBEB 100%);

  /* Typography */
  --font-heading: "Oswald", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Rage Italic", "Brush Script MT", cursive; /* "Prison" accent in Letters band */

  /* Type scale (Figma: 14 / 16 / 18 / 20 / 22-24 / 30 / 40 / 48 / 90) */
  --text-xs: 1.125rem; /* 18px — eyebrow & nav links (Oswald Medium 18) */
  --text-sm: 0.875rem; /* 14px — captions, meta */
  --text-base: 1rem; /* 16px — body */
  --text-lg: 1.125rem; /* 18px — lede / large body */
  --text-xl: 1.25rem; /* 20px — small card titles */
  --text-2xl: 1.5rem; /* 22–24px — card titles */
  --text-3xl: 1.875rem; /* 30px — H3, stat numbers */
  --text-4xl: 2.5rem; /* 40px — mobile H1/H2 */
  --text-5xl: 3rem; /* 48px — section H2 */
  --text-6xl: 5.625rem; /* 90px — hero H1 */

  --leading-tight: 1.2; /* headings (58/48) */
  --leading-normal: 1.5; /* body (24/16) */
  --leading-relaxed: 1.625; /* lede (29.25/18) */

  --tracking-tight: -0.022em; /* hero H1 (-2px @ 90px) */
  --tracking-heading: 0.042em; /* section H2 (2px @ 48px) */
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;

  /* Spacing (Figma: 8 / 12 / 16 / 24 / 32 / 48 / 60 / 64 / 80 / 108) */
  --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-15: 3.75rem; /* 60px — section gaps */
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-27: 6.75rem; /* 108px — tall section bottom padding */

  /* Layout */
  --container-max: 1440px;
  --container-padding: var(--space-12); /* 48px desktop margins per Figma */
  --section-padding-y: var(--space-20); /* 80px */
  --section-padding-y-lg: var(--space-27); /* 108px */

  /* Border Radius (Figma: 12 / 16 / 24 / 32 / pill) */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows (Figma effects) */
  --shadow-sm: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.04), 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-card-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.4);

  /* Effects */
  --blur-glass: 12px; /* navbar / glass cards backdrop blur */
  --blur-glass-sm: 4px; /* subtle overlays */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ==================================================
   RESPONSIVE TOKEN OVERRIDES
   Figma designed sizes: 1440px desktop | 390px mobile
   (mobile: H1/H2 40px, section padding 64px, 16px margins)
   ================================================== */

/* Laptop — 1200px */
@media (max-width: 1200px) {
  :root {
    --text-6xl: 4.5rem;
    --text-5xl: 2.75rem;
    --container-padding: var(--space-8);
    --section-padding-y: var(--space-16);
    --section-padding-y-lg: var(--space-20);
  }
}

/* Tablet — 992px */
@media (max-width: 992px) {
  :root {
    --text-6xl: 3.5rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2.25rem;
    --container-padding: var(--space-6);
    --section-padding-y: var(--space-12);
  }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  :root {
    --text-6xl: 3rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.5rem;
    --container-padding: var(--space-4); /* 16px per Figma mobile */
    --section-padding-y: var(--space-16); /* 64px per Figma mobile */
  }
}

/* Small Mobile — 480px */
@media (max-width: 480px) {
  :root {
    --text-6xl: 2.5rem; /* 40px — Figma mobile H1 */
    --text-5xl: 2.5rem; /* 40px — Figma mobile H2 */
    --section-padding-y: var(--space-10);
  }
}