@timebraid/tokens 1.3.0

package/README.md

@@ -0,0 +1,31 @@
+# @timebraid/tokens
+
+## Install
+
+```ts
+import '@timebraid/tokens/styles.css'
+```
+
+`styles.css` is the v2 theme. `styles-v1.css` keeps the 1.2 theme for one release and is removed in 1.4.0.
+
+That one import gives you every `--*` variable, the element baseline (`body`, headings, links, focus rings), the `.num` helper, and the webfonts.
+
+Light is `:root`; dark is `[data-theme="dark"]` on the root element, set by `watchTheme` from `@timebraid/vue`.
+
+## Files
+
+- `tokens/theme.css` - colour, radius, shadow, blur and motion tokens for both themes: `:root` is light, `[data-theme="dark"]` overrides.
+- `tokens/typography.css` - scale, weights, timer sizes.
+- `tokens/spacing.css` - 4px grid, layout widths, control heights.
+- `tokens/base.css` - element defaults.
+- `tokens/fonts.css` - font stacks. Currently loads Instrument Sans + JetBrains Mono from Google Fonts; swap for local `@font-face` when licensed files exist.
+- `tokens/v1/` - the 1.2 theme, kept for one release behind `styles-v1.css`.
+- `assets/` - `logo.svg` (64px+), `logo-small.svg` (16/32), PNG exports 16→1024.
+
+## Rails
+
+Rails views and emails copy the token values they need (the mailer layout mirrors `--accent`, `--bg`, `--label`, `--on-accent`).
+
+## Rules
+
+Use the semantic tokens (`--bg-elev`, `--label`, `--accent`, `--r-cell`, `--space-5`), never the base ramp (`--indigo-500`). Indigo is the accent, `--running` marks a running timer. Charts and project colours use `--chart-1…8` only.

package/assets/icon-README.md

@@ -0,0 +1,32 @@
+# Timebraid - app icon
+
+Four white uprights and an amber fifth mark drawn as a growth curve, on a deep indigo
+gradient. `TLogo` in `@timebraid/vue` is the only component that renders it.
+
+## Files
+
+- `logo.svg` - vector master, rounded square with padding. Use for 64 px and up, macOS, Windows and Linux icons.
+- `logo-small.svg` - 16 and 32 px artwork. Three uprights instead of four, strokes widened 68 to 104. At 16 px the icon shape is only 12.9 px wide, which fits three strokes with usable gaps but not four; the full mark turns to grey haze.
+- `logo-square.svg` - the master cropped to the icon square with square corners, for platforms that apply their own mask (iOS, Android launcher background, apple-touch-icon).
+- `logo-glyph.svg` - bars and curve only on transparency, for the Android adaptive-icon foreground.
+- `icon-16.png` to `icon-1024.png` - flat exports. 16 and 32 come from `logo-small.svg`, the rest from `logo.svg`.
+
+## Regenerate
+
+```
+packages/tokens/scripts/export-logo.sh
+```
+
+Needs `rsvg-convert` (librsvg). The app repository builds its platform icon sets from these files with `pnpm icons`. For a macOS `.icns`, copy the PNGs into an `.iconset` directory under Apple's names and run `iconutil -c icns Timebraid.iconset -o Timebraid.icns`.
+
+## Specs
+
+1024 x 1024 canvas, icon shape 824 wide and centred, corner radius 181.3 (22%),
+transparent outside the shape, no baked shadow.
+
+Background `#4A57D2` to `#2C3391` to `#151A54`, with a 16% white lift from the top edge.
+Marks `#FFFFFF`. Curve `#F5A524`.
+
+The curve is one cubic Bezier with a round cap. Its control points sit symmetrically about
+the chord, which is what keeps the bend even along the whole stroke - if you edit it, keep
+them mirrored or it develops an elbow.

package/assets/logo-glyph.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="100 100 824 824">
+<line x1="308" y1="296" x2="308" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="444" y1="296" x2="444" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="580" y1="296" x2="580" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="716" y1="296" x2="716" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<path d="M 248 716 C 478.0 619.0, 626.4 504.2, 778 306" fill="none" stroke="#F5A524" stroke-width="80" stroke-linecap="round"></path>
+</svg>

