/* ═══════════════════════════════════════════════════════════════
   HARMONY AI - Colors & Type Tokens
   v0.2 · Editorial, warm, restrained
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts (Inter + JetBrains Mono) loaded via <link> in HTML head
   to avoid FOUT caused by CSS @import chain. */

/* ─── C059 - brand serif (Century-style, URW) ─── */
@font-face {
  font-family: "C059";
  src: url("fonts/C059-Roman.otf") format("opentype"),
       url("fonts/C059-Roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "C059";
  src: url("fonts/C059-Italic.otf") format("opentype"),
       url("fonts/C059-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "C059";
  src: url("fonts/C059-Bold.otf") format("opentype"),
       url("fonts/C059-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "C059";
  src: url("fonts/C059-BdIta.otf") format("opentype"),
       url("fonts/C059-BdIta.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── INK - type & dark surfaces (warm near-black navy) ─── */
  --ink:            #10192B;   /* primary text, button fills, dark surfaces */
  --ink-soft:       #2A3544;   /* body text, secondary headlines */
  --graphite:       #4A5564;   /* captions, tertiary copy, muted data */
  --gravel:         #6C6660;   /* meta text, monospace labels */

  /* ─── PAPER - primary surfaces (warm near-whites) ─── */
  --parchment:      #FFFBF7;   /* page background - the default surface */
  --chalk:          #FFFFFF;   /* cards, elevated panels */
  --stone:          #F1EBDC;   /* dividers, table headers, pressed states */
  --sand:           #DED5C1;   /* rule lines, separators */

  /* ─── DEEP - dark bands (hero, final CTA) ─── */
  --deep:           #0B1A2E;
  --navy:           #17375E;

  /* ─── BLUEPRINT - THE ONLY chromatic accent ─── */
  --blueprint:      #1E3A8A;   /* line art, links, diagrams */
  --blueprint-soft: #4C6FB8;   /* eyebrow accents on dark */

  /* ─── RUST - ceremonial only (dates, ordinals) ─── */
  --rust:           #9A3A1F;

  /* ─── SEMANTIC ALIASES ─── */
  --bg:             var(--parchment);
  --bg-elevated:    var(--chalk);
  --bg-muted:       var(--stone);
  --bg-dark:        var(--deep);

  --fg:             var(--ink);
  --fg-1:           var(--ink);
  --fg-2:           var(--ink-soft);
  --fg-3:           var(--graphite);
  --fg-4:           var(--gravel);
  --fg-on-dark:     var(--chalk);
  --fg-on-dark-muted: rgba(250, 246, 236, 0.72);

  --border:         rgba(16, 25, 43, 0.12);
  --border-strong:  var(--ink);
  --border-soft:    var(--sand);
  --border-dark:    rgba(250, 246, 236, 0.12);

  --accent:         var(--blueprint);
  --link:           var(--blueprint);

  /* ─── TYPE STACK ─── */
  --serif:  "C059", ui-serif, Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── RHYTHM / RULES ─── */
  --rule:           1px solid var(--border);
  --rule-strong:    1px solid var(--ink);
  --rule-dark:      1px solid var(--border-dark);

  /* ─── RADII - minimal. Editorial. ─── */
  --radius-xs:      2px;    /* cards, panels, hero - print feel */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;   /* testimonial "voice" cards only */
  --radius-pill:    999px;  /* buttons */

  /* ─── SPACING (8pt base, with editorial 48/72/96/120 rhythm) ─── */
  --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-18:       72px;
  --space-24:       96px;
  --space-30:       120px;

  /* ─── SHADOWS - used sparingly; print doesn't have shadows ─── */
  --shadow-none:    none;
  --shadow-sm:      0 1px 2px rgba(16, 25, 43, 0.04);
  --shadow-md:      0 2px 8px rgba(16, 25, 43, 0.06);
  --shadow-lg:      0 8px 24px rgba(16, 25, 43, 0.08);

  /* ─── TYPE TOKENS - semantic ─── */
  --letter-tight:   -0.025em;
  --letter-snug:    -0.015em;
  --letter-normal:  -0.005em;
  --letter-tracked: 0.22em;   /* mono eyebrows, labels */

  /* Transition */
  --ease:           0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════
   BASE ELEMENT STYLES - semantic defaults
   ═══════════════════════════════════════════════════════════════ */

html {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { font-family: var(--sans); color: var(--fg); background: var(--bg); }

/* ─── DISPLAY SERIF (Fraunces) - hero + section heads ─── */

.display-xl, h1 {
  font-family: var(--serif);
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.display-lg, h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.display-md, h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.display-sm, h4 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.display-xl em, .display-lg em, .display-md em,
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
}

/* ─── BODY (Inter) ─── */

.body-lg {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.body-md, p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.body-sm {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ─── MONO (JetBrains Mono) - labels, data, eyebrows ─── */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--letter-tracked);
  text-transform: uppercase;
  color: var(--ink);
}

.meta, .caption, code, kbd, .mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--gravel);
}

.data-readout {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ─── LINK ─── */
a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity var(--ease); }
a:hover { opacity: 0.65; }