/* =========================================================
   DESIGN TOKENS — Luminescent Monolith
   Source: DESIGN.md / Stitch Project 15789045421220435825
   ========================================================= */

:root {
  /* ── Surface Architecture ── */
  --surface:                  #131313;
  --surface-dim:              #131313;
  --surface-bright:           #393939;
  --surface-container-lowest: #0E0E0E;
  --surface-container-low:    #1C1B1B;
  --surface-container:        #201F1F;
  --surface-container-high:   #2A2A2A;
  --surface-container-highest:#353534;
  --surface-variant:          #353534;
  --surface-tint:             #FABD00;

  /* ── Primary — Goldenrod ── */
  --primary:                  #FFE4AF;
  --primary-dim:              #FABD00;
  --primary-container:        #FFC107;
  --primary-fixed:            #FFDF9E;
  --on-primary:               #3F2E00;
  --on-primary-container:     #6D5100;

  /* ── Secondary — Soft Blue ── */
  --secondary:                #89D0ED;
  --secondary-container:      #00627B;
  --secondary-fixed:          #BAEAFF;
  --on-secondary:             #003544;

  /* ── Tertiary — Teal ── */
  --tertiary:                 #B3F4E1;
  --tertiary-container:       #98D7C5;
  --on-tertiary:              #00382E;

  /* ── Text / On-Surface ── */
  --on-surface:               #E5E2E1;
  --on-surface-variant:       #D4C5AB;
  --outline:                  #9C8F78;
  --outline-variant:          #4F4632;
  --inverse-surface:          #E5E2E1;
  --inverse-on-surface:       #313030;

  /* ── Error ── */
  --error:                    #FFB4AB;
  --error-container:          #93000A;

  /* ── Typography ── */
  --font-family:    'Inter', system-ui, sans-serif;
  --font-display:   800;   /* ExtraBold */
  --font-headline:  700;   /* Bold */
  --font-subhead:   600;   /* SemiBold */
  --font-body:      400;   /* Regular */
  --font-label:     500;   /* Medium */

  /* ── Type Scale ── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */
  --text-7xl:   4.5rem;    /* 72px */
  --text-8xl:   6rem;      /* 96px */

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.08em;

  /* ── Line Heights ── */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-body:   1.7;

  /* ── Border Radius ── */
  --radius-sm:   2px;
  --radius:      4px;   /* Design system default — "sharp modern" */
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 9999px;

  /* ── Spacing Scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Layout ── */
  --max-width:  1280px;
  --nav-height: 72px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   200ms ease-in-out;
  --transition-slow:   400ms ease-out;

  /* ── Shadows ── */
  --shadow-float: 0 8px 40px rgba(14, 14, 14, 0.08);
  --shadow-card:  0 4px 24px rgba(14, 14, 14, 0.06);

  /* ── Gradients ── */
  --gradient-gold: linear-gradient(45deg, var(--primary-dim), var(--primary));
  --gradient-hero: radial-gradient(ellipse 80% 60% at 60% 40%,
                    rgba(250, 189, 0, 0.07) 0%,
                    transparent 70%);
  --gradient-section: radial-gradient(ellipse 60% 50% at 50% 0%,
                    rgba(137, 208, 237, 0.05) 0%,
                    transparent 70%);
}