package/assets/logo-small.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
+<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
+</defs>
+<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
+<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
+<g clip-path="url(#mask)">
+<line x1="332" y1="300" x2="332" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<line x1="512" y1="300" x2="512" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<line x1="692" y1="300" x2="692" y2="724" stroke="#FFFFFF" stroke-width="104" stroke-linecap="round"></line>
+<path d="M 272 714 C 482.5 611.9, 615.8 497.1, 748 304" fill="none" stroke="#F5A524" stroke-width="110" stroke-linecap="round"></path>
+</g>
+</svg>

package/assets/logo-square.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="100 100 824 824">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
+</defs>
+<rect x="100" y="100" width="824" height="824" fill="url(#bg)"></rect>
+<rect x="100" y="100" width="824" height="824" fill="url(#lift)"></rect>
+<line x1="308" y1="296" x2="308" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="444" y1="296" x2="444" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="580" y1="296" x2="580" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="716" y1="296" x2="716" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<path d="M 248 716 C 478.0 619.0, 626.4 504.2, 778 306" fill="none" stroke="#F5A524" stroke-width="80" stroke-linecap="round"></path>
+</svg>

package/assets/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<defs>
+<linearGradient id="bg" x1="0" y1="0" x2="0.35" y2="1"><stop offset="0" stop-color="#4A57D2"></stop><stop offset="0.55" stop-color="#2C3391"></stop><stop offset="1" stop-color="#151A54"></stop></linearGradient>
+<radialGradient id="lift" cx="0.5" cy="0.06" r="0.85"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.16"></stop><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"></stop></radialGradient>
+<clipPath id="mask"><rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3"></rect></clipPath>
+</defs>
+<rect id="icon-shape" x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#bg)"></rect>
+<rect x="100.0" y="100.0" width="824" height="824" rx="181.3" ry="181.3" fill="url(#lift)"></rect>
+<g clip-path="url(#mask)">
+<line x1="308" y1="296" x2="308" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="444" y1="296" x2="444" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="580" y1="296" x2="580" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<line x1="716" y1="296" x2="716" y2="728" stroke="#FFFFFF" stroke-width="68" stroke-linecap="round"></line>
+<path d="M 248 716 C 478.0 619.0, 626.4 504.2, 778 306" fill="none" stroke="#F5A524" stroke-width="80" stroke-linecap="round"></path>
+</g>
+</svg>

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@timebraid/tokens",
+  "version": "1.3.0",
+  "description": "Timebraid design tokens: CSS custom properties, base styles, fonts and brand assets.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "styles.css",
+    "styles-v1.css",
+    "tokens",
+    "assets",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./styles.css",
+    "./styles.css": "./styles.css",
+    "./styles-v1.css": "./styles-v1.css",
+    "./tokens/*": "./tokens/*",
+    "./assets/*": "./assets/*"
+  },
+  "sideEffects": true,
+  "scripts": {
+    "build": "node -e \"console.log('@timebraid/tokens: nothing to build')\"",
+    "typecheck": "node -e \"process.exit(0)\""
+  }
+}

package/styles-v1.css

@@ -0,0 +1,7 @@
+@import url("tokens/v1/fonts.css");
+@import url("tokens/v1/colors.css");
+@import url("tokens/v1/typography.css");
+@import url("tokens/v1/spacing.css");
+@import url("tokens/v1/elevation.css");
+@import url("tokens/v1/motion.css");
+@import url("tokens/v1/base.css");

package/styles.css

@@ -0,0 +1,5 @@
+@import url("tokens/fonts.css");
+@import url("tokens/theme.css");
+@import url("tokens/typography.css");
+@import url("tokens/spacing.css");
+@import url("tokens/base.css");

package/tokens/base.css

