/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Core palette */
  --navy:          #0B2342;
  --navy-deep:     #060F1C;
  --navy-mid:      #0D1E35;
  --navy-panel:    rgba(8, 22, 45, 0.90);
  --navy-glass:    rgba(11, 35, 66, 0.72);

  --gold:          #D4AF37;
  --gold-dim:      #D4AF37;
  --gold-faint:    rgba(212, 175, 55, 0.25);
  --gold-glow:     rgba(212, 175, 55, 0.35);
  --gold-border:   rgba(212, 175, 55, 0.75);

  --white:         #FFFFFF;
  --white-body:    #FFFFFF;
  --white-dim:     #FFFFFF;
  --white-faint:   rgba(255, 255, 255, 0.30);

  /* Panel system */
  --panel-bg:      rgba(8, 22, 45, 0.88);
  --panel-border:  rgba(212, 175, 55, 0.70);
  --panel-radius:  4px;
  --panel-shadow:  0 0 32px rgba(0, 0, 0, 0.4);

  /* Typography scale */
  --text-xs:       15px;
  --text-sm:       15px;
  --text-base:     15px;
  --text-md:       18px;
  --text-lg:       22px;
  --text-xl:       30px;
  --text-2xl:      42px;
  --text-3xl:      58px;
  --text-hero:     72px;

  /* Spacing */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Barlow', sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--white-body);
  background-color: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Metallic gold — reusable gradient treatment ────────────── */
.gold-metal {
  background: linear-gradient(
    135deg,
    #8B6508 0%,
    #C9960C 15%,
    #E5C535 30%,
    #FFF4A0 48%,
    #E5C535 66%,
    #C9960C 82%,
    #8B6508 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Typography roles ───────────────────────────────────────── */

/* Display — IM Fell English italic, hero headline only */
.t-display {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--white);
}

/* Section heading — Barlow Bold */
.t-heading {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  line-height: 1.20;
  color: var(--white);
}

/* Eyebrow — small caps track, metallic gold */
.t-eyebrow {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #8B6508 0%, #C9960C 15%, #E5C535 30%, #FFF4A0 48%, #E5C535 66%, #C9960C 82%, #8B6508 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* System code — monospace panel ID, metallic gold */
.t-code {
  font-family: 'Barlow Condensed', 'Courier New', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  font-weight: 700;
  background: linear-gradient(135deg, #8B6508 0%, #C9960C 15%, #E5C535 30%, #FFF4A0 48%, #E5C535 66%, #C9960C 82%, #8B6508 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Data value — large number, metallic gold */
.t-data {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(135deg, #8B6508 0%, #C9960C 15%, #E5C535 30%, #FFF4A0 48%, #E5C535 66%, #C9960C 82%, #8B6508 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Body text */
.t-body {
  color: var(--white-body);
  line-height: 1.70;
}

/* Dim text */
.t-dim {
  color: var(--white-dim);
}

/* Gold accent text — metallic */
.t-gold {
  background: linear-gradient(135deg, #8B6508 0%, #C9960C 15%, #E5C535 30%, #FFF4A0 48%, #E5C535 66%, #C9960C 82%, #8B6508 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Utility ─────────────────────────────────────────────────── */
.gold-line {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 15%, var(--gold-dim) 85%, transparent);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}