/* ============================================================
   Graph Advisors — Colors & Type
   ------------------------------------------------------------
   Brand palette is built around:
   • A confident, saturated brand orange (the bar-chart mark)
   • A blueprint blue used for voxel illustration accents
   • A warm, paper-like neutral system (cream → ink)
   This keeps the brand feeling like "clarity into code":
   editorial financial seriousness with a builder's voxel warmth.
   ============================================================ */

/* ---- Self-hosted fonts ------------------------------------
   All four brand families, served from /fonts:
   Inter Tight (display, variable) · Inter (sans) ·
   Fraunces (serif) · JetBrains Mono (mono). */
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Italic-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/Fraunces-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand: Orange (primary) ---------- */
  /* Sampled from the GA bar-chart mark and product covers */
  --ga-orange-50:  #FFF3EE;
  --ga-orange-100: #FFE0D1;
  --ga-orange-200: #FFC0A1;
  --ga-orange-300: #FF9A6B;
  --ga-orange-400: #FA7740;
  --ga-orange-500: #EE5722; /* PRIMARY — the logo orange */
  --ga-orange-600: #D94612;
  --ga-orange-700: #B6390C;
  --ga-orange-800: #8A2B08;
  --ga-orange-900: #5C1D06;

  /* ---------- Brand: Blueprint Blue (accent / voxel) ---------- */
  /* Sampled from the voxel illustrations (brain, gears, flows, crane) */
  --ga-blue-50:  #EFF5FB;
  --ga-blue-100: #D8E6F4;
  --ga-blue-200: #A9C6E5;
  --ga-blue-300: #6FA0D0;
  --ga-blue-400: #3F7FB9;
  --ga-blue-500: #1F5FA0; /* mid blueprint blue */
  --ga-blue-600: #154A88; /* deep voxel blue (gears, brain) */
  --ga-blue-700: #0F3B70;
  --ga-blue-800: #0B2C55;
  --ga-blue-900: #081E3B;

  /* ---------- Brand: Sky (light voxel highlight) ---------- */
  --ga-sky-200: #B6D9E8;
  --ga-sky-300: #8DC1D6; /* the crane / flows light blue */
  --ga-sky-400: #62A5C0;

  /* ---------- Neutrals: Paper → Ink ---------- */
  /* Paper is a warm off-white; ink is near-black with slight warmth */
  --ga-paper:    #FAF7F2; /* page bg, warm cream — voxel illustration bg */
  --ga-paper-2:  #F2EDE4; /* alt section bg */
  --ga-paper-3:  #E8E1D4; /* card divider bg */
  --ga-bone:     #DCD4C5; /* faint borders on warm */
  --ga-fog:      #F5F5F4; /* cool neutral surface */
  --ga-mist:     #ECECEA; /* cool divider */
  --ga-stone-300:#C9C7C3;
  --ga-stone-500:#8A8881;
  --ga-stone-700:#4F4D48;
  --ga-ink:      #1A1A1A; /* primary text */
  --ga-ink-soft: #2D2D2D;
  --ga-white:    #FFFFFF;

  /* ---------- Semantic ---------- */
  --bg:           var(--ga-paper);
  --bg-alt:       var(--ga-paper-2);
  --bg-elevated:  var(--ga-white);
  --bg-inverse:   var(--ga-ink);

  --fg:           var(--ga-ink);       /* primary text */
  --fg-muted:     var(--ga-stone-700); /* secondary text */
  --fg-subtle:    var(--ga-stone-500); /* tertiary / captions */
  --fg-inverse:   var(--ga-paper);

  --border:       var(--ga-bone);
  --border-strong:var(--ga-stone-300);
  --border-ink:   var(--ga-ink);

  --accent:        var(--ga-orange-500);
  --accent-hover:  var(--ga-orange-600);
  --accent-press:  var(--ga-orange-700);
  --accent-soft:   var(--ga-orange-50);
  --accent-on:     var(--ga-white);

  --info:          var(--ga-blue-600);
  --info-soft:     var(--ga-blue-50);

  /* Charts often pair orange + deep blue + sky highlights */
  --chart-1: var(--ga-orange-500);
  --chart-2: var(--ga-blue-600);
  --chart-3: var(--ga-sky-300);
  --chart-4: var(--ga-orange-300);
  --chart-5: var(--ga-blue-400);
  --chart-6: var(--ga-stone-500);

  /* Status (kept minimal — the brand uses orange for emphasis,
     so success/danger should not compete with it) */
  --success: #2F7A4D;
  --warning: #B6890C;
  --danger:  #B23A1F; /* deeper than brand orange */

  /* ---------- Typography ---------- */
  /* The wordmark is a heavy condensed-feeling sans (think
     Helvetica Bold/Compressed). Body across the site is a clean
     humanist sans. Display moments use a friendly serif accent.

     Substitutions documented in README — flag for the user:
       Wordmark      → Inter Tight (bold, tight tracking)  ~  Helvetica Bold
       UI / Body     → Inter                                ~  System sans
       Numerals      → Inter (tabular)
       Display Serif → Fraunces (optional; for editorial moments)
       Mono          → JetBrains Mono                       (for code/tickers)
  */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — editorial, tight, confident */
  --fs-display-xl: clamp(56px, 7vw, 96px); /* @kind font */
  --fs-display-l:  clamp(44px, 5.5vw, 72px); /* @kind font */
  --fs-display:    clamp(36px, 4vw, 56px); /* @kind font */
  --fs-h1:         clamp(32px, 3.2vw, 44px); /* @kind font */
  --fs-h2:         clamp(26px, 2.4vw, 34px); /* @kind font */
  --fs-h3:         22px; /* @kind font */
  --fs-h4:         18px; /* @kind font */
  --fs-body-lg:    18px; /* @kind font */
  --fs-body:       16px; /* @kind font */
  --fs-body-sm:    14px; /* @kind font */
  --fs-caption:    13px; /* @kind font */
  --fs-micro:      11px; /* @kind font */

  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-normal:  1.45; /* @kind font */
  --lh-relaxed: 1.6; /* @kind font */

  --tracking-tight:  -0.02em; /* @kind font */
  --tracking-snug:   -0.01em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
  --tracking-wide:   0.02em; /* @kind font */
  --tracking-caps:   0.08em; /* @kind font */

  /* ---------- Spacing (4-base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  /* GA leans toward modest radii — financial credibility — with the
     square logo frame as the strongest "rounded square" reference.
     Buttons + inputs use 6–8px. Cards use 12px. The logo frame is 16px. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-2: 2px;       /* the logo frame uses ~2px */
  --border-width-strong: 3px;

  /* ---------- Shadows ---------- */
  /* Quiet, editorial. Voxel illustrations carry the depth — UI does not. */
  --shadow-xs: 0 1px 2px rgba(20, 18, 14, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 18, 14, 0.06);
  --shadow:    0 6px 18px rgba(20, 18, 14, 0.08);
  --shadow-md: 0 12px 30px rgba(20, 18, 14, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 18, 14, 0.14);
  --shadow-orange: 0 8px 24px rgba(238, 87, 34, 0.22);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container:  1200px;
  --container-wide: 1320px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 4vw, 48px); /* @kind spacing */
}

/* ---------- Base element styles ---------- */
html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings use the tighter wordmark sister-face */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}
p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}
.lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-normal);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
code, .mono, .tabular {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-on);
}