@@ -0,0 +1,22 @@
+/* Element defaults and the few helper classes every surface needs. */
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0}
+html{-webkit-text-size-adjust:100%}
+body{font-family:var(--font-sans);color:var(--label);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:var(--text-body);line-height:1.45}
+button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
+input,select,textarea{font:inherit;color:inherit}
+a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}
+a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
+::selection{background:var(--accent-soft-2)}
+@keyframes t-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+@keyframes t-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+@keyframes t-sheet{from{transform:translateY(100%)}to{transform:none}}
+@keyframes t-scrim{from{opacity:0}to{opacity:1}}
+@keyframes t-pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
+@keyframes t-island{from{transform:scaleX(.6);opacity:.4}to{transform:none;opacity:1}}
+.view-in{animation:t-in var(--t-base) var(--ease-out) both}
+.press{transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
+.press:active{transform:scale(.98)}
+.row-press:active{background:var(--fill-2)!important}
+@media (prefers-reduced-motion:reduce){*{animation-duration:0ms!important;transition-duration:0ms!important}}

package/tokens/fonts.css

@@ -0,0 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400..700&display=swap');
+
+/* Timebraid webfonts are served from Google Fonts (see readme.md - SUBSTITUTION note).
+   If licensed brand binaries arrive, replace this @import with local @font-face rules
+   pointing at assets/fonts/*.woff2 and keep the family names in theme.css unchanged. */
+:root{
+  --font-display:var(--font-sans);
+  --font-ui:var(--font-sans);
+  --font-numeric:var(--font-mono);
+}

package/tokens/spacing.css

@@ -0,0 +1,50 @@
+/* 4px base grid. Section rhythm on the marketing site uses the -section tokens. */
+:root{
+  --space-0:0px;
+  --space-1:2px;
+  --space-2:4px;
+  --space-3:8px;
+  --space-4:12px;
+  --space-5:16px;
+  --space-6:20px;
+  --space-7:24px;
+  --space-8:32px;
+  --space-9:40px;
+  --space-10:48px;
+  --space-11:64px;
+  --space-12:80px;
+  --space-13:112px;
+  --space-14:160px;
+
+  --section-y:112px;
+  --section-y-tight:72px;
+  --container-max:1160px;
+  --container-prose:660px;
+  --gutter:24px;
+
+  --sidebar-w:232px;
+  --content-max:860px;
+  --content-max-narrow:680px;
+  --gutter-phone:16px;
+
+  --row-h:46px;
+  --row-h-sub:56px;
+  --row-h-dense:40px;
+  --control-h-sm:28px;
+  --control-h-md:34px;
+  --control-h-lg:44px;
+  --control-h-xl:50px;
+  --pill-h:46px;
+  --pill-h-compact:30px;
+  --timer-bar-h:56px;
+  --timer-bar-pad:72px;
+  --tab-bar-h-ios:84px;
+  --tab-bar-pad-ios:100px;
+  --nav-bar-h-android:80px;
+  --nav-bar-pad-android:96px;
+  --toggle-w:46px;
+  --toggle-h:28px;
+  --field-h:38px;
+  --seg-h:32px;
+  --icon-square:28px;
+}

package/tokens/theme.css

@@ -0,0 +1,78 @@
+/* Timebraid v2 theme. Light and dark are equals; :root is light, [data-theme="dark"] overrides. */
+:root{
+  --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
+  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
+
+  --indigo-400:#6C77DE;--indigo-500:#4A57D2;--indigo-600:#3A44AF;--indigo-700:#2C3391;
+
+  --chart-1:#0072B2;--chart-2:#E69F00;--chart-3:#009E73;--chart-4:#CC79A7;--chart-5:#56B4E9;--chart-6:#D55E00;--chart-7:#F0E442;--chart-8:#6B7085;
+
+  --bg:#F2F3F8;              /* page — system grouped background, indigo-tinted */
+  --bg-elev:#FFFFFF;          /* grouped cell background */
+  --bg-elev-2:#F7F8FC;        /* nested / pressed */
+  --bg-sidebar:rgba(244,245,250,.86);
+  --bg-bar:rgba(242,243,248,.82);
+  --fill:rgba(20,22,40,.06);  /* system fill */
+  --fill-2:rgba(20,22,40,.10);
+  --fill-3:rgba(20,22,40,.16);
+  --sep:rgba(20,22,40,.10);
+  --sep-strong:rgba(20,22,40,.18);
+
+  --label:#0E1024;
+  --label-2:#5C6178;
+  --label-3:#8B90A5;
+  --label-4:#B7BBCB;
+  --on-accent:#FFFFFF;
+
+  --accent:#4A57D2;
+  --accent-hover:#3F4BC0;
+  --accent-soft:rgba(74,87,210,.12);
+  --accent-soft-2:rgba(74,87,210,.20);
+  --running:#4A57D2;
+  --running-soft:rgba(74,87,210,.10);
+  --green:#1E9E6A;--green-soft:rgba(30,158,106,.12);
+  --red:#D6453D;--red-soft:rgba(214,69,61,.10);
+  --orange:#D97B0F;
+
+  --r-cell:12px;--r-card:14px;--r-btn:10px;--r-pill:999px;--r-sheet:20px;--r-window:12px;
+  --sh-card:0 1px 2px rgba(14,16,36,.04),0 0 0 1px rgba(14,16,36,.04);
+  --sh-float:0 12px 32px -8px rgba(14,16,36,.22),0 2px 6px rgba(14,16,36,.08),0 0 0 1px rgba(14,16,36,.05);
+  --sh-sheet:0 -8px 40px -8px rgba(14,16,36,.24);
+  --sh-thumb:0 2px 6px rgba(0,0,0,.25);--sh-seg:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);
+  --blur:saturate(180%) blur(22px);
+  --scrim:rgba(10,11,20,.42);
+  --dash:rgba(255,255,255,.7);
+
+  --ease:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-sheet:cubic-bezier(.32,.72,0,1);
+  --t-fast:140ms;--t-base:220ms;--t-sheet:420ms;
+}
+[data-theme="dark"]{
+  --bg:#15161F;
+  --bg-elev:#1F2030;
+  --bg-elev-2:#282A3C;
+  --bg-sidebar:rgba(24,25,36,.86);
+  --bg-bar:rgba(21,22,31,.78);
+  --fill:rgba(255,255,255,.07);
+  --fill-2:rgba(255,255,255,.11);
+  --fill-3:rgba(255,255,255,.17);
+  --sep:rgba(255,255,255,.09);
+  --sep-strong:rgba(255,255,255,.16);
+  --label:#F3F4FA;
+  --label-2:#A7ABC0;
+  --label-3:#7D8199;
+  --label-4:#575B70;
+  --accent:#7A84E6;
+  --accent-hover:#8C95EC;
+  --accent-soft:rgba(122,132,230,.16);
+  --accent-soft-2:rgba(122,132,230,.26);
+  --running:#8A93EC;
+  --running-soft:rgba(122,132,230,.14);
+  --green:#3CC08A;--green-soft:rgba(60,192,138,.14);
+  --red:#F06B62;--red-soft:rgba(240,107,98,.14);
+  --orange:#F0A24B;
+  --chart-8:#9A9FB4;
+  --sh-card:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04);
+  --sh-float:0 16px 40px -8px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);
+  --sh-sheet:0 -8px 40px -8px rgba(0,0,0,.6);
+  --scrim:rgba(0,0,0,.55);
+}

