/* =====================================================================
   Tavrik — Design tokens
   Color, type, spacing, radii, shadows.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap");

:root {
  /* ============ COLOR — RAW PALETTE ============ */

  --ink-900: #0B0E14;
  --ink-800: #16110D;
  --ink-700: #2A2F3A;
  --ink-600: #3A322B;
  --ink-500: #5A5249;
  --ink-400: #7A7368;
  --ink-300: #7B8290;
  --ink-200: #8B7E6E;

  --bone-50:  #FBF9F4;
  --bone-100: #F5F1EA;
  --bone-150: #F4EFE6;
  --bone-200: #ECE7DB;
  --bone-300: #D9D2C5;
  --bone-400: #C9C2B5;
  --bone-500: #B0A899;

  --copper-300: #F4B584;
  --copper-500: #E08A4A;
  --copper-600: #C8701F;
  --copper-700: #7A4A28;

  --signal-green:  #3F7A5A;
  --signal-amber:  #B8851F;
  --signal-red:    #B23A2E;
  --signal-blue:   #2F5A8A;

  /* ============ COLOR — SEMANTIC TOKENS ============ */

  --bg:          var(--bone-100);
  --bg-elevated: var(--bone-50);
  --bg-sunken:   var(--bone-150);
  --bg-inverse:  var(--ink-900);

  --fg-1: var(--ink-800);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-200);
  --fg-4: var(--bone-400);
  --fg-on-ink:    var(--bone-100);
  --fg-on-ink-2:  var(--ink-300);
  --fg-on-ink-3:  var(--bone-500);

  --border-1:      var(--bone-300);
  --border-2:      var(--bone-400);
  --border-strong: var(--ink-900);
  --border-on-ink: var(--ink-700);

  --accent:        var(--copper-500);
  --accent-deep:   var(--copper-700);
  --accent-tint:   var(--copper-300);
  --accent-hover:  var(--copper-600);
  --accent-fg:     var(--bone-50);

  --link:       var(--copper-700);
  --link-hover: var(--ink-900);

  --focus-ring: var(--copper-500);

  /* ============ TYPE ============ */

  --font-serif:  Cambria, "Lora", "Iowan Old Style", Georgia,
                 "Times New Roman", serif;
  --font-sans:   Calibri, "Open Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", system-ui, sans-serif;
  --font-mono:   Consolas, "Source Code Pro", "SF Mono", "Menlo", monospace;

  --fs-display-xl: 88px;
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-micro:      12px;
  --fs-micro-2:    11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;

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

  /* ============ SPACING ============ */

  --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;
  --space-10: 128px;

  --rail-max:    1280px;
  --rail-gutter: 64px;

  /* ============ RADII ============ */

  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;

  /* ============ SHADOWS ============ */

  --shadow-1: 0 1px 2px rgba(11, 14, 20, 0.06);
  --shadow-2: 0 2px 8px rgba(11, 14, 20, 0.08);
  --shadow-3: 0 8px 24px rgba(11, 14, 20, 0.10);
  --shadow-4: 0 24px 56px rgba(11, 14, 20, 0.16);
}

/* ============ DARK MODE ============ */

:root[data-theme="dark"],
.tv-dark {
  --bg:          var(--ink-900);
  --bg-elevated: var(--ink-700);
  --bg-sunken:   #07090E;
  --bg-inverse:  var(--bone-100);

  --fg-1: var(--bone-50);
  --fg-2: var(--bone-500);
  --fg-3: var(--ink-300);
  --fg-4: var(--ink-500);

  --border-1: var(--ink-700);
  --border-2: #364065;
  --border-strong: var(--bone-100);

  --link:       var(--copper-300);
  --link-hover: var(--bone-50);
}

/* ============ TYPE STYLES ============ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tv-display-xl, .tv-display-l, .tv-display-m,
.tv-h1, .tv-h2, .tv-h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.tv-display-xl { font-size: var(--fs-display-xl); }
.tv-display-l  { font-size: var(--fs-display-l);  }
.tv-display-m  { font-size: var(--fs-display-m);  }
.tv-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
.tv-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.tv-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

.tv-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tv-body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); text-wrap: pretty; }
.tv-body   { font-size: var(--fs-body);   line-height: var(--lh-normal); color: var(--fg-2); text-wrap: pretty; }
.tv-body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--fg-2); }
.tv-caption { font-size: var(--fs-caption); color: var(--fg-3); }

.tv-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.tv-eyebrow--accent { color: var(--accent-deep); }
.tv-eyebrow--ink    { color: var(--fg-1); }

.tv-index {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-deep);
}

.tv-mono { font-family: var(--font-mono); font-feature-settings: "calt" 0; }

.tv-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--border-1);
  padding: 1px 6px;
  border-radius: var(--radius-1);
  color: var(--fg-1);
}

.tv-prose a, a.tv-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.tv-prose a:hover, a.tv-link:hover { color: var(--link-hover); }

.tv-numeric { font-variant-numeric: tabular-nums; }

.tv-rule {
  border: 0;
  border-top: 1px solid var(--border-2);
  margin: 0;
}
.tv-rule--strong { border-top-color: var(--border-strong); }