/* =============================================================
   Volt Property — Foundations
   Colors, type, spacing, radius, shadow tokens.
   Import once at the top of any HTML file.
   ============================================================= */

/* Fonts — substituted from Google Fonts.
   Anthropic Serif → Source Serif 4 (closest open-source match for warm,
   medium-weight book serif). Anthropic Sans → Inter Tight (clean,
   warm-leaning humanist sans). Anthropic Mono → JetBrains Mono.
   FLAGGED: replace if Volt licenses a custom serif/sans pair. */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand & accent ---------- */
  --volt-navy: #0d1b2a;          /* primary brand, logo navy, headlines on light */
  --volt-navy-deep: #08111c;     /* dark surface backgrounds */
  --volt-navy-soft: #1a2a3d;     /* hover / second navy step */
  --volt-copper: #b8743a;        /* lightning accent, primary CTA */
  --volt-copper-soft: #cf8b51;   /* coral accent / link on dark */
  --volt-brass: #a8884a;         /* secondary accent, metadata badges */

  /* ---------- Surface (warm light scale) ---------- */
  --parchment: #f2f2ec;          /* page background — matches logo cream */
  --ivory: #f9f8f2;              /* card / elevated surface */
  --white: #ffffff;              /* maximum contrast surface */
  --warm-sand: #e6e4d8;          /* secondary button / interactive surface */
  --warm-stone: #d8d6c9;         /* dividers / pressed states */

  /* ---------- Surface (dark scale) ---------- */
  --dark-surface: #1a2a3d;       /* dark card on navy */
  --dark-surface-2: #243447;     /* elevated dark card */
  --dark-deep: #08111c;          /* darkest surface */

  /* ---------- Text on light ---------- */
  --fg-primary: #0d1b2a;         /* headlines & primary body — navy */
  --fg-secondary: #4a5868;       /* secondary body — warm slate */
  --fg-tertiary: #7a8492;        /* metadata / footnotes */
  --fg-muted: #9ba3ad;           /* de-emphasized */

  /* ---------- Text on dark ---------- */
  --fg-on-dark: #f2f2ec;         /* primary text on navy — parchment */
  --fg-on-dark-2: #c9c8be;       /* secondary text on navy */
  --fg-on-dark-3: #8a8f8a;       /* tertiary text on navy */

  /* ---------- Borders ---------- */
  --border-cream: #ebe9df;       /* whisper-soft border on light */
  --border-warm: #d8d6c9;        /* prominent border on light */
  --border-dark: #243447;        /* border on navy */
  --border-dark-2: #2f4159;      /* prominent border on navy */
  --ring-warm: #c9c7b9;          /* shadow ring color */
  --ring-deep: #b3b1a3;          /* deeper ring for active */

  /* ---------- Semantic ---------- */
  --success: #4f6f3f;            /* deep moss — long-term, grounded */
  --warning: #b8743a;            /* same as copper accent */
  --danger: #9b3a3a;             /* warm crimson */
  --focus: #2c5d8f;              /* deep teal-blue, the only cool color */

  /* ---------- Type families ---------- */
  --font-serif: "Source Serif 4", "Anthropic Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter Tight", "Anthropic Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "Anthropic Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (px) ---------- */
  --fs-display:    64px;   /* hero */
  --fs-h1:         52px;   /* section heading */
  --fs-h2:       36.8px;   /* sub-heading large */
  --fs-h3:         32px;   /* sub-heading */
  --fs-h4:       25.6px;   /* sub-heading small */
  --fs-h5:       20.8px;   /* feature title */
  --fs-body-lg:    20px;   /* intro body */
  --fs-body:       17px;   /* default body */
  --fs-base:       16px;   /* UI body */
  --fs-sm:         15px;   /* compact body */
  --fs-caption:    14px;   /* metadata */
  --fs-label:      12px;   /* label */
  --fs-overline:   10px;   /* overline */
  --fs-micro:     9.6px;   /* smallest */

  /* ---------- Line-heights ---------- */
  --lh-tight:    1.10;
  --lh-snug:     1.20;
  --lh-medium:   1.30;
  --lh-relaxed:  1.60;

  /* ---------- Spacing scale (8px base) ---------- */
  --sp-1:  3px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 16px;
  --sp-8: 20px;
  --sp-9: 24px;
  --sp-10: 30px;
  --sp-11: 40px;
  --sp-12: 56px;
  --sp-13: 80px;
  --sp-14: 120px;

  /* ---------- Radius scale ---------- */
  --r-sharp: 4px;
  --r-sm:    6px;
  --r-md:    8px;       /* standard buttons / cards */
  --r-lg:   12px;       /* primary buttons / inputs / nav */
  --r-xl:   16px;       /* feature containers / video */
  --r-2xl:  24px;       /* tags / highlighted */
  --r-3xl:  32px;       /* hero / embedded media */
  --r-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --ring-1: 0 0 0 1px var(--border-cream);
  --ring-2: 0 0 0 1px var(--ring-warm);
  --ring-3: 0 0 0 1px var(--ring-deep);
  --shadow-whisper: 0 4px 24px rgba(13, 27, 42, 0.06);
  --shadow-soft:    0 8px 32px rgba(13, 27, 42, 0.08);
  --shadow-lift:    0 16px 48px rgba(13, 27, 42, 0.12);
  --shadow-inset:   inset 0 0 0 1px rgba(13, 27, 42, 0.15);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 32px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =============================================================
   Semantic element styling — use directly or as reference.
   ============================================================= */

html, body {
  background: var(--parchment);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--fg-primary);
  margin: 0;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h1);      line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h2);      line-height: var(--lh-medium); }
h4 { font-size: var(--fs-h3);      line-height: var(--lh-tight); }
h5 { font-size: var(--fs-h4);      line-height: var(--lh-snug); }
h6 { font-size: var(--fs-h5);      line-height: var(--lh-snug); }

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-secondary);
  line-height: var(--lh-relaxed);
}

.serif-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
}

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.01em;
  font-weight: 500;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--volt-copper); }

::selection { background: var(--volt-navy); color: var(--parchment); }