package/tokens/typography.css

@@ -0,0 +1,23 @@
+/* v2 type scale. UI and display share Instrument Sans; every duration is JetBrains Mono, tabular. */
+:root{
+  --text-display-1:64px;   --leading-display-1:1.02; --tracking-display-1:-.03em;
+  --text-display-2:48px;   --leading-display-2:1.06; --tracking-display-2:-.025em;
+  --text-large-title:30px; --text-large-title-phone:34px; --tracking-large-title:-.025em; --leading-large-title:1.1;
+  --text-title:17px;
+  --text-row:15px;
+  --text-subtitle:12.5px;
+  --text-section:12px;     --tracking-section:.04em;
+  --text-body:14px;
+  --text-body-lg:18px;     --leading-body-lg:1.6;
+  --text-caption:12px;
+  --text-footnote:11.5px;
+  --text-timer-xl:44px;
+  --text-timer-lg:28px;
+  --text-timer-md:22px;
+  --text-timer-sm:15px;
+
+  --weight-regular:400;
+  --weight-medium:500;
+  --weight-semibold:600;
+  --weight-bold:700;
+}

package/tokens/v1/base.css

@@ -0,0 +1,20 @@
+/* Element defaults. Consumers get sane baselines without writing any CSS. */
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body-md);line-height:var(--leading-body-md);letter-spacing:var(--tracking-body-md);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:var(--weight-semibold);text-wrap:balance}
+h1{font-size:var(--text-display-2);line-height:var(--leading-display-2);letter-spacing:var(--tracking-display-2)}
+h2{font-size:var(--text-title-1);line-height:var(--leading-title-1);letter-spacing:var(--tracking-title-1)}
+h3{font-size:var(--text-title-2);line-height:var(--leading-title-2);letter-spacing:var(--tracking-title-2)}
+h4{font-size:var(--text-title-3);line-height:var(--leading-title-3);letter-spacing:var(--tracking-title-3)}
+p{margin:0 0 var(--space-5);text-wrap:pretty;max-width:var(--container-prose)}
+a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
+a:hover{color:var(--text-link-hover)}
+a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
+small{font-size:var(--text-caption);line-height:var(--leading-caption)}
+code,kbd,samp,pre{font-family:var(--font-mono);font-size:.92em}
+hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-8) 0}
+::selection{background:rgba(245,165,36,.28);color:var(--text-strong)}
+.tally-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--numeric-features)}
+.tally-overline{font-size:var(--text-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-muted)}
+.tally-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

