/* ==================================================================
   AI Library — design tokens
   Two directions: "press" (understated) and "editorial" (newspaper)
   Shared: warm cream paper, serif body, sans UI, pill tags, left nav
   ================================================================== */

:root {
  /* paper */
  --paper:        oklch(0.975 0.008 85);     /* warm off-white cream */
  --paper-sunk:   oklch(0.955 0.010 85);     /* sunken surfaces */
  --paper-raised: oklch(0.985 0.006 85);     /* raised cards */

  /* ink */
  --ink:          oklch(0.22  0.012 70);     /* body text, warm near-black */
  --ink-soft:     oklch(0.38  0.010 70);     /* secondary */
  --ink-muted:    oklch(0.55  0.008 70);     /* meta */
  --ink-faint:    oklch(0.72  0.006 70);     /* hairline labels */

  /* rule */
  --rule:         oklch(0.88  0.010 80);     /* hairlines */
  --rule-strong:  oklch(0.78  0.012 80);

  /* accent — ink blue (direction A: press) */
  --accent:       oklch(0.42  0.09  245);
  --accent-ink:   oklch(0.30  0.09  245);
  --accent-wash:  oklch(0.94  0.02  245);

  /* type */
  --serif-body:   "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --serif-display:"Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* scale */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 44px;

  /* spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* radii */
  --r-pill: 999px;
  --r-sm:   3px;
  --r-md:   6px;

  /* shadow (used sparingly) */
  --shadow-card: 0 1px 0 oklch(0.88 0.010 80);
}

/* Direction B — "editorial" overrides */
[data-direction="editorial"] {
  --paper:        oklch(0.972 0.012 80);
  --paper-sunk:   oklch(0.948 0.014 80);
  --paper-raised: oklch(0.985 0.008 80);

  --ink:          oklch(0.18  0.015 40);
  --ink-soft:     oklch(0.34  0.012 40);
  --ink-muted:    oklch(0.52  0.010 40);

  --rule:         oklch(0.84  0.014 50);
  --rule-strong:  oklch(0.72  0.016 40);

  --accent:       oklch(0.40  0.12 25);     /* oxblood */
  --accent-ink:   oklch(0.30  0.12 25);
  --accent-wash:  oklch(0.94  0.03 25);

  --serif-display:"Fraunces", "Source Serif 4", Georgia, serif;
  --serif-body:   "Lora", "Source Serif 4", Georgia, serif;
}

/* accent variants exposed as tweaks */
[data-accent="ink-blue"]   { --accent: oklch(0.42 0.09 245); --accent-ink: oklch(0.30 0.09 245); --accent-wash: oklch(0.94 0.02 245); }
[data-accent="oxblood"]    { --accent: oklch(0.40 0.12 25);  --accent-ink: oklch(0.30 0.12 25);  --accent-wash: oklch(0.94 0.03 25); }
[data-accent="terracotta"] { --accent: oklch(0.55 0.11 45);  --accent-ink: oklch(0.42 0.11 45);  --accent-wash: oklch(0.95 0.03 45); }
[data-accent="forest"]     { --accent: oklch(0.40 0.07 150); --accent-ink: oklch(0.30 0.07 150); --accent-wash: oklch(0.94 0.02 150); }

/* reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }

/* utility */
.ui { font-family: var(--sans); font-feature-settings: "ss01", "cv11"; }
.mono { font-family: var(--mono); }
.smallcaps {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); margin: 0; }

/* scrollbar tuning */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.85 0.01 80); border-radius: 10px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: oklch(0.75 0.012 80); }

/* selection */
::selection { background: var(--accent-wash); color: var(--accent-ink); }