@outs-tand-ing/ui 0.5.7 → 0.6.0

package/dist/index.js

@@ -29,7 +29,7 @@ function C(e, t, n, r, a, o) {
 		"text-5xl": n.size === "lg"
 	}]) }, "OUTSTANDING", 2);
 }
-var w = /*#__PURE__*/ S(x, [["render", C], ["__file", "/Users/kemal/Developer/outstanding/main/outs/ui/src/components/BrandLogo.vue"]]), T = {
+var w = /*#__PURE__*/ S(x, [["render", C], ["__file", "/Users/kemal/Developer/outstanding/ws/design-tokens/outs/ui/src/components/BrandLogo.vue"]]), T = {
 	squircle: {
 		width: 100,
 		height: 100,
@@ -269,7 +269,7 @@ function L(t, n, o, s, l, f) {
 var R = /*#__PURE__*/ S(O, [
 	["render", L],
 	["__scopeId", "data-v-00a84a8e"],
-	["__file", "/Users/kemal/Developer/outstanding/main/outs/ui/src/components/SVGShape.vue"]
+	["__file", "/Users/kemal/Developer/outstanding/ws/design-tokens/outs/ui/src/components/SVGShape.vue"]
 ]), z = /*@__PURE__*/ s({
 	__name: "AccessWrapper",
 	props: {
@@ -325,7 +325,7 @@ function K(e, t, s, c, l, u) {
 		}, null, -1), a("div", G, [_(e.$slots, "footer")])], 512)
 	]);
 }
-var q = /*#__PURE__*/ S(z, [["render", K], ["__file", "/Users/kemal/Developer/outstanding/main/outs/ui/src/components/AccessWrapper.vue"]]), J = /*@__PURE__*/ s({
+var q = /*#__PURE__*/ S(z, [["render", K], ["__file", "/Users/kemal/Developer/outstanding/ws/design-tokens/outs/ui/src/components/AccessWrapper.vue"]]), J = /*@__PURE__*/ s({
 	__name: "ScrollableArea",
 	props: {
 		axis: {
@@ -407,7 +407,7 @@ function Y(e, t, n, o, s, c) {
 		}, null, 6))
 	], 2);
 }
-var X = /*#__PURE__*/ S(J, [["render", Y], ["__file", "/Users/kemal/Developer/outstanding/main/outs/ui/src/components/ScrollableArea.vue"]]);
+var X = /*#__PURE__*/ S(J, [["render", Y], ["__file", "/Users/kemal/Developer/outstanding/ws/design-tokens/outs/ui/src/components/ScrollableArea.vue"]]);
 //#endregion
 //#region src/utils/svg-parse.ts
 function Z(e) {

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,169 @@
+/** A 4pt scale. Native names spell the numeric prefixes out (`3xs` → `xxxs`) to stay valid identifiers. */
+export declare const space: {
+    readonly '3xs': 2;
+    readonly '2xs': 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly '2xl': 48;
+    readonly '3xl': 64;
+};
+export declare const radius: {
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 16;
+    readonly sheet: 28;
+};
+export declare const motion: {
+    readonly duration: {
+        readonly fast: 150;
+        readonly base: 250;
+        readonly slow: 400;
+    };
+    /** M3's standard easing; reduced motion swaps every transition for an instant or opacity-only change. */
+    readonly easing: readonly [0.2, 0, 0, 1];
+};
+/** `Livvic-SemiBold.ttf` → `livvic_semibold`: an Android resource name is lowercase, digits and underscores. */
+export declare const androidFont: (file: string) => string;
+/** Livvic ships as static weights (no variable file, no 800), one file per weight the roles use. */
+export declare const typeface: {
+    readonly family: "Livvic";
+    readonly dir: "livvic";
+    readonly files: {
+        readonly 400: "Livvic-Regular.ttf";
+        readonly 500: "Livvic-Medium.ttf";
+        readonly 600: "Livvic-SemiBold.ttf";
+        readonly 700: "Livvic-Bold.ttf";
+        readonly 900: "Livvic-Black.ttf";
+    };
+};
+export type IosTextStyle = 'largeTitle' | 'title' | 'title2' | 'title3' | 'headline' | 'body' | 'callout' | 'subheadline' | 'footnote' | 'caption' | 'caption2';
+export type M3Slot = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
+export interface TypeRole {
+    /** pt / sp / px at the default text size; native scales it through `ios` and `m3`. */
+    size: number;
+    weight: number;
+    /** A multiple of size. */
+    lineHeight: number;
+    /** em. */
+    tracking: number;
+    tabular?: boolean;
+    /** Web only: the responsive step `typography.css` already used, where the role had one. */
+    clamp?: string;
+    ios: IosTextStyle;
+    m3: M3Slot;
+}
+export declare const typeRoles: {
+    readonly display: {
+        readonly size: 40;
+        readonly weight: 900;
+        readonly lineHeight: 1.1;
+        readonly tracking: -0.02;
+        readonly clamp: "clamp(2rem, 5vw, 3.5rem)";
+        readonly ios: "largeTitle";
+        readonly m3: "displaySmall";
+    };
+    readonly title: {
+        readonly size: 28;
+        readonly weight: 700;
+        readonly lineHeight: 1.15;
+        readonly tracking: -0.01;
+        readonly clamp: "clamp(1.5rem, 3.5vw, 2.25rem)";
+        readonly ios: "title";
+        readonly m3: "headlineMedium";
+    };
+    readonly headline: {
+        readonly size: 20;
+        readonly weight: 600;
+        readonly lineHeight: 1.25;
+        readonly tracking: 0;
+        readonly clamp: "clamp(1.25rem, 2.5vw, 1.75rem)";
+        readonly ios: "title3";
+        readonly m3: "titleLarge";
+    };
+    readonly body: {
+        readonly size: 16;
+        readonly weight: 400;
+        readonly lineHeight: 1.5;
+        readonly tracking: 0;
+        readonly ios: "body";
+        readonly m3: "bodyLarge";
+    };
+    readonly label: {
+        readonly size: 14;
+        readonly weight: 500;
+        readonly lineHeight: 1.3;
+        readonly tracking: 0.01;
+        readonly ios: "subheadline";
+        readonly m3: "labelLarge";
+    };
+    readonly caption: {
+        readonly size: 12;
+        readonly weight: 400;
+        readonly lineHeight: 1.35;
+        readonly tracking: 0.01;
+        readonly ios: "caption";
+        readonly m3: "bodySmall";
+    };
+    readonly numeral: {
+        readonly size: 16;
+        readonly weight: 500;
+        readonly lineHeight: 1.3;
+        readonly tracking: 0;
+        readonly tabular: true;
+        readonly ios: "body";
+        readonly m3: "titleMedium";
+    };
+};
+export type SeasonVar = '--color-season' | '--color-season-text' | '--color-accent' | '--color-surface' | '--color-border';
+export type Mode = 'light' | 'dark';
+/**
+ * Two tones, one set of names. `season` is the season's own colour at full strength, for the
+ * season track (season, round, question). `neutral` is the platform's own light/dark greys
+ * carrying a faint wash of the season's accent, for every page outside it.
+ */
+export declare const semantic: {
+    readonly season: {
+        readonly surface: "--color-season";
+        readonly surfaceRaised: "--color-surface";
+        readonly separator: "--color-border";
+        readonly textPrimary: "--color-season-text";
+        readonly accent: "--color-accent";
+    };
+    readonly neutral: {
+        readonly base: {
+            readonly light: {
+                readonly surface: "#f2f2f7";
+                readonly surfaceRaised: "#ffffff";
+                readonly separator: "#d1d1d6";
+                readonly textPrimary: "#111111";
+            };
+            readonly dark: {
+                readonly surface: "#000000";
+                readonly surfaceRaised: "#1c1c1e";
+                readonly separator: "#38383a";
+                readonly textPrimary: "#f2f2f2";
+            };
+        };
+        /** Share of the season accent mixed into each neutral base. */
+        readonly tint: {
+            readonly surface: 0.04;
+            readonly surfaceRaised: 0.03;
+            readonly separator: 0.08;
+            readonly textPrimary: 0;
+        };
+    };
+    /** text-secondary is text-primary mixed into the surface: this share at the faintest, more where a season needs it to clear 4.5:1. */
+    readonly textSecondaryShare: 0.7;
+    /** Not a season colour: red-700 / red-400, the reds that clear 4.5:1 on every season surface. */
+    readonly danger: {
+        readonly light: "#b91c1c";
+        readonly dark: "#f87171";
+    };
+};
+export declare const semanticRoles: readonly ["textPrimary", "textSecondary", "surface", "surfaceRaised", "separator", "accent", "danger", "onAccent"];
+export type SemanticRole = (typeof semanticRoles)[number];
+export type Tone = 'season' | 'neutral';
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens/tokens.ts"],"names":[],"mappings":"AAIA,2GAA2G;AAC3G,eAAO,MAAM,KAAK;;;;;;;;;;CAA+F,CAAA;AAEjH,eAAO,MAAM,MAAM;;;;;CAA+C,CAAA;AAElE,eAAO,MAAM,MAAM;;;;;;IAEjB,yGAAyG;;CAEjG,CAAA;AAEV,gHAAgH;AAChH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,WAAgE,CAAA;AAExG,oGAAoG;AACpG,eAAO,MAAM,QAAQ;;;;;;;;;;CAIX,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAA;AAC/J,MAAM,MAAM,MAAM,GAAG,cAAc,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,GAAG,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,CAAA;AAEpQ,MAAM,WAAW,QAAQ;IACvB,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,0BAA0B;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,YAAY,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQuB,CAAA;AAG7C,MAAM,MAAM,SAAS,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1H,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAA;AAEnC;;;;GAIG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;QAajB,+DAA+D;;;;;;;;IAGjE,sIAAsI;;IAEtI,iGAAiG;;;;;CAOlG,CAAA;AAED,eAAO,MAAM,aAAa,oHAAqH,CAAA;AAC/I,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACzD,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outs-tand-ing/ui",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "description": "Shared Vue components, icons, and design tokens for the outstanding platform",
   "type": "module",
   "sideEffects": [
@@ -15,6 +15,7 @@
     },
     "./style.css": "./dist/ui.css",
     "./typography.css": "./src/assets/typography.css",
+    "./tokens.css": "./src/tokens/generated/tokens.css",
     "./components.css": "./src/assets/components.css",
     "./seasons/24": {
       "types": "./dist/seasons/season24/index.d.ts",
@@ -40,7 +41,10 @@
     "./seasons/25.css": "./src/seasons/season25/style.css",
     "./seasons/26.css": "./src/seasons/season26/style.css",
     "./seasons/wc26.css": "./src/seasons/fifawc26/style.css",
-    "./seasons/27.css": "./src/seasons/season27/style.css"
+    "./seasons/27.css": "./src/seasons/season27/style.css",
+    "./seasons/-1.css": "./src/seasons/seasonminus1/style.css",
+    "./seasons/0.css": "./src/seasons/season0/style.css",
+    "./seasons/1.css": "./src/seasons/season1/style.css"
   },
   "files": [
     "dist",
@@ -62,7 +66,8 @@
     "generate:ios:icon": "bun scripts/generate-ios-icon.ts",
     "generate:android:wordmark": "bun scripts/generate-android-wordmark.ts",
     "generate:ios:wordmark": "bun scripts/generate-ios-wordmark.ts",
-    "generate:favicon": "bun scripts/generate-favicon.ts"
+    "generate:favicon": "bun scripts/generate-favicon.ts",
+    "generate:tokens": "bun scripts/generate-tokens.ts"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/assets/fonts/livvic/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2019 The Livvic Project Authors (https://github.com/Fonthausen/Livvic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/assets/typography.css

@@ -1,10 +1,12 @@
-@font-face {
-  font-family: 'Posterama';
-  src: url('./fonts/Posterama_1984_W04_Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
+/* The type roles for web. Sizes, weights and line heights are the tokens (tokens.css, generated from
+   src/tokens/tokens.ts), so this file only says which element takes which role. Import tokens.css
+   first. Posterama is the logo's alone and ships here no longer. */
+
+@font-face { font-family: 'Livvic'; src: url('./fonts/livvic/Livvic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Livvic'; src: url('./fonts/livvic/Livvic-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Livvic'; src: url('./fonts/livvic/Livvic-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Livvic'; src: url('./fonts/livvic/Livvic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+@font-face { font-family: 'Livvic'; src: url('./fonts/livvic/Livvic-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
 
 @utility text-trim {
   text-box-trim: trim-both;
@@ -21,30 +23,39 @@
   text-box-edge: cap alphabetic;
 }
 
+@utility type-display { font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-line-height); letter-spacing: var(--type-display-tracking); }
+@utility type-title { font-size: var(--type-title-size); font-weight: var(--type-title-weight); line-height: var(--type-title-line-height); letter-spacing: var(--type-title-tracking); }
+@utility type-headline { font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); line-height: var(--type-headline-line-height); letter-spacing: var(--type-headline-tracking); }
+@utility type-body { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-line-height); letter-spacing: var(--type-body-tracking); }
+@utility type-label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-line-height); letter-spacing: var(--type-label-tracking); }
+@utility type-caption { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-line-height); letter-spacing: var(--type-caption-tracking); }
+@utility type-numeral { font-size: var(--type-numeral-size); font-weight: var(--type-numeral-weight); line-height: var(--type-numeral-line-height); letter-spacing: var(--type-numeral-tracking); font-variant-numeric: tabular-nums; }
+
 @layer base {
+  body {
+    @apply type-body;
+    font-family: var(--font-family-base);
+    color: var(--ui-text-primary);
+  }
+
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    font-family: var(--font-heading);
-    color: var(--color-text-primary);
-    font-weight: 900;
-    line-height: 1.1;
-    letter-spacing: -0.02em;
-    transition: color 200ms ease, font-family 200ms ease;
+    color: var(--ui-text-primary);
+    transition: color var(--motion-base) var(--ease-standard);
   }
 
-  h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
-
-  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
+  h1 { @apply type-display; }
 
-  h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: -0.01em; }
+  h2 { @apply type-title; }
 
-  h4 { font-size: 1.25rem; letter-spacing: 0; font-weight: 700; }
+  h3,
+  h4 { @apply type-headline; }
 
-  h5 { font-size: 1rem; letter-spacing: 0; font-weight: 700; }
+  h5 { @apply type-label; }
 
-  h6 { font-size: 0.875rem; letter-spacing: 0; font-weight: 600; color: var(--color-text-secondary); }
+  h6 { @apply type-caption; color: var(--ui-text-secondary); }
 }

package/src/tokens/generated/Tokens.kt

@@ -0,0 +1,136 @@
+// AUTO-GENERATED — do not edit manually
+// Run: bun run generate:tokens (from ui/)
+// Source: ui/src/tokens/tokens.ts and each ui/src/seasons/<season>/style.css
+package outs.tand.ing.ui.theme
+
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+import outs.tand.ing.R
+
+object Space {
+    val xxxs = 2.dp
+    val xxs = 4.dp
+    val xs = 8.dp
+    val sm = 12.dp
+    val md = 16.dp
+    val lg = 24.dp
+    val xl = 32.dp
+    val xxl = 48.dp
+    val xxxl = 64.dp
+}
+
+object Radius {
+    val sm = 4.dp
+    val md = 8.dp
+    val lg = 16.dp
+    val sheet = 28.dp
+}
+
+object Motion {
+    const val FAST_MS = 150
+    const val BASE_MS = 250
+    const val SLOW_MS = 400
+    val standardEasing = CubicBezierEasing(0.2f, 0f, 0f, 1f)
+
+    /** Reduced motion (the system's "Remove animations") collapses every transition to an instant change. */
+    fun duration(ms: Int, reduceMotion: Boolean): Int = if (reduceMotion) 0 else ms
+}
+
+/** Livvic, one static file per weight the type roles use. */
+val Livvic = FontFamily(
+    Font(R.font.livvic_regular, FontWeight(400)),
+    Font(R.font.livvic_medium, FontWeight(500)),
+    Font(R.font.livvic_semibold, FontWeight(600)),
+    Font(R.font.livvic_bold, FontWeight(700)),
+    Font(R.font.livvic_black, FontWeight(900)),
+)
+
+object TypeRole {
+    val display = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(900), fontSize = 40.sp, lineHeight = 44.sp, letterSpacing = (-0.02).em)
+    val title = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(700), fontSize = 28.sp, lineHeight = 32.2.sp, letterSpacing = (-0.01).em)
+    val headline = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(600), fontSize = 20.sp, lineHeight = 25.sp, letterSpacing = (0).em)
+    val body = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(400), fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = (0).em)
+    val label = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(500), fontSize = 14.sp, lineHeight = 18.2.sp, letterSpacing = (0.01).em)
+    val caption = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(400), fontSize = 12.sp, lineHeight = 16.2.sp, letterSpacing = (0.01).em)
+    val numeral = TextStyle(fontFamily = Livvic, fontWeight = FontWeight(500), fontSize = 16.sp, lineHeight = 20.8.sp, letterSpacing = (0).em, fontFeatureSettings = "tnum")
+}
+
+/** The M3 type scale on the roles. A slot no role claims keeps M3's metrics in Livvic. */
+val OutsTypography: Typography = Typography().let { base ->
+    Typography(
+        displayLarge = base.displayLarge.copy(fontFamily = Livvic),
+        displayMedium = base.displayMedium.copy(fontFamily = Livvic),
+        displaySmall = TypeRole.display,
+        headlineLarge = base.headlineLarge.copy(fontFamily = Livvic),
+        headlineMedium = TypeRole.title,
+        headlineSmall = base.headlineSmall.copy(fontFamily = Livvic),
+        titleLarge = TypeRole.headline,
+        titleMedium = TypeRole.numeral,
+        titleSmall = base.titleSmall.copy(fontFamily = Livvic),
+        bodyLarge = TypeRole.body,
+        bodyMedium = base.bodyMedium.copy(fontFamily = Livvic),
+        bodySmall = TypeRole.caption,
+        labelLarge = TypeRole.label,
+        labelMedium = base.labelMedium.copy(fontFamily = Livvic),
+        labelSmall = base.labelSmall.copy(fontFamily = Livvic),
+    )
+}
+
+enum class Tone { SEASON, NEUTRAL }
+
+@Immutable
+data class SemanticColor(
+    val textPrimary: Color,
+    val textSecondary: Color,
+    val surface: Color,
+    val surfaceRaised: Color,
+    val separator: Color,
+    val accent: Color,
+    val danger: Color,
+    val onAccent: Color,
+)
+
+fun semanticColorFor(shortName: String, tone: Tone, isDark: Boolean = false): SemanticColor = when (Triple(shortName, tone, isDark)) {
+    Triple("24", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF5B21B6), textSecondary = Color(0xFF7E51C4), surface = Color(0xFFEDEAEF), surfaceRaised = Color(0xFFF9F5FF), separator = Color(0xFFDDD0F5), accent = Color(0xFF7C3AED), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("24", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFD0CCD6), textSecondary = Color(0xFF9B97A1), surface = Color(0xFF1E1A24), surfaceRaised = Color(0xFF130A24), separator = Color(0xFF2E1A52), accent = Color(0xFFA78BFA), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("24", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF535256), surface = Color(0xFFEDEBF7), surfaceRaised = Color(0xFFFBF9FE), separator = Color(0xFFCAC5D8), accent = Color(0xFF7C3AED), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("24", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFABABAC), surface = Color(0xFF07060A), surfaceRaised = Color(0xFF201F25), separator = Color(0xFF413F49), accent = Color(0xFFA78BFA), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("25", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF9A3412), textSecondary = Color(0xFFA85134), surface = Color(0xFFF0EAE7), surfaceRaised = Color(0xFFFFF8F5), separator = Color(0xFFF5D5C8), accent = Color(0xFFEC8266), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("25", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFD4CDC8), textSecondary = Color(0xFF9F9894), surface = Color(0xFF231C19), surfaceRaised = Color(0xFF1A0F0A), separator = Color(0xFF3D2318), accent = Color(0xFFF0A08A), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("25", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF555354), surface = Color(0xFFF2EEF1), surfaceRaised = Color(0xFFFEFBFA), separator = Color(0xFFD3CBCD), accent = Color(0xFFEC8266), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("25", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFACABAB), surface = Color(0xFF0A0606), surfaceRaised = Color(0xFF222021), separator = Color(0xFF474040), accent = Color(0xFFF0A08A), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("26", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF152038), textSecondary = Color(0xFF545C6E), surface = Color(0xFFE7E9EC), surfaceRaised = Color(0xFFF5F7FA), separator = Color(0xFFC8CEDA), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("26", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFCACDD4), textSecondary = Color(0xFF94979F), surface = Color(0xFF171A22), surfaceRaised = Color(0xFF0A0E18), separator = Color(0xFF1E2D48), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("26", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF525254), surface = Color(0xFFE9EAEF), surfaceRaised = Color(0xFFF8F8F9), separator = Color(0xFFC2C3C9), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("26", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFABABAC), surface = Color(0xFF040608), surfaceRaised = Color(0xFF1E1F23), separator = Color(0xFF3C3F46), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("wc26", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF152038), textSecondary = Color(0xFF545C6E), surface = Color(0xFFE7E9EC), surfaceRaised = Color(0xFFF5F7FA), separator = Color(0xFFC8CEDA), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("wc26", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFCACDD4), textSecondary = Color(0xFF94979F), surface = Color(0xFF171A22), surfaceRaised = Color(0xFF0A0E18), separator = Color(0xFF1E2D48), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("wc26", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF525254), surface = Color(0xFFE9EAEF), surfaceRaised = Color(0xFFF8F8F9), separator = Color(0xFFC2C3C9), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("wc26", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFABABAC), surface = Color(0xFF040608), surfaceRaised = Color(0xFF1E1F23), separator = Color(0xFF3C3F46), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("27", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF422006), textSecondary = Color(0xFF785E47), surface = Color(0xFFF5F0E0), surfaceRaised = Color(0xFFFEFCE8), separator = Color(0xFFE2D6A4), accent = Color(0xFFCA8A04), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("27", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFFDE047), textSecondary = Color(0xFFB6A136), surface = Color(0xFF0F0F0F), surfaceRaised = Color(0xFF1C1917), separator = Color(0xFF44403C), accent = Color(0xFFFACC15), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("27", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF545353), surface = Color(0xFFF0EEED), surfaceRaised = Color(0xFFFDFBF7), separator = Color(0xFFD0CBC5), accent = Color(0xFFCA8A04), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("27", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFACACAA), surface = Color(0xFF0A0801), surfaceRaised = Color(0xFF23211E), separator = Color(0xFF484437), accent = Color(0xFFFACC15), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("-1", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF152038), textSecondary = Color(0xFF545C6E), surface = Color(0xFFE7E9EC), surfaceRaised = Color(0xFFF5F7FA), separator = Color(0xFFC8CEDA), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("-1", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFCACDD4), textSecondary = Color(0xFF94979F), surface = Color(0xFF171A22), surfaceRaised = Color(0xFF0A0E18), separator = Color(0xFF1E2D48), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("-1", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF525254), surface = Color(0xFFE9EAEF), surfaceRaised = Color(0xFFF8F8F9), separator = Color(0xFFC2C3C9), accent = Color(0xFF152038), danger = Color(0xFFB91C1C), onAccent = Color(0xFFFFFFFF))
+    Triple("-1", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFABABAC), surface = Color(0xFF040608), surfaceRaised = Color(0xFF1E1F23), separator = Color(0xFF3C3F46), accent = Color(0xFF6B8FD4), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("0", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF422006), textSecondary = Color(0xFF785E47), surface = Color(0xFFF5F0E0), surfaceRaised = Color(0xFFFEFCE8), separator = Color(0xFFE2D6A4), accent = Color(0xFFCA8A04), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("0", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFFFDE047), textSecondary = Color(0xFFB6A136), surface = Color(0xFF0F0F0F), surfaceRaised = Color(0xFF1C1917), separator = Color(0xFF44403C), accent = Color(0xFFFACC15), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("0", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF545353), surface = Color(0xFFF0EEED), surfaceRaised = Color(0xFFFDFBF7), separator = Color(0xFFD0CBC5), accent = Color(0xFFCA8A04), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("0", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFACACAA), surface = Color(0xFF0A0801), surfaceRaised = Color(0xFF23211E), separator = Color(0xFF484437), accent = Color(0xFFFACC15), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("1", Tone.SEASON, false) -> SemanticColor(textPrimary = Color(0xFF06423E), textSecondary = Color(0xFF437371), surface = Color(0xFFE0F0F5), surfaceRaised = Color(0xFFE8F5FE), separator = Color(0xFFA4CFE2), accent = Color(0xFF04A7CA), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("1", Tone.SEASON, true) -> SemanticColor(textPrimary = Color(0xFF47BFFD), textSecondary = Color(0xFF378EBA), surface = Color(0xFF0F0F0F), surfaceRaised = Color(0xFF171C1C), separator = Color(0xFF3C4444), accent = Color(0xFF15B5FA), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    Triple("1", Tone.NEUTRAL, false) -> SemanticColor(textPrimary = Color(0xFF111111), textSecondary = Color(0xFF525455), surface = Color(0xFFE8EFF5), surfaceRaised = Color(0xFFF7FCFD), separator = Color(0xFFC1CED5), accent = Color(0xFF04A7CA), danger = Color(0xFFB91C1C), onAccent = Color(0xFF000000))
+    Triple("1", Tone.NEUTRAL, true) -> SemanticColor(textPrimary = Color(0xFFF2F2F2), textSecondary = Color(0xFFAAABAC), surface = Color(0xFF01070A), surfaceRaised = Color(0xFF1C2125), separator = Color(0xFF354249), accent = Color(0xFF15B5FA), danger = Color(0xFFF87171), onAccent = Color(0xFF000000))
+    else -> semanticColorFor("0", tone, isDark)
+}

package/src/tokens/generated/Tokens.swift

@@ -0,0 +1,120 @@
+// AUTO-GENERATED — do not edit manually
+// Run: bun run generate:tokens (from ui/)
+// Source: ui/src/tokens/tokens.ts and each ui/src/seasons/<season>/style.css
+import SwiftUI
+
+enum Space {
+    static let xxxs: CGFloat = 2
+    static let xxs: CGFloat = 4
+    static let xs: CGFloat = 8
+    static let sm: CGFloat = 12
+    static let md: CGFloat = 16
+    static let lg: CGFloat = 24
+    static let xl: CGFloat = 32
+    static let xxl: CGFloat = 48
+    static let xxxl: CGFloat = 64
+}
+
+enum Radius {
+    static let sm: CGFloat = 4
+    static let md: CGFloat = 8
+    static let lg: CGFloat = 16
+    static let sheet: CGFloat = 28
+}
+
+enum Motion {
+    static let fast: Double = 0.15
+    static let base: Double = 0.25
+    static let slow: Double = 0.4
+
+    /// The one standard easing. Reduced motion gets no animation at all: the change lands instantly.
+    static func animation(_ duration: Double, reduceMotion: Bool) -> Animation? {
+        reduceMotion ? nil : .timingCurve(0.2, 0, 0, 1, duration: duration)
+    }
+}
+
+/// A type role: one Livvic face at a fixed size that scales with its Dynamic Type text style.
+struct TypeRole: Sendable {
+    /// The face's PostScript name. A static family is picked by face, not by `.weight()` on the family.
+    var face: String
+    var size: CGFloat
+    var lineHeight: CGFloat
+    var tracking: CGFloat
+    var textStyle: Font.TextStyle
+    var tabular: Bool
+
+    var font: Font {
+        let font = Font.custom(face, size: size, relativeTo: textStyle)
+        return tabular ? font.monospacedDigit() : font
+    }
+
+    static let display = TypeRole(face: "Livvic-Black", size: 40, lineHeight: 1.1, tracking: -0.02, textStyle: .largeTitle, tabular: false)
+    static let title = TypeRole(face: "Livvic-Bold", size: 28, lineHeight: 1.15, tracking: -0.01, textStyle: .title, tabular: false)
+    static let headline = TypeRole(face: "Livvic-SemiBold", size: 20, lineHeight: 1.25, tracking: 0, textStyle: .title3, tabular: false)
+    static let body = TypeRole(face: "Livvic-Regular", size: 16, lineHeight: 1.5, tracking: 0, textStyle: .body, tabular: false)
+    static let label = TypeRole(face: "Livvic-Medium", size: 14, lineHeight: 1.3, tracking: 0.01, textStyle: .subheadline, tabular: false)
+    static let caption = TypeRole(face: "Livvic-Regular", size: 12, lineHeight: 1.35, tracking: 0.01, textStyle: .caption, tabular: false)
+    static let numeral = TypeRole(face: "Livvic-Medium", size: 16, lineHeight: 1.3, tracking: 0, textStyle: .body, tabular: true)
+}
+
+extension View {
+    func typeRole(_ role: TypeRole) -> some View {
+        font(role.font)
+            .tracking(role.size * role.tracking)
+            .lineSpacing(role.size * (role.lineHeight - 1))
+    }
+}
+
+nonisolated enum Tone: Sendable {
+    case season
+    case neutral
+}
+
+struct SemanticColor: Sendable {
+    var textPrimary: Color
+    var textSecondary: Color
+    var surface: Color
+    var surfaceRaised: Color
+    var separator: Color
+    var accent: Color
+    var danger: Color
+    var onAccent: Color
+}
+
+func semanticColorFor(_ shortName: String, tone: Tone, isDark: Bool = false) -> SemanticColor {
+    switch (shortName, tone, isDark) {
+    case ("24", .season, false): return SemanticColor(textPrimary: Color(hex: 0x5B21B6), textSecondary: Color(hex: 0x7E51C4), surface: Color(hex: 0xEDEAEF), surfaceRaised: Color(hex: 0xF9F5FF), separator: Color(hex: 0xDDD0F5), accent: Color(hex: 0x7C3AED), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("24", .season, true): return SemanticColor(textPrimary: Color(hex: 0xD0CCD6), textSecondary: Color(hex: 0x9B97A1), surface: Color(hex: 0x1E1A24), surfaceRaised: Color(hex: 0x130A24), separator: Color(hex: 0x2E1A52), accent: Color(hex: 0xA78BFA), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("24", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x535256), surface: Color(hex: 0xEDEBF7), surfaceRaised: Color(hex: 0xFBF9FE), separator: Color(hex: 0xCAC5D8), accent: Color(hex: 0x7C3AED), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("24", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xABABAC), surface: Color(hex: 0x07060A), surfaceRaised: Color(hex: 0x201F25), separator: Color(hex: 0x413F49), accent: Color(hex: 0xA78BFA), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("25", .season, false): return SemanticColor(textPrimary: Color(hex: 0x9A3412), textSecondary: Color(hex: 0xA85134), surface: Color(hex: 0xF0EAE7), surfaceRaised: Color(hex: 0xFFF8F5), separator: Color(hex: 0xF5D5C8), accent: Color(hex: 0xEC8266), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("25", .season, true): return SemanticColor(textPrimary: Color(hex: 0xD4CDC8), textSecondary: Color(hex: 0x9F9894), surface: Color(hex: 0x231C19), surfaceRaised: Color(hex: 0x1A0F0A), separator: Color(hex: 0x3D2318), accent: Color(hex: 0xF0A08A), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("25", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x555354), surface: Color(hex: 0xF2EEF1), surfaceRaised: Color(hex: 0xFEFBFA), separator: Color(hex: 0xD3CBCD), accent: Color(hex: 0xEC8266), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("25", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xACABAB), surface: Color(hex: 0x0A0606), surfaceRaised: Color(hex: 0x222021), separator: Color(hex: 0x474040), accent: Color(hex: 0xF0A08A), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("26", .season, false): return SemanticColor(textPrimary: Color(hex: 0x152038), textSecondary: Color(hex: 0x545C6E), surface: Color(hex: 0xE7E9EC), surfaceRaised: Color(hex: 0xF5F7FA), separator: Color(hex: 0xC8CEDA), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("26", .season, true): return SemanticColor(textPrimary: Color(hex: 0xCACDD4), textSecondary: Color(hex: 0x94979F), surface: Color(hex: 0x171A22), surfaceRaised: Color(hex: 0x0A0E18), separator: Color(hex: 0x1E2D48), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("26", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x525254), surface: Color(hex: 0xE9EAEF), surfaceRaised: Color(hex: 0xF8F8F9), separator: Color(hex: 0xC2C3C9), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("26", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xABABAC), surface: Color(hex: 0x040608), surfaceRaised: Color(hex: 0x1E1F23), separator: Color(hex: 0x3C3F46), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("wc26", .season, false): return SemanticColor(textPrimary: Color(hex: 0x152038), textSecondary: Color(hex: 0x545C6E), surface: Color(hex: 0xE7E9EC), surfaceRaised: Color(hex: 0xF5F7FA), separator: Color(hex: 0xC8CEDA), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("wc26", .season, true): return SemanticColor(textPrimary: Color(hex: 0xCACDD4), textSecondary: Color(hex: 0x94979F), surface: Color(hex: 0x171A22), surfaceRaised: Color(hex: 0x0A0E18), separator: Color(hex: 0x1E2D48), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("wc26", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x525254), surface: Color(hex: 0xE9EAEF), surfaceRaised: Color(hex: 0xF8F8F9), separator: Color(hex: 0xC2C3C9), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("wc26", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xABABAC), surface: Color(hex: 0x040608), surfaceRaised: Color(hex: 0x1E1F23), separator: Color(hex: 0x3C3F46), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("27", .season, false): return SemanticColor(textPrimary: Color(hex: 0x422006), textSecondary: Color(hex: 0x785E47), surface: Color(hex: 0xF5F0E0), surfaceRaised: Color(hex: 0xFEFCE8), separator: Color(hex: 0xE2D6A4), accent: Color(hex: 0xCA8A04), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("27", .season, true): return SemanticColor(textPrimary: Color(hex: 0xFDE047), textSecondary: Color(hex: 0xB6A136), surface: Color(hex: 0x0F0F0F), surfaceRaised: Color(hex: 0x1C1917), separator: Color(hex: 0x44403C), accent: Color(hex: 0xFACC15), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("27", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x545353), surface: Color(hex: 0xF0EEED), surfaceRaised: Color(hex: 0xFDFBF7), separator: Color(hex: 0xD0CBC5), accent: Color(hex: 0xCA8A04), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("27", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xACACAA), surface: Color(hex: 0x0A0801), surfaceRaised: Color(hex: 0x23211E), separator: Color(hex: 0x484437), accent: Color(hex: 0xFACC15), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("-1", .season, false): return SemanticColor(textPrimary: Color(hex: 0x152038), textSecondary: Color(hex: 0x545C6E), surface: Color(hex: 0xE7E9EC), surfaceRaised: Color(hex: 0xF5F7FA), separator: Color(hex: 0xC8CEDA), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("-1", .season, true): return SemanticColor(textPrimary: Color(hex: 0xCACDD4), textSecondary: Color(hex: 0x94979F), surface: Color(hex: 0x171A22), surfaceRaised: Color(hex: 0x0A0E18), separator: Color(hex: 0x1E2D48), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("-1", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x525254), surface: Color(hex: 0xE9EAEF), surfaceRaised: Color(hex: 0xF8F8F9), separator: Color(hex: 0xC2C3C9), accent: Color(hex: 0x152038), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0xFFFFFF))
+    case ("-1", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xABABAC), surface: Color(hex: 0x040608), surfaceRaised: Color(hex: 0x1E1F23), separator: Color(hex: 0x3C3F46), accent: Color(hex: 0x6B8FD4), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("0", .season, false): return SemanticColor(textPrimary: Color(hex: 0x422006), textSecondary: Color(hex: 0x785E47), surface: Color(hex: 0xF5F0E0), surfaceRaised: Color(hex: 0xFEFCE8), separator: Color(hex: 0xE2D6A4), accent: Color(hex: 0xCA8A04), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("0", .season, true): return SemanticColor(textPrimary: Color(hex: 0xFDE047), textSecondary: Color(hex: 0xB6A136), surface: Color(hex: 0x0F0F0F), surfaceRaised: Color(hex: 0x1C1917), separator: Color(hex: 0x44403C), accent: Color(hex: 0xFACC15), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("0", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x545353), surface: Color(hex: 0xF0EEED), surfaceRaised: Color(hex: 0xFDFBF7), separator: Color(hex: 0xD0CBC5), accent: Color(hex: 0xCA8A04), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("0", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xACACAA), surface: Color(hex: 0x0A0801), surfaceRaised: Color(hex: 0x23211E), separator: Color(hex: 0x484437), accent: Color(hex: 0xFACC15), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("1", .season, false): return SemanticColor(textPrimary: Color(hex: 0x06423E), textSecondary: Color(hex: 0x437371), surface: Color(hex: 0xE0F0F5), surfaceRaised: Color(hex: 0xE8F5FE), separator: Color(hex: 0xA4CFE2), accent: Color(hex: 0x04A7CA), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("1", .season, true): return SemanticColor(textPrimary: Color(hex: 0x47BFFD), textSecondary: Color(hex: 0x378EBA), surface: Color(hex: 0x0F0F0F), surfaceRaised: Color(hex: 0x171C1C), separator: Color(hex: 0x3C4444), accent: Color(hex: 0x15B5FA), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    case ("1", .neutral, false): return SemanticColor(textPrimary: Color(hex: 0x111111), textSecondary: Color(hex: 0x525455), surface: Color(hex: 0xE8EFF5), surfaceRaised: Color(hex: 0xF7FCFD), separator: Color(hex: 0xC1CED5), accent: Color(hex: 0x04A7CA), danger: Color(hex: 0xB91C1C), onAccent: Color(hex: 0x000000))
+    case ("1", .neutral, true): return SemanticColor(textPrimary: Color(hex: 0xF2F2F2), textSecondary: Color(hex: 0xAAABAC), surface: Color(hex: 0x01070A), surfaceRaised: Color(hex: 0x1C2125), separator: Color(hex: 0x354249), accent: Color(hex: 0x15B5FA), danger: Color(hex: 0xF87171), onAccent: Color(hex: 0x000000))
+    default: return semanticColorFor("0", tone: tone, isDark: isDark)
+    }
+}

package/src/tokens/generated/tokens.css

@@ -0,0 +1,383 @@
+/* AUTO-GENERATED — do not edit manually */
+/* Run: bun run generate:tokens (from ui/) */
+/* Source: ui/src/tokens/tokens.ts and each ui/src/seasons/<season>/style.css */
+
+:root {
+  --space-3xs: 2px;
+  --space-2xs: 4px;
+  --space-xs: 8px;
+  --space-sm: 12px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-sheet: 28px;
+  --motion-fast: 150ms;
+  --motion-base: 250ms;
+  --motion-slow: 400ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --font-family-base: 'Livvic', system-ui, sans-serif;
+  --type-display-size: clamp(2rem, 5vw, 3.5rem);
+  --type-display-weight: 900;
+  --type-display-line-height: 1.1;
+  --type-display-tracking: -0.02em;
+  --type-title-size: clamp(1.5rem, 3.5vw, 2.25rem);
+  --type-title-weight: 700;
+  --type-title-line-height: 1.15;
+  --type-title-tracking: -0.01em;
+  --type-headline-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  --type-headline-weight: 600;
+  --type-headline-line-height: 1.25;
+  --type-headline-tracking: 0em;
+  --type-body-size: 1rem;
+  --type-body-weight: 400;
+  --type-body-line-height: 1.5;
+  --type-body-tracking: 0em;
+  --type-label-size: 0.875rem;
+  --type-label-weight: 500;
+  --type-label-line-height: 1.3;
+  --type-label-tracking: 0.01em;
+  --type-caption-size: 0.75rem;
+  --type-caption-weight: 400;
+  --type-caption-line-height: 1.35;
+  --type-caption-tracking: 0.01em;
+  --type-numeral-size: 1rem;
+  --type-numeral-weight: 500;
+  --type-numeral-line-height: 1.3;
+  --type-numeral-tracking: 0em;
+  --ui-text-primary: var(--ui-neutral-text-primary);
+  --ui-text-secondary: var(--ui-neutral-text-secondary);
+  --ui-surface: var(--ui-neutral-surface);
+  --ui-surface-raised: var(--ui-neutral-surface-raised);
+  --ui-separator: var(--ui-neutral-separator);
+  --ui-accent: var(--ui-neutral-accent);
+  --ui-danger: var(--ui-neutral-danger);
+  --ui-on-accent: var(--ui-neutral-on-accent);
+}
+
+[data-tone='season'] {
+  --ui-text-primary: var(--ui-season-text-primary);
+  --ui-text-secondary: var(--ui-season-text-secondary);
+  --ui-surface: var(--ui-season-surface);
+  --ui-surface-raised: var(--ui-season-surface-raised);
+  --ui-separator: var(--ui-season-separator);
+  --ui-accent: var(--ui-season-accent);
+  --ui-danger: var(--ui-season-danger);
+  --ui-on-accent: var(--ui-season-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-base: 0ms;
+    --motion-slow: 0ms;
+  }
+}
+
+:root[data-season='24'] {
+  --ui-season-text-primary: #5b21b6;
+  --ui-season-text-secondary: #7e51c4;
+  --ui-season-surface: #edeaef;
+  --ui-season-surface-raised: #f9f5ff;
+  --ui-season-separator: #ddd0f5;
+  --ui-season-accent: #7c3aed;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #ffffff;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #535256;
+  --ui-neutral-surface: #edebf7;
+  --ui-neutral-surface-raised: #fbf9fe;
+  --ui-neutral-separator: #cac5d8;
+  --ui-neutral-accent: #7c3aed;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #ffffff;
+}
+
+:root[data-season='24'][data-theme='dark'] {
+  --ui-season-text-primary: #d0ccd6;
+  --ui-season-text-secondary: #9b97a1;
+  --ui-season-surface: #1e1a24;
+  --ui-season-surface-raised: #130a24;
+  --ui-season-separator: #2e1a52;
+  --ui-season-accent: #a78bfa;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #ababac;
+  --ui-neutral-surface: #07060a;
+  --ui-neutral-surface-raised: #201f25;
+  --ui-neutral-separator: #413f49;
+  --ui-neutral-accent: #a78bfa;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='25'] {
+  --ui-season-text-primary: #9a3412;
+  --ui-season-text-secondary: #a85134;
+  --ui-season-surface: #f0eae7;
+  --ui-season-surface-raised: #fff8f5;
+  --ui-season-separator: #f5d5c8;
+  --ui-season-accent: #ec8266;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #555354;
+  --ui-neutral-surface: #f2eef1;
+  --ui-neutral-surface-raised: #fefbfa;
+  --ui-neutral-separator: #d3cbcd;
+  --ui-neutral-accent: #ec8266;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='25'][data-theme='dark'] {
+  --ui-season-text-primary: #d4cdc8;
+  --ui-season-text-secondary: #9f9894;
+  --ui-season-surface: #231c19;
+  --ui-season-surface-raised: #1a0f0a;
+  --ui-season-separator: #3d2318;
+  --ui-season-accent: #f0a08a;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #acabab;
+  --ui-neutral-surface: #0a0606;
+  --ui-neutral-surface-raised: #222021;
+  --ui-neutral-separator: #474040;
+  --ui-neutral-accent: #f0a08a;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='26'] {
+  --ui-season-text-primary: #152038;
+  --ui-season-text-secondary: #545c6e;
+  --ui-season-surface: #e7e9ec;
+  --ui-season-surface-raised: #f5f7fa;
+  --ui-season-separator: #c8ceda;
+  --ui-season-accent: #152038;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #ffffff;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #525254;
+  --ui-neutral-surface: #e9eaef;
+  --ui-neutral-surface-raised: #f8f8f9;
+  --ui-neutral-separator: #c2c3c9;
+  --ui-neutral-accent: #152038;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #ffffff;
+}
+
+:root[data-season='26'][data-theme='dark'] {
+  --ui-season-text-primary: #cacdd4;
+  --ui-season-text-secondary: #94979f;
+  --ui-season-surface: #171a22;
+  --ui-season-surface-raised: #0a0e18;
+  --ui-season-separator: #1e2d48;
+  --ui-season-accent: #6b8fd4;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #ababac;
+  --ui-neutral-surface: #040608;
+  --ui-neutral-surface-raised: #1e1f23;
+  --ui-neutral-separator: #3c3f46;
+  --ui-neutral-accent: #6b8fd4;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='wc26'] {
+  --ui-season-text-primary: #152038;
+  --ui-season-text-secondary: #545c6e;
+  --ui-season-surface: #e7e9ec;
+  --ui-season-surface-raised: #f5f7fa;
+  --ui-season-separator: #c8ceda;
+  --ui-season-accent: #152038;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #ffffff;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #525254;
+  --ui-neutral-surface: #e9eaef;
+  --ui-neutral-surface-raised: #f8f8f9;
+  --ui-neutral-separator: #c2c3c9;
+  --ui-neutral-accent: #152038;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #ffffff;
+}
+
+:root[data-season='wc26'][data-theme='dark'] {
+  --ui-season-text-primary: #cacdd4;
+  --ui-season-text-secondary: #94979f;
+  --ui-season-surface: #171a22;
+  --ui-season-surface-raised: #0a0e18;
+  --ui-season-separator: #1e2d48;
+  --ui-season-accent: #6b8fd4;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #ababac;
+  --ui-neutral-surface: #040608;
+  --ui-neutral-surface-raised: #1e1f23;
+  --ui-neutral-separator: #3c3f46;
+  --ui-neutral-accent: #6b8fd4;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='27'] {
+  --ui-season-text-primary: #422006;
+  --ui-season-text-secondary: #785e47;
+  --ui-season-surface: #f5f0e0;
+  --ui-season-surface-raised: #fefce8;
+  --ui-season-separator: #e2d6a4;
+  --ui-season-accent: #ca8a04;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #545353;
+  --ui-neutral-surface: #f0eeed;
+  --ui-neutral-surface-raised: #fdfbf7;
+  --ui-neutral-separator: #d0cbc5;
+  --ui-neutral-accent: #ca8a04;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='27'][data-theme='dark'] {
+  --ui-season-text-primary: #fde047;
+  --ui-season-text-secondary: #b6a136;
+  --ui-season-surface: #0f0f0f;
+  --ui-season-surface-raised: #1c1917;
+  --ui-season-separator: #44403c;
+  --ui-season-accent: #facc15;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #acacaa;
+  --ui-neutral-surface: #0a0801;
+  --ui-neutral-surface-raised: #23211e;
+  --ui-neutral-separator: #484437;
+  --ui-neutral-accent: #facc15;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='-1'] {
+  --ui-season-text-primary: #152038;
+  --ui-season-text-secondary: #545c6e;
+  --ui-season-surface: #e7e9ec;
+  --ui-season-surface-raised: #f5f7fa;
+  --ui-season-separator: #c8ceda;
+  --ui-season-accent: #152038;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #ffffff;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #525254;
+  --ui-neutral-surface: #e9eaef;
+  --ui-neutral-surface-raised: #f8f8f9;
+  --ui-neutral-separator: #c2c3c9;
+  --ui-neutral-accent: #152038;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #ffffff;
+}
+
+:root[data-season='-1'][data-theme='dark'] {
+  --ui-season-text-primary: #cacdd4;
+  --ui-season-text-secondary: #94979f;
+  --ui-season-surface: #171a22;
+  --ui-season-surface-raised: #0a0e18;
+  --ui-season-separator: #1e2d48;
+  --ui-season-accent: #6b8fd4;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #ababac;
+  --ui-neutral-surface: #040608;
+  --ui-neutral-surface-raised: #1e1f23;
+  --ui-neutral-separator: #3c3f46;
+  --ui-neutral-accent: #6b8fd4;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='0'] {
+  --ui-season-text-primary: #422006;
+  --ui-season-text-secondary: #785e47;
+  --ui-season-surface: #f5f0e0;
+  --ui-season-surface-raised: #fefce8;
+  --ui-season-separator: #e2d6a4;
+  --ui-season-accent: #ca8a04;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #545353;
+  --ui-neutral-surface: #f0eeed;
+  --ui-neutral-surface-raised: #fdfbf7;
+  --ui-neutral-separator: #d0cbc5;
+  --ui-neutral-accent: #ca8a04;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='0'][data-theme='dark'] {
+  --ui-season-text-primary: #fde047;
+  --ui-season-text-secondary: #b6a136;
+  --ui-season-surface: #0f0f0f;
+  --ui-season-surface-raised: #1c1917;
+  --ui-season-separator: #44403c;
+  --ui-season-accent: #facc15;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #acacaa;
+  --ui-neutral-surface: #0a0801;
+  --ui-neutral-surface-raised: #23211e;
+  --ui-neutral-separator: #484437;
+  --ui-neutral-accent: #facc15;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='1'] {
+  --ui-season-text-primary: #06423e;
+  --ui-season-text-secondary: #437371;
+  --ui-season-surface: #e0f0f5;
+  --ui-season-surface-raised: #e8f5fe;
+  --ui-season-separator: #a4cfe2;
+  --ui-season-accent: #04a7ca;
+  --ui-season-danger: #b91c1c;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #111111;
+  --ui-neutral-text-secondary: #525455;
+  --ui-neutral-surface: #e8eff5;
+  --ui-neutral-surface-raised: #f7fcfd;
+  --ui-neutral-separator: #c1ced5;
+  --ui-neutral-accent: #04a7ca;
+  --ui-neutral-danger: #b91c1c;
+  --ui-neutral-on-accent: #000000;
+}
+
+:root[data-season='1'][data-theme='dark'] {
+  --ui-season-text-primary: #47bffd;
+  --ui-season-text-secondary: #378eba;
+  --ui-season-surface: #0f0f0f;
+  --ui-season-surface-raised: #171c1c;
+  --ui-season-separator: #3c4444;
+  --ui-season-accent: #15b5fa;
+  --ui-season-danger: #f87171;
+  --ui-season-on-accent: #000000;
+  --ui-neutral-text-primary: #f2f2f2;
+  --ui-neutral-text-secondary: #aaabac;
+  --ui-neutral-surface: #01070a;
+  --ui-neutral-surface-raised: #1c2125;
+  --ui-neutral-separator: #354249;
+  --ui-neutral-accent: #15b5fa;
+  --ui-neutral-danger: #f87171;
+  --ui-neutral-on-accent: #000000;
+}

package/src/tokens/tokens.ts

@@ -0,0 +1,93 @@
+// The one source for spacing, radius, type, semantic colour and motion. scripts/generate-tokens.ts
+// turns it into CSS custom properties, Tokens.swift and Tokens.kt; season colours stay in
+// seasons/*/style.css and are referenced here by variable name.
+
+/** A 4pt scale. Native names spell the numeric prefixes out (`3xs` → `xxxs`) to stay valid identifiers. */
+export const space = { '3xs': 2, '2xs': 4, xs: 8, sm: 12, md: 16, lg: 24, xl: 32, '2xl': 48, '3xl': 64 } as const
+
+export const radius = { sm: 4, md: 8, lg: 16, sheet: 28 } as const
+
+export const motion = {
+  duration: { fast: 150, base: 250, slow: 400 },
+  /** M3's standard easing; reduced motion swaps every transition for an instant or opacity-only change. */
+  easing: [0.2, 0, 0, 1],
+} as const
+
+/** `Livvic-SemiBold.ttf` → `livvic_semibold`: an Android resource name is lowercase, digits and underscores. */
+export const androidFont = (file: string) => file.replace(/\.ttf$/, '').replace(/-/g, '_').toLowerCase()
+
+/** Livvic ships as static weights (no variable file, no 800), one file per weight the roles use. */
+export const typeface = {
+  family: 'Livvic',
+  dir: 'livvic',
+  files: { 400: 'Livvic-Regular.ttf', 500: 'Livvic-Medium.ttf', 600: 'Livvic-SemiBold.ttf', 700: 'Livvic-Bold.ttf', 900: 'Livvic-Black.ttf' },
+} as const
+
+export type IosTextStyle = 'largeTitle' | 'title' | 'title2' | 'title3' | 'headline' | 'body' | 'callout' | 'subheadline' | 'footnote' | 'caption' | 'caption2'
+export type M3Slot = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall'
+
+export interface TypeRole {
+  /** pt / sp / px at the default text size; native scales it through `ios` and `m3`. */
+  size: number
+  weight: number
+  /** A multiple of size. */
+  lineHeight: number
+  /** em. */
+  tracking: number
+  tabular?: boolean
+  /** Web only: the responsive step `typography.css` already used, where the role had one. */
+  clamp?: string
+  ios: IosTextStyle
+  m3: M3Slot
+}
+
+export const typeRoles = {
+  display: { size: 40, weight: 900, lineHeight: 1.1, tracking: -0.02, clamp: 'clamp(2rem, 5vw, 3.5rem)', ios: 'largeTitle', m3: 'displaySmall' },
+  title: { size: 28, weight: 700, lineHeight: 1.15, tracking: -0.01, clamp: 'clamp(1.5rem, 3.5vw, 2.25rem)', ios: 'title', m3: 'headlineMedium' },
+  headline: { size: 20, weight: 600, lineHeight: 1.25, tracking: 0, clamp: 'clamp(1.25rem, 2.5vw, 1.75rem)', ios: 'title3', m3: 'titleLarge' },
+  body: { size: 16, weight: 400, lineHeight: 1.5, tracking: 0, ios: 'body', m3: 'bodyLarge' },
+  label: { size: 14, weight: 500, lineHeight: 1.3, tracking: 0.01, ios: 'subheadline', m3: 'labelLarge' },
+  caption: { size: 12, weight: 400, lineHeight: 1.35, tracking: 0.01, ios: 'caption', m3: 'bodySmall' },
+  numeral: { size: 16, weight: 500, lineHeight: 1.3, tracking: 0, tabular: true, ios: 'body', m3: 'titleMedium' },
+} as const satisfies Record<string, TypeRole>
+
+// The season variables a semantic role can stand on: the names each season's style.css declares.
+export type SeasonVar = '--color-season' | '--color-season-text' | '--color-accent' | '--color-surface' | '--color-border'
+
+export type Mode = 'light' | 'dark'
+
+/**
+ * Two tones, one set of names. `season` is the season's own colour at full strength, for the
+ * season track (season, round, question). `neutral` is the platform's own light/dark greys
+ * carrying a faint wash of the season's accent, for every page outside it.
+ */
+export const semantic = {
+  season: {
+    surface: '--color-season',
+    surfaceRaised: '--color-surface',
+    separator: '--color-border',
+    textPrimary: '--color-season-text',
+    accent: '--color-accent',
+  },
+  neutral: {
+    base: {
+      light: { surface: '#f2f2f7', surfaceRaised: '#ffffff', separator: '#d1d1d6', textPrimary: '#111111' },
+      dark: { surface: '#000000', surfaceRaised: '#1c1c1e', separator: '#38383a', textPrimary: '#f2f2f2' },
+    },
+    /** Share of the season accent mixed into each neutral base. */
+    tint: { surface: 0.04, surfaceRaised: 0.03, separator: 0.08, textPrimary: 0 },
+  },
+  /** text-secondary is text-primary mixed into the surface: this share at the faintest, more where a season needs it to clear 4.5:1. */
+  textSecondaryShare: 0.7,
+  /** Not a season colour: red-700 / red-400, the reds that clear 4.5:1 on every season surface. */
+  danger: { light: '#b91c1c', dark: '#f87171' },
+} as const satisfies {
+  season: Record<'surface' | 'surfaceRaised' | 'separator' | 'textPrimary' | 'accent', SeasonVar>
+  neutral: { base: Record<Mode, Record<string, string>>; tint: Record<string, number> }
+  textSecondaryShare: number
+  danger: Record<Mode, string>
+}
+
+export const semanticRoles = ['textPrimary', 'textSecondary', 'surface', 'surfaceRaised', 'separator', 'accent', 'danger', 'onAccent'] as const
+export type SemanticRole = (typeof semanticRoles)[number]
+export type Tone = 'season' | 'neutral'