/* Kriosm themes — 8 light variants, all sharing the same token names */

:root {
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.04), 0 1px 3px rgba(20, 18, 14, 0.05);
  --shadow: 0 8px 24px -12px rgba(20, 18, 14, 0.12), 0 2px 6px rgba(20, 18, 14, 0.04);
  --shadow-lg: 0 28px 56px -28px rgba(20, 18, 14, 0.18), 0 6px 12px rgba(20, 18, 14, 0.05);

  --pace: 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 1. Paper — editorial default, warm off-white, near-black ink, crimson accent */
[data-theme="paper"] {
  --bg: #f7f4ee;
  --bg-elev: #fdfbf6;
  --bg-panel: #ffffff;
  --bg-tint: #efeadf;
  --ink: #1a1916;
  --ink-soft: #403d37;
  --ink-muted: #7a756a;
  --ink-faint: #b4ad9f;
  --line: #e4ddcd;
  --line-soft: #ede7d8;
  --accent: #c0392b;
  --accent-soft: #f4d9d4;
  --accent-ink: #7a1f16;
  --pos: #3a7d44;
  --pos-soft: #dfeadc;
  --neg: #a03030;
  --neg-soft: #f4d9d4;
  --chart-1: #c0392b;
  --chart-2: #1a1916;
  --chart-3: #8c6a3f;
  --chart-4: #3a7d44;
  --chart-5: #6a5d8a;
}

/* 2. Sand — warm cream + cocoa + terracotta */
[data-theme="sand"] {
  --bg: #f3ece0;
  --bg-elev: #faf4e7;
  --bg-panel: #fffaf0;
  --bg-tint: #e9dfcb;
  --ink: #2b221a;
  --ink-soft: #4f4233;
  --ink-muted: #8a7a63;
  --ink-faint: #bfb19a;
  --line: #ddd0b7;
  --line-soft: #e8ddc6;
  --accent: #b5552c;
  --accent-soft: #f2dac9;
  --accent-ink: #6e3217;
  --pos: #5d7b3f;
  --pos-soft: #e3e9d4;
  --neg: #a34634;
  --neg-soft: #f2d9cf;
  --chart-1: #b5552c;
  --chart-2: #5d4a31;
  --chart-3: #c9a663;
  --chart-4: #5d7b3f;
  --chart-5: #8a6a8a;
}

/* 3. Sage — bone + muted green + deep forest */
[data-theme="sage"] {
  --bg: #ecede4;
  --bg-elev: #f5f6ee;
  --bg-panel: #fafbf4;
  --bg-tint: #dfe2d4;
  --ink: #1e2420;
  --ink-soft: #3d4540;
  --ink-muted: #737b71;
  --ink-faint: #aeb4a8;
  --line: #d3d8c8;
  --line-soft: #dfe3d4;
  --accent: #44624a;
  --accent-soft: #d7e1d6;
  --accent-ink: #243828;
  --pos: #44624a;
  --pos-soft: #d7e1d6;
  --neg: #9c4434;
  --neg-soft: #ecd5ce;
  --chart-1: #44624a;
  --chart-2: #2b342e;
  --chart-3: #a3904b;
  --chart-4: #7b8a5c;
  --chart-5: #5d728a;
}

/* 4. Coastal — soft blue-grey + sand + navy */
[data-theme="coastal"] {
  --bg: #eaeef2;
  --bg-elev: #f3f6f9;
  --bg-panel: #fbfdff;
  --bg-tint: #dce3eb;
  --ink: #16222e;
  --ink-soft: #324253;
  --ink-muted: #6a7989;
  --ink-faint: #a5afbb;
  --line: #cfd8e2;
  --line-soft: #dde4ec;
  --accent: #1d4e7a;
  --accent-soft: #d1dde8;
  --accent-ink: #0c2638;
  --pos: #2f6b58;
  --pos-soft: #d3e3dc;
  --neg: #a84a3a;
  --neg-soft: #ecd6cf;
  --chart-1: #1d4e7a;
  --chart-2: #16222e;
  --chart-3: #c8a068;
  --chart-4: #2f6b58;
  --chart-5: #7a5d8a;
}

