/* =============================================================
   SPARK TECH ADVISORY — Colors & Type

   Mirrored from the "SPARK Tech Advisory" Claude Design system's
   colors_and_type.css (project 9dc6cd5f). Keep it byte-comparable to
   that file the way public/css/theme.css mirrors Sew Sweet's tokens —
   if they drift, resync from the design project, not from here.

   Two deliberate differences from the source, both about delivery:
     1. Fonts are woff2 (126 KB total) rather than the project's .ttf
        (665 KB). Same families, a fifth of the bytes over the wire.
     2. The site pins the DARK navy palette. The design system ships a
        light mode via prefers-color-scheme, but every page in the
        project overrides it back to navy, so the override is folded in
        here rather than repeated inline on every page.
   ============================================================= */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/dm-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/dm-sans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-italic.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* ---------- BRAND ---------- */
  --spark-navy:          #1C2B52;
  --spark-navy-deep:     #1A3464;
  --spark-navy-hover:    #243566;
  --spark-gold:          #E8A820;
  --spark-gold-hover:    #F2B83A;
  --spark-gold-deep:     #B87D1A;
  --spark-gold-contrast: #8A6200;
  --spark-cream:         #F5F2EC;
  --spark-white:         #FFFFFF;

  --gold-glow:   rgba(232, 168, 32, 0.12);
  --gold-faint:  rgba(232, 168, 32, 0.06);
  --gold-border: rgba(232, 168, 32, 0.18);

  /* ---------- SURFACES ---------- */
  /* The navy set every page in the design project opts into. */
  --bg:         #101A31;
  --bg-raised:  #17243F;
  --bg-surface: #1E2C4B;
  --bg-card:    #22355E;   /* card fill used across the page grids */
  --bg-header:  rgba(16, 26, 49, .88);

  --border:      rgba(255, 255, 255, 0.07);
  --border-gold: rgba(232, 168, 32, 0.18);

  /* ---------- TEXT ---------- */
  --fg-heading: #FFFFFF;
  --fg-body:    #B8BFC8;
  --fg-muted:   #727D8A;
  --fg-faint:   #4A5361;

  /* ---------- STATUS ---------- */
  --status-success: #4ADE80;
  --status-error:   #F87171;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.35s;

  /* ---------- RADII ---------- */
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-gold-glow: 0 0 28px rgba(232, 168, 32, 0.18);

  /* ---------- LAYOUT ---------- */
  --container-max: 1100px;
  --container-pad: 28px;
  --header-h:      76px;
  --header-h-sm:   54px;

  /* ---------- TYPE ---------- */
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;

  --fs-eyebrow: 11px;  --fs-xs: 12.5px; --fs-sm: 13.5px;
  --fs-base: 16px;     --fs-md: 17.5px; --fs-lg: 22px;
  --fs-xl: 32px;       --fs-display: 44px; --fs-hero: 54px;

  --lh-tight: 1.15; --lh-snug: 1.25; --lh-heading: 1.35;
  --lh-body: 1.7;   --lh-loose: 1.8;

  --ls-eyebrow: 0.12em;
  --ls-uc-tight: 0.06em;
  --ls-display: -0.01em;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--spark-gold); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--spark-gold-hover); }
img { max-width: 100%; }
::selection { background: rgba(232, 168, 32, .25); color: var(--fg-heading); }

/* ---------- TYPE ROLES ---------- */
h1, .h1 {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); color: var(--fg-heading);
}
h1 em, .h1 em {
  font-style: normal; font-family: var(--font-display);
  font-weight: var(--fw-regular); color: var(--spark-gold);
}
h2, .h2 {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: var(--lh-snug);
  color: var(--fg-heading);
}
h3, .h3 {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 1.15rem; line-height: var(--lh-heading); color: var(--fg-heading);
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: 1rem; line-height: var(--lh-heading); color: var(--fg-heading);
}

.eyebrow {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--spark-gold);
}
.lead { font-size: 1.02rem; line-height: var(--lh-loose); color: var(--fg-body); }
.small { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.6; }
.fineprint { font-size: 0.76rem; color: var(--fg-muted); }
.serif-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.08rem; line-height: 1.75; color: var(--fg-heading);
}
code, .code {
  font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-surface);
  padding: .15em .4em; border-radius: 4px; color: var(--fg-heading);
}

/* ---------- LAYOUT HELPERS ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: 96px 0; }
.section--bordered { border-bottom: 1px solid var(--border); }

/* Buttons. The design uses inline styles per page; these are the same values as
   reusable classes so new pages don't have to re-type them. */
.btn {
  display: inline-block; font-size: 14.5px; font-weight: var(--fw-semibold);
  padding: 14px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all .2s var(--ease); font-family: var(--font-sans);
}
.btn--gold { color: var(--bg); background: var(--spark-gold); }
.btn--gold:hover {
  background: var(--spark-gold-hover); color: var(--bg);
  box-shadow: var(--shadow-gold-glow); transform: translateY(-1px);
}
.btn--ghost { color: var(--fg-body); border-color: rgba(255,255,255,.14); font-weight: var(--fw-medium); }
.btn--ghost:hover { border-color: rgba(232,168,32,.5); color: var(--spark-gold); }

.card {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg); transition: all var(--dur-base) var(--ease);
}
a.card:hover {
  border-color: rgba(232,168,32,.35); transform: translateY(-3px);
  box-shadow: var(--shadow-md); color: inherit;
}

/* ---------- RESPONSIVE ---------- */
/* The design is authored at 1100px with fixed multi-column grids; these collapse
   them rather than letting the page scroll sideways on a phone. */
@media (max-width: 900px) {
  :root { --container-pad: 20px; }
  .section { padding: 64px 0; }
  .grid-3, .grid-5, .grid-2 { grid-template-columns: 1fr !important; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
}