package/tokens/v1/colors.css

@@ -0,0 +1,150 @@
+/* Tally colour system. Base ramps first, then semantic aliases.
+   Dark is the canonical theme; :root is dark, [data-theme="light"] overrides. */
+:root{
+  /* Brand indigo — sampled from the app-icon gradient #4A57D2 -> #2C3391 -> #151A54 */
+  --indigo-100:#E4E7FA;
+  --indigo-200:#C3C8F3;
+  --indigo-300:#9AA2EA;
+  --indigo-400:#6C77DE;
+  --indigo-500:#4A57D2;
+  --indigo-600:#3A44AF;
+  --indigo-700:#2C3391;
+  --indigo-800:#1F2470;
+  --indigo-900:#151A54;
+  --indigo-950:#0E1138;
+
+  /* Accent amber — the fifth tally stroke */
+  --amber-200:#FDE3B4;
+  --amber-300:#FBCC7C;
+  --amber-400:#F8B547;
+  --amber-500:#F5A524;
+  --amber-600:#D98C10;
+  --amber-700:#A96A08;
+
+  /* Secondary blue — app UI actions */
+  --blue-300:#7FB4EE;
+  --blue-400:#3D8BDB;
+  --blue-500:#1565C0;
+  --blue-600:#0F4E97;
+  --blue-700:#0B3A70;
+
+  /* Cool neutrals */
+  --neutral-0:#FFFFFF;
+  --neutral-25:#FAFBFD;
+  --neutral-50:#F4F6FA;
+  --neutral-100:#E8EBF2;
+  --neutral-200:#D5DAE6;
+  --neutral-300:#B3BAC9;
+  --neutral-400:#8B93A5;
+  --neutral-500:#697084;
+  --neutral-600:#4C5365;
+  --neutral-650:#3C4356;
+  --neutral-700:#2B3143;
+  --neutral-800:#1D2230;
+  --neutral-850:#161A26;
+  --neutral-900:#10131C;
+  --neutral-950:#0A0C13;
+
+  /* Okabe-Ito — the only palette permitted for charts and parallel-timer tracks */
+  --chart-1:#0072B2; /* blue */
+  --chart-2:#E69F00; /* orange */
+  --chart-3:#009E73; /* bluish green */
+  --chart-4:#CC79A7; /* reddish purple */
+  --chart-5:#56B4E9; /* sky blue */
+  --chart-6:#D55E00; /* vermillion */
+  --chart-7:#F0E442; /* yellow */
+  --chart-8:#4C5566; /* neutral (replaces Okabe-Ito black on dark ground) */
+
+  /* Gradients */
+  --gradient-brand:linear-gradient(160deg,#4A57D2 0%,#2C3391 52%,#151A54 100%); /* @kind other */
+  --gradient-brand-lift:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 46%); /* @kind other */
+  --gradient-page:radial-gradient(120% 80% at 50% -10%,#1F2470 0%,#10131C 62%); /* @kind other */
+
+  /* ---- Semantic: dark (canonical) ---- */
+  --surface-page:var(--neutral-900);
+  --surface-sunken:var(--neutral-950);
+  --surface-card:var(--neutral-850);
+  --surface-raised:var(--neutral-800);
+  --surface-overlay:rgba(16,19,28,.72);
+  --surface-inset:rgba(255,255,255,.04);
+  --surface-hover:rgba(255,255,255,.06);
+  --surface-active:rgba(255,255,255,.1);
+  --surface-brand:var(--indigo-900);
+  --surface-brand-subtle:rgba(74,87,210,.16);
+  --surface-accent-subtle:rgba(245,165,36,.14);
+
+  --text-strong:var(--neutral-0);
+  --text-body:#DCE1EC;
+  --text-muted:var(--neutral-300);
+  --text-subtle:var(--neutral-400);
+  --text-inverse:var(--neutral-900);
+  --text-accent:var(--amber-400);
+  --text-link:var(--blue-300);
+  --text-link-hover:var(--amber-400);
+  --text-on-brand:var(--neutral-0);
+
+  --border-subtle:rgba(255,255,255,.08);
+  --border-default:rgba(255,255,255,.14);
+  --border-strong:rgba(255,255,255,.24);
+  --border-accent:var(--amber-500);
+  --border-focus:var(--amber-400);
+
+  --action-primary:var(--amber-500);
+  --action-primary-hover:var(--amber-400);
+  --action-primary-active:var(--amber-600);
+  --action-primary-text:#20160A;
+  --action-secondary:var(--blue-500);
+  --action-secondary-hover:var(--blue-400);
+  --action-secondary-active:var(--blue-600);
+  --action-secondary-text:var(--neutral-0);
+
+  --status-running:var(--amber-500);
+  --status-paused:var(--neutral-400);
+  --status-success:#00B383;
+  --status-warning:var(--amber-500);
+  --status-danger:#E8663A;
+  --status-info:#3D9BE0;
+  --status-success-surface:rgba(0,158,115,.16);
+  --status-warning-surface:rgba(245,165,36,.16);
+  --status-danger-surface:rgba(213,94,0,.18);
+  --status-info-surface:rgba(0,114,178,.18);
+}
+
+[data-theme="light"]{
+  --surface-page:var(--neutral-25);
+  --surface-sunken:var(--neutral-50);
+  --surface-card:var(--neutral-0);
+  --surface-raised:var(--neutral-0);
+  --surface-overlay:rgba(16,19,28,.4);
+  --surface-inset:var(--neutral-50);
+  --surface-hover:rgba(21,26,84,.05);
+  --surface-active:rgba(21,26,84,.09);
+  --surface-brand:var(--indigo-500);
+  --surface-brand-subtle:rgba(74,87,210,.08);
+  --surface-accent-subtle:rgba(245,165,36,.16);
+
+  --text-strong:var(--neutral-900);
+  --text-body:var(--neutral-800);
+  --text-muted:var(--neutral-500);
+  --text-subtle:var(--neutral-400);
+  --text-inverse:var(--neutral-0);
+  --text-accent:var(--amber-700);
+  --text-link:var(--blue-500);
+  --text-link-hover:var(--indigo-700);
+  --text-on-brand:var(--neutral-0);
+
+  --border-subtle:var(--neutral-100);
+  --border-default:var(--neutral-200);
+  --border-strong:var(--neutral-300);
+
+  --action-primary:var(--amber-500);
+  --action-primary-hover:var(--amber-400);
+  --action-primary-active:var(--amber-600);
+  --action-primary-text:#20160A;
+
+  --status-success:#007A5A;
+  --status-warning:var(--amber-700);
+  --status-danger:#C24A12;
+  --status-info:var(--blue-500);
+  --chart-8:#000000;
+}

package/tokens/v1/elevation.css

@@ -0,0 +1,27 @@
+/* Radii, shadows, blur. Shadows are near-black and low-spread; nothing floats far. */
+:root{
+  --radius-xs:4px;
+  --radius-sm:6px;
+  --radius-md:9px;
+  --radius-lg:12px;
+  --radius-xl:16px;
+  --radius-2xl:22px;
+  --radius-pill:999px;
+  --radius-icon-ratio:22%; /* app-icon squircle: radius = 22% of side */
+
+  --shadow-none:none;
+  --shadow-xs:0 1px 2px rgba(6,8,16,.32);
+  --shadow-sm:0 1px 3px rgba(6,8,16,.36),0 1px 1px rgba(6,8,16,.24);
+  --shadow-md:0 6px 16px -4px rgba(6,8,16,.44),0 2px 4px rgba(6,8,16,.28);
+  --shadow-lg:0 18px 40px -12px rgba(6,8,16,.55),0 4px 10px rgba(6,8,16,.3);
+  --shadow-pill:0 10px 30px -8px rgba(6,8,16,.6),0 0 0 1px rgba(255,255,255,.08) inset;
+  --shadow-focus:0 0 0 3px rgba(245,165,36,.34);
+  --shadow-inset-hairline:inset 0 1px 0 rgba(255,255,255,.06);
+  --glow-amber:0 0 0 1px rgba(245,165,36,.5),0 0 24px -6px rgba(245,165,36,.45);
+
+  --blur-panel:saturate(140%) blur(20px); /* @kind other */
+  --blur-scrim:blur(6px); /* @kind other */
+
+  /* Protection gradient for text over imagery / gradient */
+  --scrim-bottom:linear-gradient(180deg,rgba(10,12,19,0) 0%,rgba(10,12,19,.82) 100%); /* @kind other */
+}

package/tokens/v1/fonts.css

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;700&display=swap');
+
+/* Tally webfonts are served from Google Fonts (see readme.md — SUBSTITUTION note).
+   If licensed brand binaries arrive, replace this @import with local @font-face rules
+   pointing at assets/fonts/*.woff2 and keep the family names below unchanged. */
+:root{
+  --font-sans:"Instrument Sans","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif;
+  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+  --font-display:var(--font-sans);
+  --font-ui:var(--font-sans);
+  --font-numeric:var(--font-mono);
+}

package/tokens/v1/motion.css

@@ -0,0 +1,25 @@
+/* Motion. Short, damped, never bouncy. Time is the subject; nothing should feel slow. */
+:root{
+  --duration-instant:80ms; /* @kind other */
+  --duration-fast:140ms; /* @kind other */
+  --duration-base:200ms; /* @kind other */
+  --duration-slow:320ms; /* @kind other */
+  --duration-enter:420ms; /* @kind other */
+
+  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
+  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
+  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
+  --ease-tick:steps(1,end); /* @kind other */ /* second-by-second timer digits never tween */
+
+  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
+  --press-scale:.985; /* @kind other */
+}
+@media (prefers-reduced-motion:reduce){
+  :root{
+    --duration-fast:0ms; /* @kind other */
+    --duration-base:0ms; /* @kind other */
+    --duration-slow:0ms; /* @kind other */
+    --duration-enter:0ms; /* @kind other */
+    --press-scale:1; /* @kind other */
+  }
+}

package/tokens/v1/spacing.css

@@ -0,0 +1,30 @@
+/* 4px base grid. Section rhythm on the marketing site uses the -section tokens. */
+:root{
+  --space-0:0px;
+  --space-1:2px;
+  --space-2:4px;
+  --space-3:8px;
+  --space-4:12px;
+  --space-5:16px;
+  --space-6:20px;
+  --space-7:24px;
+  --space-8:32px;
+  --space-9:40px;
+  --space-10:48px;
+  --space-11:64px;
+  --space-12:80px;
+  --space-13:112px;
+  --space-14:160px;
+
+  --section-y:112px;
+  --section-y-tight:72px;
+  --container-max:1160px;
+  --container-prose:660px;
+  --gutter:24px;
+
+  --control-h-sm:26px;
+  --control-h-md:32px;
+  --control-h-lg:40px;
+  --control-h-xl:48px;
+  --row-h:38px;
+}

package/tokens/v1/typography.css

@@ -0,0 +1,25 @@
+/* Type scale. Display and UI share one family; numerals are always mono + tabular. */
+:root{
+  --text-display-1:64px;   --leading-display-1:1.02; --tracking-display-1:-.03em;
+  --text-display-2:48px;   --leading-display-2:1.06; --tracking-display-2:-.025em;
+  --text-title-1:34px;     --leading-title-1:1.14;   --tracking-title-1:-.02em;
+  --text-title-2:26px;     --leading-title-2:1.2;    --tracking-title-2:-.015em;
+  --text-title-3:20px;     --leading-title-3:1.3;    --tracking-title-3:-.01em;
+  --text-body-lg:18px;     --leading-body-lg:1.6;    --tracking-body-lg:-.005em;
+  --text-body-md:16px;     --leading-body-md:1.6;    --tracking-body-md:0em;
+  --text-body-sm:14px;     --leading-body-sm:1.55;   --tracking-body-sm:0em;
+  --text-caption:12px;     --leading-caption:1.4;    --tracking-caption:.005em;
+  --text-overline:11px;    --leading-overline:1.2;   --tracking-overline:.12em;
+
+  --weight-regular:400;
+  --weight-medium:500;
+  --weight-semibold:600;
+  --weight-bold:700;
+
+  /* Timer / duration readouts */
+  --text-timer-xl:44px;
+  --text-timer-lg:28px;
+  --text-timer-md:18px;
+  --text-timer-sm:13px;
+  --numeric-features:"tnum" 1,"cv01" 1; /* @kind other */
+}