/* Design tokens: identical to the app (src/styles/tokens.css), from CREATIVE-DIRECTION.md §9. Day is the default; Night follows the
   system unless the user picked Day, or applies when they picked Night. */
:root {
  --font-ui: "Hanken Grotesk Variable", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Martian Mono Variable", "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-doc: "Newsreader Variable", "Newsreader", "Iowan Old Style", Georgia, serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-full: 999px;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; --dur-5: 720ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-breathe: cubic-bezier(.45, 0, .55, 1);

  --thread: 6px;            /* thread thickness on the loom */
  --thread-loose-stroke: 1.5px;
}
:root {
  color-scheme: light;
  /* surfaces */
  --paper: #F4F4F1;
  --surface: #FDFDFB;
  --raised: #FFFFFF;
  --sunk: #EAE9E5;
  /* ink */
  --ink: #15181F;
  --ink-2: #474B51;
  --ink-3: #64686D;
  --ink-4: #888B90;
  /* lines */
  --rule: #DCDBD7;
  --rule-strong: #C2C1BD;
  --warp: #E3E2DF;
  /* signal + semantic */
  --signal: #D73025;
  --danger: #B7221A;
  --caution: #E8A628;
  --caution-ink: #8B5500;
  --focus: #15181F;
  /* undyed thread (non-billable) */
  --greige: #AFAAA1;
  --greige-tint: #E4E1DB;
  /* client dyes: solid thread / loose wash / text-safe ink */
  --dye-indigo: #3353AE; --dye-indigo-tint: #DCE6FC; --dye-indigo-ink: #2D4BA0;
  --dye-madder: #C03F5E; --dye-madder-tint: #FBDEE1; --dye-madder-ink: #941A3E;
  --dye-moss: #4F853B; --dye-moss-tint: #DCECD7; --dye-moss-ink: #2F601B;
  --dye-weld: #A08807; --dye-weld-tint: #ECE7CF; --dye-weld-ink: #615202;
  --dye-logwood: #7949A0; --dye-logwood-tint: #ECE1F7; --dye-logwood-ink: #67398A;
  --dye-verdigris: #188487; --dye-verdigris-tint: #CFEDEE; --dye-verdigris-ink: #055F61;
  --dye-walnut: #7F5A3D; --dye-walnut-tint: #F7E2D2; --dye-walnut-ink: #6C4A2F;
  --dye-woad: #3485B8; --dye-woad-tint: #D4EAFA; --dye-woad-ink: #015884;
  --dye-cochineal: #B23586; --dye-cochineal-tint: #F7DEEB; --dye-cochineal-ink: #8E1667;
  --dye-jade: #268B69; --dye-jade-tint: #D3EDE1; --dye-jade-ink: #006247;
  --on-signal: #FFFFFF;
  --shadow-1: 0 1px 0 rgb(21 24 31 / .03), 0 1px 2px rgb(21 24 31 / .06);
  --shadow-2: 0 1px 2px rgb(21 24 31 / .04), 0 12px 32px -10px rgb(21 24 31 / .16);
  --shadow-3: 0 2px 6px rgb(21 24 31 / .05), 0 32px 80px -16px rgb(21 24 31 / .30);
  --edge: inset 0 0 0 1px var(--rule);
  --w-num: 200; --w-text: 400; --w-strong: 600;
  --desk: #E7E6E1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  /* surfaces */
  --paper: #121419;
  --surface: #191C21;
  --raised: #21252B;
  --sunk: #0C0E13;
  /* ink */
  --ink: #EBE9E4;
  --ink-2: #BCBAB6;
  --ink-3: #94928D;
  --ink-4: #727579;
  /* lines */
  --rule: #2C2F35;
  --rule-strong: #44484E;
  --warp: #202329;
  /* signal + semantic */
  --signal: #F15F49;
  --danger: #F67B66;
  --caution: #EEB747;
  --caution-ink: #EEB747;
  --focus: #EBE9E4;
  /* undyed thread (non-billable) */
  --greige: #78746D;
  --greige-tint: #302E29;
  /* client dyes: solid thread / loose wash / text-safe ink */
  --dye-indigo: #7B9CE9; --dye-indigo-tint: #263047; --dye-indigo-ink: #A1BDFC;
  --dye-madder: #EB7E91; --dye-madder-tint: #44262B; --dye-madder-ink: #FAA0AE;
  --dye-moss: #84BD71; --dye-moss-tint: #25361F; --dye-moss-ink: #9FCD90;
  --dye-weld: #E6CA53; --dye-weld-tint: #373014; --dye-weld-ink: #E0CA72;
  --dye-logwood: #B98FDE; --dye-logwood-tint: #372A42; --dye-logwood-ink: #CFADEE;
  --dye-verdigris: #64C3C6; --dye-verdigris-tint: #0D3738; --dye-verdigris-ink: #84CCCE;
  --dye-walnut: #C29C80; --dye-walnut-tint: #412A18; --dye-walnut-ink: #D6B7A0;
  --dye-woad: #77B9E8; --dye-woad-tint: #193345; --dye-woad-ink: #91C5EA;
  --dye-cochineal: #E37DB9; --dye-cochineal-tint: #412735; --dye-cochineal-ink: #F39FCF;
  --dye-jade: #71C9A6; --dye-jade-tint: #17382B; --dye-jade-ink: #8BCFB2;
  --on-signal: #121419;
    --shadow-1: 0 0 0 1px var(--rule);
    --shadow-2: inset 0 1px 0 rgb(255 255 255 / .04), 0 0 0 1px var(--rule), 0 16px 40px -12px rgb(0 0 0 / .6);
    --shadow-3: inset 0 1px 0 rgb(255 255 255 / .05), 0 0 0 1px var(--rule), 0 40px 90px -20px rgb(0 0 0 / .8);
    --edge: inset 0 0 0 1px var(--rule);
    --w-num: 180; --w-text: 380; --w-strong: 560;
    --desk: #0B0D11;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --paper: #121419;
  --surface: #191C21;
  --raised: #21252B;
  --sunk: #0C0E13;
  /* ink */
  --ink: #EBE9E4;
  --ink-2: #BCBAB6;
  --ink-3: #94928D;
  --ink-4: #727579;
  /* lines */
  --rule: #2C2F35;
  --rule-strong: #44484E;
  --warp: #202329;
  /* signal + semantic */
  --signal: #F15F49;
  --danger: #F67B66;
  --caution: #EEB747;
  --caution-ink: #EEB747;
  --focus: #EBE9E4;
  /* undyed thread (non-billable) */
  --greige: #78746D;
  --greige-tint: #302E29;
  /* client dyes: solid thread / loose wash / text-safe ink */
  --dye-indigo: #7B9CE9; --dye-indigo-tint: #263047; --dye-indigo-ink: #A1BDFC;
  --dye-madder: #EB7E91; --dye-madder-tint: #44262B; --dye-madder-ink: #FAA0AE;
  --dye-moss: #84BD71; --dye-moss-tint: #25361F; --dye-moss-ink: #9FCD90;
  --dye-weld: #E6CA53; --dye-weld-tint: #373014; --dye-weld-ink: #E0CA72;
  --dye-logwood: #B98FDE; --dye-logwood-tint: #372A42; --dye-logwood-ink: #CFADEE;
  --dye-verdigris: #64C3C6; --dye-verdigris-tint: #0D3738; --dye-verdigris-ink: #84CCCE;
  --dye-walnut: #C29C80; --dye-walnut-tint: #412A18; --dye-walnut-ink: #D6B7A0;
  --dye-woad: #77B9E8; --dye-woad-tint: #193345; --dye-woad-ink: #91C5EA;
  --dye-cochineal: #E37DB9; --dye-cochineal-tint: #412735; --dye-cochineal-ink: #F39FCF;
  --dye-jade: #71C9A6; --dye-jade-tint: #17382B; --dye-jade-ink: #8BCFB2;
  --on-signal: #121419;
  --shadow-1: 0 0 0 1px var(--rule);
  --shadow-2: inset 0 1px 0 rgb(255 255 255 / .04), 0 0 0 1px var(--rule), 0 16px 40px -12px rgb(0 0 0 / .6);
  --shadow-3: inset 0 1px 0 rgb(255 255 255 / .05), 0 0 0 1px var(--rule), 0 40px 90px -20px rgb(0 0 0 / .8);
  --edge: inset 0 0 0 1px var(--rule);
  --w-num: 180; --w-text: 380; --w-strong: 560;
  --desk: #0B0D11;
}

/* Recommended semantic aliases (optional) */
:root {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-subtle: var(--ink-3);
  --line: var(--rule);
  --now: var(--signal);
}

:root {
  --rail-w: 232px;
  --page-pad: 40px;
  --content-max: 1160px;
  --bar-h: 64px;
  --timer-bar-h: 72px;
}