/* tokens.css — one file, three modes. Every colour on the site routes through these.
   Structure, ground, ink, paper, line and shadow from WellesOS; accent and type from Renoir.
   A new mode is one more block. The lattice tokens are the one contract between the CSS grid and the engine. */
:root{
  --accent:#F97079;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius:14px;
  --lattice:22px;
  --lattice-origin:-1px;
  --font-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  /* black (default; Renoir's ground) */
  --bg:#080808; --ink:#FAF9F6; --paper:#131314;
  --ink-muted:rgba(244,242,238,.60); --ink-faint:rgba(244,242,238,.42);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --accent-soft:rgba(249,112,121,.22); --accent-line:rgba(249,112,121,.64);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 26px rgba(0,0,0,.7);
  --shadow-soft:0 1px 0 rgba(255,255,255,.02) inset,0 2px 12px rgba(0,0,0,.6);
  --glass:rgba(19,19,20,.55);
  --dot:color-mix(in srgb, var(--accent) 42%, transparent);
  --cursor:var(--accent); --cursor-ring:rgba(255,255,255,.30); --cursor-drop:0 2px 8px rgba(0,0,0,.5);
  --ink-fill:var(--ink); /* heavy fills (a selected pill, a button): the ink itself on the dark grounds */
  color-scheme:dark;
}
html[data-mode="light"]{
  --bg:#faf9f6; --ink:#080808; --paper:#fcfbf9;
  --ink-muted:rgba(8,8,8,.58); --ink-faint:rgba(8,8,8,.36);
  --line:rgba(8,8,8,.13); --line-soft:rgba(8,8,8,.07);
  --accent-soft:rgba(249,112,121,.10); --accent-line:rgba(249,112,121,.50);
  --shadow:0 1px 1px rgba(8,8,8,.04),0 10px 34px rgba(8,8,8,.07);
  --shadow-soft:0 2px 10px rgba(8,8,8,.05);
  --glass:rgba(252,251,249,.62);
  --dot:rgba(8,8,8,.07);
  --cursor-ring:rgba(8,8,8,.2); --cursor-drop:0 2px 8px rgba(8,8,8,.08);
  --ink-fill:#2b2b2d; /* on paper, a heavy fill is a deep grey, not black (the WellesOS way); text and lines stay black */
  color-scheme:light;
}
html[data-mode="dark"]{
  --bg:#191a1c; --ink:#f4f2ee; --paper:#222327;
  --ink-muted:rgba(244,242,238,.62); --ink-faint:rgba(244,242,238,.44);
  --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07);
  --accent-soft:rgba(249,112,121,.20); --accent-line:rgba(249,112,121,.62);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.5);
  --shadow-soft:0 1px 0 rgba(255,255,255,.03) inset,0 2px 10px rgba(0,0,0,.4);
  --glass:rgba(34,35,39,.55);
  --dot:rgba(255,255,255,.10);
}
html[data-mode="black"]{
  --bg:#080808; --ink:#FAF9F6; --paper:#131314;
  --ink-muted:rgba(244,242,238,.60); --ink-faint:rgba(244,242,238,.42);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --accent-soft:rgba(249,112,121,.22); --accent-line:rgba(249,112,121,.64);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 26px rgba(0,0,0,.7);
  --shadow-soft:0 1px 0 rgba(255,255,255,.02) inset,0 2px 12px rgba(0,0,0,.6);
  --glass:rgba(19,19,20,.55);
  --dot:color-mix(in srgb, var(--accent) 42%, transparent);
}