/* 5. Dusk — lavender-white + mauve + aubergine */
[data-theme="dusk"] {
  --bg: #efebf0;
  --bg-elev: #f7f3f8;
  --bg-panel: #fcfaff;
  --bg-tint: #e2dbe4;
  --ink: #25202b;
  --ink-soft: #453d4c;
  --ink-muted: #78707f;
  --ink-faint: #b1a9b7;
  --line: #d8cfdc;
  --line-soft: #e3dbe6;
  --accent: #6d3f6a;
  --accent-soft: #e1d4e1;
  --accent-ink: #3a1f39;
  --pos: #4a6d56;
  --pos-soft: #d7e1d6;
  --neg: #9c3d4c;
  --neg-soft: #ecd2d6;
  --chart-1: #6d3f6a;
  --chart-2: #2f243a;
  --chart-3: #b08a5e;
  --chart-4: #4a6d56;
  --chart-5: #3d5d7a;
}

/* 6. Clay — rust + cream + olive */
[data-theme="clay"] {
  --bg: #f1e6da;
  --bg-elev: #f9efe2;
  --bg-panel: #fff7ec;
  --bg-tint: #e3d3c0;
  --ink: #281e15;
  --ink-soft: #4c3d2d;
  --ink-muted: #857361;
  --ink-faint: #beaf9d;
  --line: #d8c6ad;
  --line-soft: #e4d6bf;
  --accent: #a64228;
  --accent-soft: #eecfc1;
  --accent-ink: #61200f;
  --pos: #6b7a2e;
  --pos-soft: #e3e6c6;
  --neg: #a64228;
  --neg-soft: #eecfc1;
  --chart-1: #a64228;
  --chart-2: #4c3d2d;
  --chart-3: #6b7a2e;
  --chart-4: #c99052;
  --chart-5: #5d728a;
}

/* 7. Mint — mint-ivory + slate + teal */
[data-theme="mint"] {
  --bg: #e8efe8;
  --bg-elev: #f2f8f2;
  --bg-panel: #fafdfa;
  --bg-tint: #d6e1d7;
  --ink: #152322;
  --ink-soft: #2f413f;
  --ink-muted: #6c7b79;
  --ink-faint: #a6b1af;
  --line: #cedbd0;
  --line-soft: #dde7de;
  --accent: #1f6d66;
  --accent-soft: #cde3e0;
  --accent-ink: #0f3b38;
  --pos: #1f6d66;
  --pos-soft: #cde3e0;
  --neg: #a84a3a;
  --neg-soft: #ecd6cf;
  --chart-1: #1f6d66;
  --chart-2: #152322;
  --chart-3: #c49a4e;
  --chart-4: #3d7a5d;
  --chart-5: #5d5d8a;
}

/* 8. Butter — pale yellow + warm white + espresso */
[data-theme="butter"] {
  --bg: #f6eeda;
  --bg-elev: #fbf5e4;
  --bg-panel: #fffbeb;
  --bg-tint: #ecddbd;
  --ink: #2a1e0f;
  --ink-soft: #50402a;
  --ink-muted: #8a7a60;
  --ink-faint: #c1b297;
  --line: #e0cea6;
  --line-soft: #ead9b4;
  --accent: #6b3d1a;
  --accent-soft: #ebd9c0;
  --accent-ink: #3a1e0a;
  --pos: #6b7a2e;
  --pos-soft: #e3e6c6;
  --neg: #a64228;
  --neg-soft: #eecfc1;
  --chart-1: #6b3d1a;
  --chart-2: #2a1e0f;
  --chart-3: #c49a4e;
  --chart-4: #6b7a2e;
  --chart-5: #5d5d8a;
}

/* Base element styling keyed to tokens */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--pace), color var(--pace);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
a.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--pace);
}
a.link:hover { border-bottom-color: var(--accent); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: var(--accent);
}

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--bg);
  transition: transform var(--pace), background-color var(--pace), border-color var(--pace);
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--ink); }
.btn.accent { background: var(--accent); color: #fff; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg-tint);
  color: var(--ink-soft);
  border: 1px solid var(--line-soft);
}
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.chip.pos { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.chip.neg { background: var(--neg-soft); color: var(--neg); border-color: transparent; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.divider-dot::before { content: '·'; margin: 0 8px; color: var(--ink-faint); }

/* Utility */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }