@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap');


/* =============================================================
   RefiHawk Design System — Tokens
   colors_and_type.css

   Imports: Google Fonts (Inter Tight, Source Serif 4, JetBrains Mono)
   Layered: tokens → semantic → element styles
   ============================================================= */
/* ----------------------------------------------------------------
   1. RAW TOKENS
   ---------------------------------------------------------------- */
:root {
  /* ---- Color: Ink (warm near-blacks) ---- */
  --ink-900: #0E0F0C;
  --ink-800: #1A1C18;
  --ink-700: #2A2C27;

  /* ---- Color: Paper (warm bone canvas) ---- */
  --paper:    #FAF8F3;
  --paper-2:  #F4F1E8;  /* slightly cooler paper for section breaks */

  /* ---- Color: Field (warm neutral scale) ---- */
  --field-50:  #F2EFE6;
  --field-100: #E8E4D8;
  --field-200: #DAD5C5;
  --field-300: #C2BCA9;
  --field-400: #A39E8C;
  --field-500: #807B6C;
  --field-600: #5C5849;
  --field-700: #3F3C32;
  --field-800: #2B2924;
  --field-900: #1A1916;

  /* ---- Color: Hawk's Eye amber (the one accent) ---- */
  --accent-50:  #FBF3DE;
  --accent-100: #F5E2B0;
  --accent-200: #EBC976;
  --accent-400: #D4A23F;
  --accent-600: #B8862C;   /* primary brand accent */
  --accent-700: #8E661F;
  --accent-900: #4A3510;

  /* ---- Color: Utility (earthy, never neon) ---- */
  --ok-50:    #E5EFE7;
  --ok-600:   #1F6B3A;
  --ok-700:   #154E29;

  --alert-50:  #F5E1DD;
  --alert-600: #A8341F;
  --alert-700: #7C2415;

  --info-50:   #E0E8F0;
  --info-600:  #2A4A6B;
  --info-700:  #1B3450;

  /* ---- Type ---- */
  --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Source Serif 4', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (modular, ~1.2 ratio at small, opens up at display) */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-4xl:   44px;
  --fs-5xl:   60px;
  --fs-6xl:   84px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-pop:  0 1px 0 rgba(14,15,12,0.04), 0 8px 24px rgba(14,15,12,0.08), 0 2px 6px rgba(14,15,12,0.06);
  --shadow-row:  inset 0 -1px 0 var(--field-100);

  /* ---- Borders ---- */
  --border-hair: 1px solid var(--field-200);
  --border-strong: 1px solid var(--field-300);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  160ms;
  --dur-slow:  240ms;
}
/* ----------------------------------------------------------------
   2. SEMANTIC TOKENS
   ---------------------------------------------------------------- */
:root {
  --bg:           var(--paper);
  --bg-subtle:    var(--paper-2);
  --bg-hover:     var(--field-50);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--field-700);
  --fg-subtle:    var(--field-500);
  --fg-inverse:   var(--paper);

  --border:       var(--field-200);
  --border-strong-color: var(--field-300);

  --brand:        var(--accent-600);
  --brand-hover:  var(--accent-700);
  --brand-soft:   var(--accent-50);

  --focus-ring:   var(--accent-600);
}
/* ----------------------------------------------------------------
   3. BASE / RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* ----------------------------------------------------------------
   4. SEMANTIC ELEMENT STYLES
   ---------------------------------------------------------------- */
/* Display / editorial — uses serif */
.display, h1.display {
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--fs-6xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
}
/* Headings — sans, sentence-case */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}
/* Body */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: 400;
}
small, .small {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
/* Mono */
code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 400;
  font-feature-settings: "tnum", "zero";
}
/* Numbers — tabular */
.num {
  font-feature-settings: "tnum", "zero";
  font-variant-numeric: tabular-nums;
}
/* Links */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--field-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: var(--accent-600); }
/* ----------------------------------------------------------------
   5. UTILITY CLASSES
   ---------------------------------------------------------------- */
.fg-muted   { color: var(--fg-muted); }
.fg-subtle  { color: var(--fg-subtle); }
.fg-brand   { color: var(--brand); }
.fg-ok      { color: var(--ok-600); }
.fg-alert   { color: var(--alert-600); }
.bg-paper    { background: var(--paper); }
.bg-paper-2  { background: var(--paper-2); }
/* ----------------------------------------------------------------
   6. DARK THEME
   Opt-in by setting `data-theme="dark"` on <html> or <body>. We
   override the underlying raw color tokens (paper, ink, field
   scale, accent softs) so existing component styles that reach
   for `var(--paper)`, `var(--field-200)`, etc. flip automatically
   without needing rewrites.
   ---------------------------------------------------------------- */
[data-theme="dark"] {
  /* Surfaces: paper becomes a warm near-black */
  --paper:    #14150F;
  --paper-2:  #1F211B;

  /* Inks invert: dark ink reads as light text on dark bg */
  --ink-900: #FAF8F3;
  --ink-800: #F4F1E8;
  --ink-700: #E8E4D8;

  /* Field scale inverts: light grays become dark slates while still
     ascending in lightness as the number grows. Mid-range stays
     usable as muted body text on either side. */
  --field-50:  #1F211B;
  --field-100: #2A2C25;
  --field-200: #353730;
  --field-300: #45473F;
  --field-400: #5C5849;
  --field-500: #807B6C;
  --field-600: #A39E8C;
  --field-700: #C2BCA9;
  --field-800: #DAD5C5;
  --field-900: #E8E4D8;

  /* Accent softs need to darken to read on dark bg without bleaching */
  --accent-50:  #2A1F0A;
  --accent-100: #4A3812;
  --accent-700: #D4A23F;

  /* Status softs: dim the soft tints; lift the strong text colors */
  --ok-50:    #122416;
  --ok-700:   #4FA774;
  --alert-50: #2A1411;
  --alert-700: #DD7766;
  --info-50:  #122230;
  --info-700: #6A95C8;

  /* Semantic remaps to match the new raw tokens */
  --bg:           var(--paper);
  --bg-subtle:    var(--paper-2);
  --bg-hover:     #2A2C25;
  --bg-inverse:   var(--ink-900);
  --fg:           var(--ink-900);
  --fg-muted:     var(--field-700);
  --fg-subtle:    var(--field-500);
  --fg-inverse:   #14150F;
  --border:       var(--field-200);
  --border-strong-color: var(--field-300);

  /* Shadows lean heavier on dark surfaces */
  --shadow-pop:  0 1px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
/* Smooth the toggle so the page doesn't snap on swap */
html, body {
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.bg-ink      { background: var(--ink-900); color: var(--paper); }