@financedistrict/apps-tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +19 -0
  2. package/README.md +77 -0
  3. package/dist/tokens.css +2 -0
  4. package/package.json +33 -0
  5. package/src/base.css +112 -0
  6. package/src/theme.css +668 -0
package/LICENSE ADDED
@@ -0,0 +1,19 @@
1
+ Copyright (c) 2026 First Digital Trust Limited ("FD"). All rights reserved.
2
+
3
+ This software and the accompanying files (the "Software") are proprietary and
4
+ confidential to FD. The Software is published to a public package registry
5
+ solely to allow installation and use by FD's own applications and by prototypes
6
+ authorized in writing by FD. Publication to that registry does NOT place the
7
+ Software in the public domain and does NOT grant any license under FD's
8
+ copyright or other rights.
9
+
10
+ Except as expressly permitted by a separate written agreement with FD, no
11
+ person or entity may use, copy, reproduce, modify, adapt, merge, publish,
12
+ redistribute, sublicense, or sell the Software or any portion of it, or create
13
+ derivative works from it.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17
+ FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL FD BE LIABLE
18
+ FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN
19
+ CONNECTION WITH THE SOFTWARE OR ITS USE.
package/README.md ADDED
@@ -0,0 +1,77 @@
1
+ # @financedistrict/apps-tokens
2
+
3
+ The **single source of truth** for FD design tokens. Consumed by every FD app as Tailwind v4 CSS.
4
+
5
+ ## How it works
6
+
7
+ ```
8
+ Figma Variables ──MCP read + transform──▶ src/*.css ──Tailwind v4──▶ utility classes in each app
9
+ ```
10
+
11
+ - **`src/base.css`** — tier 1: primitives (raw color ramps) under `:root`, in OKLCH. Names like `--purple-500`, `--gray-950`. Never theme-dependent. (No `--alpha-*` — transparency is derived at the semantic layer, ADR-0005.)
12
+ - **`src/theme.css`** — tier 2: semantic tokens that reference primitives, split into `:root,.light { }` and `.dark { }`, plus the Tailwind `@theme` registration that turns each token into a utility class. Imports `base.css`.
13
+
14
+ Both files are **generated from Figma** (file `FD Products Styleguide / UI Kit`) — do not hand-edit. See [ADR-0003](../../docs/adr/0003-token-pipeline.md) for the naming rules and [ADR-0004](../../docs/adr/0004-oklch-and-token-naming.md) for OKLCH + naming cleanup.
15
+
16
+ ## Regenerating from Figma
17
+
18
+ There is no headless generator — regeneration is a guided MCP session, driven by the **`/sync-figma-token`** skill (`.claude/skills/sync-figma-token/`), which holds the full deterministic algorithm (name transform, value/unit mapping, alpha derivation, alias resolution, and the mapping-validation check). Summary of the steps, in order:
19
+
20
+ 1. **Read the 4 collections** via the Figma MCP (`use_figma` + variable APIs): `base-palette`, `theme-colors`, `theme-modes` (light/dark), `theme-values`.
21
+ 2. **Write `base.css`** (primitives, sRGB hex under `:root`) and **`theme.css`** (semantic `:root,.light` / `.dark` + `@theme` scales), applying the naming rules: strip noise words (`neutral`/`normal`/`main`/`gradients`/`effect`), dedupe repeated segments, kebab-case; keep the renamed conflict tokens (`fader-0X`, `effect-0X`, `data-{c}-2`).
22
+ - **Alpha is derived, not baked** (ADR-0005). Do **not** emit `--alpha-*` primitives. Where a semantic token needs transparency, write it as relative-color from the solid primitive: `oklch(from var(--gray-950) l c h / 50%)` instead of `var(--alpha-gray-950-50)`.
23
+ 3. **Convert to OKLCH:** `node scripts/hex-to-oklch.mjs` (idempotent — safe to re-run; skips already-converted values).
24
+ 4. **Pull styles:** read local text / effect / paint styles → composite type `@utility` classes, `shadow-s`/`shadow-xs`, `fader-*`.
25
+ 5. **Verify:** `npm run verify` — must pass (utilities generate, golden values intact, OKLCH-only base, dark mode).
26
+ 6. If a golden value changed **intentionally**, update the `golden` list in `verify/check.mjs`.
27
+
28
+ ## Consuming in an app (Tailwind v4)
29
+
30
+ ```css
31
+ /* app's main CSS entry */
32
+ @import "tailwindcss";
33
+ @import "@financedistrict/apps-tokens/theme.css";
34
+ ```
35
+
36
+ Then use semantic utilities directly — theme-switch aware via `.dark`:
37
+
38
+ ```html
39
+ <button
40
+ class="bg-button-brand-primary-background text-button-brand-primary-foreground rounded-md"
41
+ >
42
+ …
43
+ </button>
44
+ <div
45
+ class="bg-card-background text-card-foreground border border-card-border rounded-xl"
46
+ >
47
+ …
48
+ </div>
49
+ ```
50
+
51
+ ## Token tiers
52
+
53
+ | Tier | File | Example | Use in components? |
54
+ | --------- | ----------- | -------------------------------------------- | ------------------ |
55
+ | Primitive | `base.css` | `--purple-500` | ❌ never |
56
+ | Semantic | `theme.css` | `--card-foreground` → `text-card-foreground` | ✅ always |
57
+
58
+ ## Verify the build
59
+
60
+ ```bash
61
+ npm run verify # Tailwind v4 over a probe file; asserts utilities generate,
62
+ # golden values intact, base is OKLCH-only, dark mode works
63
+ ```
64
+
65
+ ## Source collections (Figma)
66
+
67
+ `base-palette` → `base.css`. `theme-colors` + `theme-modes` (light/dark) → semantic layer in `theme.css`. `theme-values` → the `@theme` static scales (radius, typography). Fonts: **Archivo** (sans), **Chakra Petch** (mono).
68
+
69
+ ## Consuming from a zero-build prototype (CDN)
70
+
71
+ The section above (`@import "@financedistrict/apps-tokens/theme.css"`) needs the
72
+ consuming app's own Tailwind v4 build to resolve `@theme`/`@utility` into real
73
+ utility classes — it won't work in a bare browser with no build step. Standalone
74
+ HTML/JSX prototypes instead reference a separate, pre-compiled `dist/tokens.css` via
75
+ a plain `<link>` tag. See
76
+ [`docs/guides/standalone-prototype-consumption.md`](../../docs/guides/standalone-prototype-consumption.md)
77
+ for the exact shape.
package/dist/tokens.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:var(--font-archivo), "Archivo", ui-sans-serif, system-ui, sans-serif;--font-mono:var(--font-chakra-petch), "Chakra Petch", ui-monospace, SFMono-Regular, monospace;--color-black:#000;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:32px;--text-5xl:40px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-1px;--tracking-normal:0px;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-xl:.75rem;--shadow-xs:0 1px 2px 0 #0000000d;--animate-spin:spin 1s linear infinite;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-card-foreground-muted:var(--card-foreground-muted);--font-caption:var(--font-chakra-petch), "Chakra Petch", ui-monospace, SFMono-Regular, monospace;--tracking-tightest:-2px;--leading-4:16px;--leading-5:20px;--leading-6:24px;--leading-7:28px;--leading-9:36px;--leading-10:44px;--radius-none:0rem;--radius-full:9999px;--container-0:0rem;--container-5xs:5.25rem;--container-4xs:13rem;--border-width-0:0px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--opacity-0:0;--opacity-50:.5;--opacity-60:.6;--opacity-90:.9;--opacity-100:1}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*,:after,:before{border-color:var(--border);outline-color:var(--focus)}body{background-color:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}h1{font-family:var(--font-sans);font-size:var(--text-5xl);line-height:var(--leading-10);letter-spacing:var(--tracking-tightest);font-weight:var(--font-weight-medium)}h2{font-family:var(--font-sans);font-size:var(--text-3xl);line-height:var(--leading-9);letter-spacing:var(--tracking-tightest);font-weight:var(--font-weight-medium)}h3{font-family:var(--font-sans);font-size:var(--text-2xl);line-height:var(--leading-7);letter-spacing:var(--tracking-tight);font-weight:var(--font-weight-medium)}h4{font-family:var(--font-sans);font-size:var(--text-xl);line-height:var(--leading-6);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.top-6{top:calc(var(--spacing) * 6)}.right-6{right:calc(var(--spacing) * 6)}.left-1{left:var(--spacing)}.z-50{z-index:50}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1440px){.container{max-width:1440px}}.m-0{margin:0}.m-auto{margin:auto}.mb-1{margin-bottom:var(--spacing)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.size-0\.5{width:calc(var(--spacing) * .5);height:calc(var(--spacing) * .5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[calc\(100vh-2rem\)\]{max-height:calc(100vh - 2rem)}.min-h-0{min-height:0}.min-h-10{min-height:calc(var(--spacing) * 10)}.w-0{width:var(--container-0)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-48{width:calc(var(--spacing) * 48)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-\[200px\]{width:200px}.w-\[280px\]{width:280px}.w-\[302px\]{width:302px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[420px\]{width:420px}.w-\[438px\]{width:438px}.w-\[440px\]{width:440px}.w-\[466px\]{width:466px}.w-fit{width:fit-content}.w-full{width:100%}.max-w-4xs{max-width:var(--container-4xs)}.max-w-5xs{max-width:var(--container-5xs)}.max-w-\[244px\]{max-width:244px}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:var(--container-0)}.min-w-5{min-width:calc(var(--spacing) * 5)}.min-w-16{min-width:calc(var(--spacing) * 16)}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize{resize:both}.\[scrollbar-width\:thin\]{scrollbar-width:thin}.\[scrollbar-color\:var\(--color-card-foreground-muted\)_transparent\]{scrollbar-color:var(--color-card-foreground-muted) transparent}.appearance-none{appearance:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-24{gap:calc(var(--spacing) * 24)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.gap-y-6{row-gap:calc(var(--spacing) * 6)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:var(--radius-full)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-xs{border-radius:var(--radius-xs)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:var(--border-width-0)}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-3{border-right-style:var(--tw-border-style);border-right-width:var(--border-width-3)}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--border-width-2)}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:var(--border-width-2)}.border-l-3{border-left-style:var(--tw-border-style);border-left-width:var(--border-width-3)}.border-border{border-color:var(--border)}.border-border-muted{border-color:var(--border-muted)}.border-brand-border{border-color:var(--brand-border)}.border-brand-primary-border{border-color:var(--brand-primary-border)}.border-button-secondary-border{border-color:var(--button-secondary-border)}.border-card-border{border-color:var(--card-border)}.border-card-brand-border{border-color:var(--card-brand-border)}.border-card-brand-border-accent{border-color:var(--card-brand-border-accent)}.border-card-primary-border{border-color:var(--card-primary-border)}.border-input-border{border-color:var(--input-border)}.border-input-destructive-border{border-color:var(--input-destructive-border)}.border-input-destructive-foreground-accent{border-color:var(--input-destructive-foreground-accent)}.border-transparent{border-color:#0000}.border-t-card-border{border-top-color:var(--card-border)}.border-r-transparent{border-right-color:#0000}.border-l-card-brand-border-accent{border-left-color:var(--card-brand-border-accent)}.border-l-transparent{border-left-color:#0000}.bg-background{background-color:var(--background)}.bg-black\/50{background-color:color-mix(in srgb, #000 .5, transparent)}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) var(--opacity-50), transparent)}}.bg-brand-background{background-color:var(--brand-background)}.bg-brand-primary-background{background-color:var(--brand-primary-background)}.bg-button-brand-primary-background{background-color:var(--button-brand-primary-background)}.bg-button-destructive-background{background-color:var(--button-destructive-background)}.bg-button-primary-background{background-color:var(--button-primary-background)}.bg-button-primary-muted{background-color:var(--button-primary-muted)}.bg-button-secondary-background{background-color:var(--button-secondary-background)}.bg-button-secondary-foreground{background-color:var(--button-secondary-foreground)}.bg-card-accent{background-color:var(--card-accent)}.bg-card-background{background-color:var(--card-background)}.bg-card-brand-accent{background-color:var(--card-brand-accent)}.bg-card-brand-secondary-background{background-color:var(--card-brand-secondary-background)}.bg-card-primary-background{background-color:var(--card-primary-background)}.bg-card-reversed-background{background-color:var(--card-reversed-background)}.bg-current{background-color:currentColor}.bg-destructive-background{background-color:var(--destructive-background)}.bg-fader-01{background-color:var(--fader-01)}.bg-input-background{background-color:var(--input-background)}.bg-overlay{background-color:var(--overlay)}.bg-surface{background-color:var(--surface)}.bg-transparent{background-color:#0000}.fader-b{background-image:linear-gradient(to bottom, var(--fader-02), var(--fader-01))}.stroke-button-secondary-border{stroke:var(--button-secondary-border)}.stroke-button-secondary-border-muted{stroke:var(--button-secondary-border-muted)}.stroke-focus{stroke:var(--focus)}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-24{padding:calc(var(--spacing) * 24)}.px-0{padding-inline:0}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-64{padding-bottom:calc(var(--spacing) * 64)}.pb-72{padding-bottom:calc(var(--spacing) * 72)}.pb-80{padding-bottom:calc(var(--spacing) * 80)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.body-02{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-6);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-normal)}.body-02-medium{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-6);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.body-03{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-5);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-normal)}.body-03-medium{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-5);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.body-04{font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-4);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-normal)}.body-mono-04{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-4);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-normal)}.button-01{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-5);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.caption-01{font-family:var(--font-caption);font-size:var(--text-base);line-height:var(--leading-6);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-normal)}.caption-02-medium{font-family:var(--font-caption);font-size:var(--text-sm);line-height:var(--leading-5);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.caption-03-medium{font-family:var(--font-caption);font-size:var(--text-xs);line-height:var(--leading-4);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.display-01{font-family:var(--font-sans);font-size:var(--text-5xl);line-height:var(--leading-10);letter-spacing:var(--tracking-tightest);font-weight:var(--font-weight-medium)}.display-04{font-family:var(--font-sans);font-size:var(--text-xl);line-height:var(--leading-6);letter-spacing:var(--tracking-normal);font-weight:var(--font-weight-medium)}.font-caption{font-family:var(--font-caption)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:var(--leading-6);line-height:var(--leading-6)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-brand-foreground{color:var(--brand-foreground)}.text-brand-primary-foreground{color:var(--brand-primary-foreground)}.text-button-brand-primary-foreground{color:var(--button-brand-primary-foreground)}.text-button-destructive-primary-foreground{color:var(--button-destructive-primary-foreground)}.text-button-primary-foreground{color:var(--button-primary-foreground)}.text-button-secondary-foreground{color:var(--button-secondary-foreground)}.text-button-secondary-foreground-accent{color:var(--button-secondary-foreground-accent)}.text-button-secondary-foreground-muted{color:var(--button-secondary-foreground-muted)}.text-card-brand-foreground{color:var(--card-brand-foreground)}.text-card-brand-secondary-foreground{color:var(--card-brand-secondary-foreground)}.text-card-brand-secondary-foreground-muted{color:var(--card-brand-secondary-foreground-muted)}.text-card-foreground{color:var(--card-foreground)}.text-card-foreground-muted{color:var(--card-foreground-muted)}.text-card-primary-foreground{color:var(--card-primary-foreground)}.text-card-primary-foreground-muted{color:var(--card-primary-foreground-muted)}.text-card-reversed-foreground{color:var(--card-reversed-foreground)}.text-card-reversed-foreground-muted{color:var(--card-reversed-foreground-muted)}.text-current{color:currentColor}.text-data-purple{color:var(--data-purple)}.text-data-teal-2{color:var(--data-teal-2)}.text-destructive-primary-foreground{color:var(--destructive-primary-foreground)}.text-effect-01{color:var(--effect-01)}.text-focus{color:var(--focus)}.text-foreground{color:var(--foreground)}.text-foreground-accent{color:var(--foreground-accent)}.text-foreground-muted{color:var(--foreground-muted)}.text-input-destructive-foreground-accent{color:var(--input-destructive-foreground-accent)}.text-input-foreground{color:var(--input-foreground)}.text-input-foreground-accent{color:var(--input-foreground-accent)}.text-input-foreground-muted{color:var(--input-foreground-muted)}.text-success-primary-foreground{color:var(--success-primary-foreground)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.caret-input-foreground-accent{caret-color:var(--input-foreground-accent)}.opacity-0{opacity:var(--opacity-0)}.opacity-60{opacity:var(--opacity-60)}.opacity-90{opacity:var(--opacity-90)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\/s{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-s{box-shadow:var(--shadow-s)}.shadow-xs{box-shadow:var(--shadow-xs)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.outline-focus{outline-color:var(--focus)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.blur-md{--tw-blur:blur(var(--blur-md));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:stroke-button-secondary-border-accent:is(:where(.group):hover *){stroke:var(--button-secondary-border-accent)}.group-hover\:text-card-brand-foreground:is(:where(.group):hover *){color:var(--card-brand-foreground)}.group-hover\:text-card-brand-foreground-muted:is(:where(.group):hover *){color:var(--card-brand-foreground-muted)}.group-hover\:text-card-foreground:is(:where(.group):hover *){color:var(--card-foreground)}.group-hover\:text-card-primary-foreground:is(:where(.group):hover *){color:var(--card-primary-foreground)}.group-hover\:text-foreground:is(:where(.group):hover *){color:var(--foreground)}}.group-focus-visible\:text-card-brand-foreground:is(:where(.group):focus-visible *){color:var(--card-brand-foreground)}.group-focus-visible\:text-card-brand-foreground-muted:is(:where(.group):focus-visible *){color:var(--card-brand-foreground-muted)}.group-focus-visible\:text-card-foreground:is(:where(.group):focus-visible *){color:var(--card-foreground)}.group-active\:stroke-button-secondary-border-accent:is(:where(.group):active *){stroke:var(--button-secondary-border-accent)}.group-has-\[\:checked\]\:block:is(:where(.group):has(:checked) *){display:block}.group-has-\[\:checked\]\:border-b:is(:where(.group):has(:checked) *){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.group-has-\[\:checked\]\:border-border:is(:where(.group):has(:checked) *){border-color:var(--border)}.group-has-\[\:focus-visible\]\:opacity-100:is(:where(.group):has(:focus-visible) *){opacity:var(--opacity-100)}.group-data-\[state\=active\]\:text-card-brand-foreground:is(:where(.group)[data-state=active] *){color:var(--card-brand-foreground)}.group-data-\[state\=active\]\:text-card-brand-foreground-muted:is(:where(.group)[data-state=active] *){color:var(--card-brand-foreground-muted)}.peer-checked\:visible:is(:where(.peer):checked~*){visibility:visible}.peer-checked\:translate-x-5\.5:is(:where(.peer):checked~*){--tw-translate-x:calc(var(--spacing) * 5.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:bg-brand-primary-foreground:is(:where(.peer):checked~*){background-color:var(--brand-primary-foreground)}.peer-checked\:opacity-100:is(:where(.peer):checked~*){opacity:var(--opacity-100)}.peer-disabled\:bg-button-secondary-foreground-muted:is(:where(.peer):disabled~*){background-color:var(--button-secondary-foreground-muted)}.peer-disabled\:text-foreground-muted:is(:where(.peer):disabled~*){color:var(--foreground-muted)}.peer-disabled\:opacity-100:is(:where(.peer):disabled~*){opacity:var(--opacity-100)}.peer-checked\:peer-disabled\:bg-button-primary-foreground-muted:is(:where(.peer):checked~*):is(:where(.peer):disabled~*){background-color:var(--button-primary-foreground-muted)}.placeholder\:text-input-foreground-muted::placeholder{color:var(--input-foreground-muted)}.checked\:border-brand-primary-border:checked{border-color:var(--brand-primary-border)}.checked\:border-transparent:checked{border-color:#0000}.checked\:bg-brand-primary-background:checked{background-color:var(--brand-primary-background)}.focus-within\:border-input-border-accent:focus-within{border-color:var(--input-border-accent)}.focus-within\:border-input-destructive-foreground-accent:focus-within{border-color:var(--input-destructive-foreground-accent)}@media (hover:hover){.hover\:border-border-accent:hover{border-color:var(--border-accent)}.hover\:border-button-secondary-border-accent:hover{border-color:var(--button-secondary-border-accent)}.hover\:border-card-brand-border:hover{border-color:var(--card-brand-border)}.hover\:border-card-brand-border-accent:hover{border-color:var(--card-brand-border-accent)}.hover\:border-input-border-accent:hover{border-color:var(--input-border-accent)}.hover\:bg-background:hover{background-color:var(--background)}.hover\:bg-button-brand-primary-accent:hover{background-color:var(--button-brand-primary-accent)}.hover\:bg-button-destructive-accent:hover{background-color:var(--button-destructive-accent)}.hover\:bg-button-primary-accent:hover{background-color:var(--button-primary-accent)}.hover\:bg-card-accent:hover{background-color:var(--card-accent)}.hover\:bg-card-brand-accent:hover{background-color:var(--card-brand-accent)}.hover\:text-button-secondary-foreground-accent:hover{color:var(--button-secondary-foreground-accent)}.hover\:text-card-foreground:hover{color:var(--card-foreground)}.hover\:text-card-reversed-foreground:hover{color:var(--card-reversed-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.checked\:hover\:border-brand-primary-border:checked:hover{border-color:var(--brand-primary-border)}.checked\:hover\:bg-brand-primary-accent:checked:hover{background-color:var(--brand-primary-accent)}}.focus-visible\:border-card-brand-border-accent:focus-visible{border-color:var(--card-brand-border-accent)}.focus-visible\:bg-card-accent:focus-visible{background-color:var(--card-accent)}.focus-visible\:bg-card-brand-accent:focus-visible{background-color:var(--card-brand-accent)}.focus-visible\:text-card-foreground:focus-visible{color:var(--card-foreground)}.focus-visible\:text-foreground:focus-visible{color:var(--foreground)}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-focus:focus-visible{outline-color:var(--focus)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:outline-solid:focus-visible{--tw-outline-style:solid;outline-style:solid}.checked\:focus-visible\:border-brand-primary-border:checked:focus-visible{border-color:var(--brand-primary-border)}.checked\:focus-visible\:bg-brand-primary-accent:checked:focus-visible{background-color:var(--brand-primary-accent)}.active\:border-card-brand-border-accent:active{border-color:var(--card-brand-border-accent)}.active\:bg-button-brand-primary-accent:active{background-color:var(--button-brand-primary-accent)}.active\:bg-button-destructive-accent:active{background-color:var(--button-destructive-accent)}.active\:bg-button-primary-accent:active{background-color:var(--button-primary-accent)}.active\:text-button-secondary-foreground-accent:active{color:var(--button-secondary-foreground-accent)}.active\:text-foreground-accent:active{color:var(--foreground-accent)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-border:disabled{border-color:var(--border)}.disabled\:border-border-muted:disabled{border-color:var(--border-muted)}.disabled\:border-button-secondary-border-muted:disabled{border-color:var(--button-secondary-border-muted)}.disabled\:bg-button-primary-muted:disabled{background-color:var(--button-primary-muted)}.disabled\:text-button-primary-foreground-muted:disabled{color:var(--button-primary-foreground-muted)}.disabled\:text-button-secondary-foreground-muted:disabled{color:var(--button-secondary-foreground-muted)}.disabled\:text-input-foreground-muted:disabled{color:var(--input-foreground-muted)}.checked\:disabled\:border-border-muted:checked:disabled{border-color:var(--border-muted)}.checked\:disabled\:border-brand-primary-border:checked:disabled{border-color:var(--brand-primary-border)}.checked\:disabled\:border-transparent:checked:disabled{border-color:#0000}.checked\:disabled\:bg-background:checked:disabled{background-color:var(--background)}.checked\:disabled\:bg-brand-primary-background:checked:disabled{background-color:var(--brand-primary-background)}.checked\:disabled\:bg-button-primary-muted:checked:disabled{background-color:var(--button-primary-muted)}.has-\[\:checked\]\:border-brand-primary-border:has(:checked){border-color:var(--brand-primary-border)}.has-\[\:disabled\]\:cursor-not-allowed:has(:disabled){cursor:not-allowed}.has-\[\:disabled\]\:opacity-60:has(:disabled){opacity:var(--opacity-60)}.data-\[state\=active\]\:border-card-brand-border-accent[data-state=active]{border-color:var(--card-brand-border-accent)}.data-\[state\=active\]\:bg-card-brand-accent[data-state=active]{background-color:var(--card-brand-accent)}.\[\&_\[data-slot\=checkbox-indicator\]\]\:text-brand-primary-foreground [data-slot=checkbox-indicator]{color:var(--brand-primary-foreground)}.\[\&_button\]\:w-full button{width:100%}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:size-5 svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.\[\&_svg\]\:size-6 svg{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.\[\&_svg\]\:size-8 svg{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\:\:-webkit-scrollbar\]\:h-3::-webkit-scrollbar{height:calc(var(--spacing) * 3)}.\[\&\:\:-webkit-scrollbar\]\:w-3::-webkit-scrollbar{width:calc(var(--spacing) * 3)}.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb{border-radius:var(--radius-full)}.\[\&\:\:-webkit-scrollbar-thumb\]\:border-4::-webkit-scrollbar-thumb{border-style:var(--tw-border-style);border-width:var(--border-width-4)}.\[\&\:\:-webkit-scrollbar-thumb\]\:border-solid::-webkit-scrollbar-thumb{--tw-border-style:solid;border-style:solid}.\[\&\:\:-webkit-scrollbar-thumb\]\:border-transparent::-webkit-scrollbar-thumb{border-color:#0000}.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-card-foreground-muted::-webkit-scrollbar-thumb{background-color:var(--card-foreground-muted)}.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-clip-content::-webkit-scrollbar-thumb{background-clip:content-box}.\[\&\:\:-webkit-scrollbar-track\]\:border-l::-webkit-scrollbar-track{border-left-style:var(--tw-border-style);border-left-width:1px}.\[\&\:\:-webkit-scrollbar-track\]\:border-card-border::-webkit-scrollbar-track{border-color:var(--card-border)}.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track{background-color:#0000}.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button{display:none}.\[\&\>\*\]\:flex-1>*{flex:1}}:root{--black:oklch(14.48% 0 0);--white:oklch(100% 0 0);--acid-lime-50:oklch(99.17% .0339 110.58);--acid-lime-100:oklch(97.65% .0827 115.88);--acid-lime-200:oklch(96.7% .131 115.05);--acid-lime-300:oklch(95.53% .1664 117.79);--acid-lime-400:oklch(91.4% .2111 120.59);--acid-lime-500:oklch(83.58% .2043 122.98);--acid-lime-600:oklch(70.51% .1756 124.27);--acid-lime-700:oklch(57.51% .1419 124.38);--acid-lime-800:oklch(48.48% .1151 123.69);--acid-lime-900:oklch(43.22% .0996 124.08);--acid-lime-950:oklch(29.37% .0726 124.97);--blue-50:oklch(97.45% .0079 253.85);--blue-100:oklch(94.56% .0177 253.34);--blue-200:oklch(88.27% .0379 249.5);--blue-300:oklch(78.3% .0723 248.14);--blue-400:oklch(63.05% .1229 248.86);--blue-500:oklch(57.95% .1257 249.53);--blue-600:oklch(49.33% .1201 252.46);--blue-700:oklch(42.35% .102 253.62);--blue-800:oklch(38.12% .0841 252.86);--blue-900:oklch(34.43% .069 254.34);--blue-950:oklch(26.29% .0508 257.16);--gold-50:oklch(97.61% .0041 91.45);--gold-100:oklch(94.17% .0107 100.83);--gold-200:oklch(88.61% .019 100.15);--gold-300:oklch(81.11% .0317 98.95);--gold-400:oklch(72.48% .0429 93.3);--gold-500:oklch(65.97% .0476 88.52);--gold-600:oklch(61.25% .0453 83.71);--gold-700:oklch(53.26% .0366 76.09);--gold-800:oklch(46.74% .0293 74.9);--gold-900:oklch(41.04% .0241 77.01);--gold-950:oklch(27.17% .0146 76.27);--gray-50:oklch(98.51% 0 0);--gray-100:oklch(97.09% .0011 17.18);--gray-150:oklch(94.39% .0011 17.18);--gray-200:oklch(86.07% 0 0);--gray-250:oklch(81.09% 0 0);--gray-300:oklch(75.72% 0 0);--gray-350:oklch(69.27% 0 0);--gray-400:oklch(62.68% 0 0);--gray-450:oklch(58.29% 0 0);--gray-500:oklch(53.48% 0 0);--gray-550:oklch(50.68% 0 0);--gray-600:oklch(47.84% 0 0);--gray-650:oklch(45.32% 0 0);--gray-700:oklch(42.76% 0 0);--gray-750:oklch(40.91% 0 0);--gray-800:oklch(39.04% 0 0);--gray-850:oklch(37.53% 0 0);--gray-900:oklch(25.2% 0 0);--gray-950:oklch(19.57% 0 0);--green-50:oklch(97.51% .0137 174.17);--green-100:oklch(93.57% .0355 172.13);--green-200:oklch(87.46% .0685 171.38);--green-300:oklch(81.82% .1016 168.83);--green-400:oklch(76.45% .1269 166.74);--green-500:oklch(71.57% .1459 163.25);--green-600:oklch(60.81% .1224 163.61);--green-700:oklch(49.5% .0987 163.58);--green-800:oklch(37.27% .0707 165.1);--green-900:oklch(24.2% .0423 166);--green-950:oklch(17.05% .0249 170.92);--purple-50:oklch(94.41% .0318 301.59);--purple-100:oklch(92.67% .0416 300.77);--purple-150:oklch(89.75% .0587 300.44);--purple-200:oklch(86.61% .0763 300.9);--purple-250:oklch(83.93% .0935 299.67);--purple-300:oklch(81.23% .1096 298.85);--purple-350:oklch(77.83% .1319 299.33);--purple-400:oklch(74.61% .1513 299.4);--purple-450:oklch(67.97% .1946 299.3);--purple-500:oklch(61.83% .2321 298.35);--purple-550:oklch(58.87% .2468 298.86);--purple-600:oklch(56.12% .2595 299.09);--purple-650:oklch(53.74% .2565 299.23);--purple-700:oklch(51.41% .2528 299.31);--purple-750:oklch(48.29% .2369 299.22);--purple-800:oklch(45.12% .2207 299.11);--purple-850:oklch(42.38% .2039 299.48);--purple-900:oklch(39.53% .1874 300.01);--purple-950:oklch(28.99% .1143 302.23);--red-50:oklch(97.79% .0107 17.34);--red-100:oklch(93.22% .0343 17.78);--red-200:oklch(87.3% .0678 18.54);--red-300:oklch(78.66% .1239 20.23);--red-400:oklch(70.44% .1872 23.19);--red-500:oklch(62.42% .2221 26.55);--red-600:oklch(54.12% .2073 27.82);--red-700:oklch(46.78% .1801 27.91);--red-800:oklch(40.6% .1549 27.74);--red-900:oklch(34.68% .1299 27.4);--red-950:oklch(23.35% .0854 27.01);--yellow-50:oklch(98.3% .0195 87.51);--yellow-100:oklch(95.27% .055 87.72);--yellow-200:oklch(88.68% .1314 87.06);--yellow-300:oklch(85.27% .1495 82.07);--yellow-400:oklch(80.59% .1651 72.87);--yellow-500:oklch(73.79% .175 58.17);--yellow-600:oklch(64.05% .1742 47.87);--yellow-700:oklch(53.61% .1626 40.82);--yellow-800:oklch(45.78% .1385 38.99);--yellow-900:oklch(40.03% .1182 38.42);--yellow-950:oklch(26.96% .0828 38.8)}:root,.light{--card-primary-background:var(--gray-50);--card-brand-primary-background:var(--purple-200);--surface-backdrop:oklch(from var(--gray-950) l c h / 50%);--primary-foreground:var(--black);--primary-foreground-muted:var(--gray-500);--foreground:var(--gray-900);--foreground-muted:var(--gray-500);--border:var(--gray-150);--focus:var(--purple-500);--foreground-accent:var(--gray-950);--card-accent:var(--gray-50);--surface:var(--white);--brand-foreground:var(--purple-950);--border-muted:var(--gray-100);--border-accent:var(--gray-200);--card-primary-accent:var(--gray-100);--effect-01:oklch(from var(--gray-950) l c h / 5%);--warning-foreground:var(--yellow-500);--info-foreground:var(--blue-500);--card-brand-primary-border:var(--purple-300);--card-brand-primary-foreground:var(--purple-950);--input-background:var(--gray-50);--card-brand-background:var(--purple-50);--card-brand-foreground:var(--purple-950);--card-brand-foreground-muted:oklch(from var(--purple-950) l c h / 80%);--card-brand-border:oklch(from var(--purple-950) l c h / 10%);--effect-02:oklch(from var(--gray-950) l c h / 10%);--brand-primary-foreground:var(--purple-950);--fader-01:var(--white);--fader-02:oklch(from var(--white) l c h / 0%);--destructive-primary-foreground:var(--red-600);--info-primary-foreground-background:var(--blue-50);--warning-primary-foreground:var(--yellow-50);--success-primary-foreground:var(--green-600);--data-teal:var(--blue-400);--data-purple:var(--purple-500);--data-magenta:var(--red-300);--data-teal-2:var(--blue-300);--data-purple-2:var(--purple-300);--data-magenta-2:var(--red-200);--card-border:var(--gray-150);--card-foreground:var(--gray-950);--card-foreground-muted:var(--gray-500);--data-indigo:var(--blue-600);--data-indigo-2:var(--blue-400);--brand-primary-background:var(--purple-200);--brand-primary-accent:var(--purple-300);--brand-primary-border:var(--purple-300);--background:var(--gray-50);--card-brand-secondary-foreground:var(--gray-50);--card-brand-secondary-foreground-muted:oklch(from var(--gray-50) l c h / 40%);--brand-background:var(--purple-50);--card-brand-secondary-background:var(--purple-950);--card-background:var(--white);--secondary-foreground:var(--gray-950);--secondary-foreground-muted:var(--gray-300);--secondary-border-accent:var(--gray-200);--secondary-border-muted:var(--gray-100);--secondary-background:var(--white);--secondary-border:var(--gray-150);--destructive-background:var(--red-50);--card-primary-foreground:var(--black);--card-primary-foreground-muted:oklch(from var(--gray-950) l c h / 60%);--card-primary-border:oklch(from var(--gray-950) l c h / 5%);--success-primary-background:var(--green-50);--button-brand-primary-accent:var(--purple-300);--button-brand-primary-foreground:var(--purple-950);--button-brand-primary-background:var(--purple-200);--button-destructive-accent:var(--red-800);--button-destructive-background:var(--red-700);--button-destructive-primary-foreground:var(--white);--button-primary-accent:var(--gray-900);--button-primary-foreground:var(--white);--button-primary-foreground-muted:var(--gray-300);--button-primary-muted:var(--gray-150);--button-primary-background:var(--black);--button-secondary-border-accent:var(--gray-200);--button-secondary-border:var(--gray-150);--button-secondary-border-muted:var(--gray-100);--button-secondary-foreground:var(--gray-950);--button-secondary-foreground-accent:var(--gray-850);--button-secondary-foreground-muted:var(--gray-300);--button-secondary-background:var(--white);--card-brand-secondary-border:oklch(from var(--gray-50) l c h / 10%);--card-brand-accent:var(--purple-50);--card-brand-border-accent:var(--purple-500);--brand-border:var(--purple-800);--input-foreground:var(--gray-500);--input-border:var(--gray-150);--input-border-accent:var(--purple-500);--input-foreground-accent:var(--gray-950);--input-foreground-muted:var(--gray-300);--input-destructive-background:var(--gray-50);--input-destructive-foreground:var(--gray-950);--input-destructive-foreground-accent:var(--red-700);--input-destructive-border:var(--red-700);--overlay:oklch(from var(--gray-950) l c h / 50%);--card-reversed-background:var(--black);--card-reversed-foreground:var(--gray-50);--card-reversed-foreground-muted:var(--gray-600);--brand-accent:var(--purple-500)}.dark{--card-primary-background:var(--gray-950);--card-brand-primary-background:var(--purple-800);--surface-backdrop:oklch(from var(--gray-950) l c h / 50%);--primary-foreground:var(--white);--primary-foreground-muted:var(--gray-400);--foreground:var(--gray-100);--foreground-muted:var(--gray-350);--border:var(--gray-900);--focus:var(--purple-400);--foreground-accent:var(--gray-50);--card-accent:var(--gray-950);--surface:var(--black);--brand-foreground:var(--purple-50);--border-muted:var(--gray-750);--border-accent:var(--gray-600);--card-primary-accent:var(--gray-900);--effect-01:oklch(from var(--gray-950) l c h / 50%);--warning-foreground:var(--yellow-500);--info-foreground:var(--blue-500);--card-brand-primary-border:var(--purple-600);--card-brand-primary-foreground:var(--purple-50);--input-background:var(--gray-950);--card-brand-background:var(--purple-950);--card-brand-foreground:var(--purple-50);--card-brand-foreground-muted:var(--purple-50);--card-brand-border:oklch(from var(--gray-50) l c h / 10%);--effect-02:oklch(from var(--gray-950) l c h / 80%);--brand-primary-foreground:var(--purple-50);--fader-01:var(--black);--fader-02:oklch(from var(--gray-950) l c h / 0%);--destructive-primary-foreground:var(--red-700);--info-primary-foreground-background:var(--blue-950);--warning-primary-foreground:var(--yellow-950);--success-primary-foreground:var(--green-500);--data-teal:var(--blue-200);--data-purple:var(--purple-400);--data-magenta:var(--red-400);--data-teal-2:var(--blue-600);--data-purple-2:var(--purple-600);--data-magenta-2:var(--red-500);--card-border:var(--gray-900);--card-foreground:var(--gray-50);--card-foreground-muted:var(--gray-400);--data-indigo:var(--blue-300);--data-indigo-2:var(--blue-700);--brand-primary-background:var(--purple-900);--brand-primary-accent:var(--purple-800);--brand-primary-border:var(--purple-700);--background:var(--gray-950);--card-brand-secondary-foreground:var(--purple-950);--card-brand-secondary-foreground-muted:oklch(from var(--purple-950) l c h / 40%);--brand-background:var(--purple-950);--card-brand-secondary-background:var(--purple-250);--card-background:var(--black);--secondary-foreground:var(--gray-50);--secondary-foreground-muted:var(--gray-500);--secondary-border-accent:var(--gray-850);--secondary-border-muted:var(--gray-900);--secondary-background:var(--black);--secondary-border:var(--gray-850);--destructive-background:var(--red-900);--card-primary-foreground:var(--white);--card-primary-foreground-muted:oklch(from var(--gray-50) l c h / 60%);--card-primary-border:oklch(from var(--gray-50) l c h / 5%);--success-primary-background:var(--green-900);--button-brand-primary-accent:var(--purple-400);--button-brand-primary-foreground:var(--purple-300);--button-brand-primary-background:var(--purple-500);--button-destructive-accent:var(--red-600);--button-destructive-background:var(--red-700);--button-destructive-primary-foreground:var(--white);--button-primary-accent:var(--gray-100);--button-primary-foreground:var(--black);--button-primary-foreground-muted:var(--gray-400);--button-primary-muted:var(--gray-850);--button-primary-background:var(--white);--button-secondary-border-accent:var(--gray-850);--button-secondary-border:var(--gray-900);--button-secondary-border-muted:var(--gray-900);--button-secondary-foreground:var(--gray-50);--button-secondary-foreground-accent:var(--gray-150);--button-secondary-foreground-muted:var(--gray-400);--button-secondary-background:var(--black);--card-brand-secondary-border:oklch(from var(--purple-950) l c h / 10%);--card-brand-accent:var(--purple-950);--card-brand-border-accent:var(--purple-500);--brand-border:var(--purple-500);--input-foreground:var(--gray-400);--input-border:var(--gray-900);--input-border-accent:var(--purple-500);--input-foreground-accent:var(--gray-50);--input-foreground-muted:var(--gray-600);--input-destructive-background:var(--gray-950);--input-destructive-foreground:var(--gray-50);--input-destructive-foreground-accent:var(--red-500);--input-destructive-border:var(--red-500);--overlay:oklch(from var(--gray-950) l c h / 80%);--card-reversed-background:var(--gray-900);--card-reversed-foreground:var(--gray-50);--card-reversed-foreground-muted:var(--gray-600);--brand-accent:var(--purple-500)}:root{--shadows-props-xs-x:0px;--shadows-props-xs-y:0px;--shadows-props-xs-blur:5px;--shadows-props-xs-spread:0px;--shadows-props-s-x:0px;--shadows-props-s-y:0px;--shadows-props-s-blur:10px;--shadows-props-s-spread:2px;--shadow-xs:var(--shadows-props-xs-x) var(--shadows-props-xs-y) var(--shadows-props-xs-blur) var(--shadows-props-xs-spread) var(--tw-shadow-color,var(--effect-01));--shadow-s:var(--shadows-props-s-x) var(--shadows-props-s-y) var(--shadows-props-s-blur) var(--shadows-props-s-spread) var(--tw-shadow-color,var(--effect-02))}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "@financedistrict/apps-tokens",
3
+ "version": "0.1.0",
4
+ "description": "Framework-neutral design tokens for FD apps. Generated from Figma, consumed as Tailwind v4 CSS.",
5
+ "license": "SEE LICENSE IN LICENSE",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/financedistrict-platform/fd-apps-design-system.git",
9
+ "directory": "packages/tokens"
10
+ },
11
+ "publishConfig": {
12
+ "registry": "https://registry.npmjs.org",
13
+ "access": "public"
14
+ },
15
+ "files": [
16
+ "src",
17
+ "dist"
18
+ ],
19
+ "exports": {
20
+ "./base.css": "./src/base.css",
21
+ "./theme.css": "./src/theme.css",
22
+ "./dist/tokens.css": "./dist/tokens.css"
23
+ },
24
+ "scripts": {
25
+ "build": "tailwindcss -i build/input.css -o dist/tokens.css --minify",
26
+ "verify": "tailwindcss -i verify/input.css -o verify/out.css && node verify/check.mjs"
27
+ },
28
+ "devDependencies": {
29
+ "@tailwindcss/cli": "^4.0.0",
30
+ "culori": "^4.0.2",
31
+ "tailwindcss": "^4.0.0"
32
+ }
33
+ }
package/src/base.css ADDED
@@ -0,0 +1,112 @@
1
+ /**
2
+ * Base palette — primitives. Generated from Figma `base-palette` (sRGB),
3
+ * reformatted to OKLCH via `scripts/hex-to-oklch.mjs`. Do not edit by hand.
4
+ */
5
+ :root {
6
+ --black: oklch(0.1448 0 0);
7
+ --white: oklch(1 0 0);
8
+ --acid-lime-50: oklch(0.9917 0.0339 110.58);
9
+ --acid-lime-100: oklch(0.9765 0.0827 115.88);
10
+ --acid-lime-200: oklch(0.967 0.131 115.05);
11
+ --acid-lime-300: oklch(0.9553 0.1664 117.79);
12
+ --acid-lime-400: oklch(0.914 0.2111 120.59);
13
+ --acid-lime-500: oklch(0.8358 0.2043 122.98);
14
+ --acid-lime-600: oklch(0.7051 0.1756 124.27);
15
+ --acid-lime-700: oklch(0.5751 0.1419 124.38);
16
+ --acid-lime-800: oklch(0.4848 0.1151 123.69);
17
+ --acid-lime-900: oklch(0.4322 0.0996 124.08);
18
+ --acid-lime-950: oklch(0.2937 0.0726 124.97);
19
+ --blue-50: oklch(0.9745 0.0079 253.85);
20
+ --blue-100: oklch(0.9456 0.0177 253.34);
21
+ --blue-200: oklch(0.8827 0.0379 249.5);
22
+ --blue-300: oklch(0.783 0.0723 248.14);
23
+ --blue-400: oklch(0.6305 0.1229 248.86);
24
+ --blue-500: oklch(0.5795 0.1257 249.53);
25
+ --blue-600: oklch(0.4933 0.1201 252.46);
26
+ --blue-700: oklch(0.4235 0.102 253.62);
27
+ --blue-800: oklch(0.3812 0.0841 252.86);
28
+ --blue-900: oklch(0.3443 0.069 254.34);
29
+ --blue-950: oklch(0.2629 0.0508 257.16);
30
+ --gold-50: oklch(0.9761 0.0041 91.45);
31
+ --gold-100: oklch(0.9417 0.0107 100.83);
32
+ --gold-200: oklch(0.8861 0.019 100.15);
33
+ --gold-300: oklch(0.8111 0.0317 98.95);
34
+ --gold-400: oklch(0.7248 0.0429 93.3);
35
+ --gold-500: oklch(0.6597 0.0476 88.52);
36
+ --gold-600: oklch(0.6125 0.0453 83.71);
37
+ --gold-700: oklch(0.5326 0.0366 76.09);
38
+ --gold-800: oklch(0.4674 0.0293 74.9);
39
+ --gold-900: oklch(0.4104 0.0241 77.01);
40
+ --gold-950: oklch(0.2717 0.0146 76.27);
41
+ --gray-50: oklch(0.9851 0 0);
42
+ --gray-100: oklch(0.9709 0.0011 17.18);
43
+ --gray-150: oklch(0.9439 0.0011 17.18);
44
+ --gray-200: oklch(0.8607 0 0);
45
+ --gray-250: oklch(0.8109 0 0);
46
+ --gray-300: oklch(0.7572 0 0);
47
+ --gray-350: oklch(0.6927 0 0);
48
+ --gray-400: oklch(0.6268 0 0);
49
+ --gray-450: oklch(0.5829 0 0);
50
+ --gray-500: oklch(0.5348 0 0);
51
+ --gray-550: oklch(0.5068 0 0);
52
+ --gray-600: oklch(0.4784 0 0);
53
+ --gray-650: oklch(0.4532 0 0);
54
+ --gray-700: oklch(0.4276 0 0);
55
+ --gray-750: oklch(0.4091 0 0);
56
+ --gray-800: oklch(0.3904 0 0);
57
+ --gray-850: oklch(0.3753 0 0);
58
+ --gray-900: oklch(0.252 0 0);
59
+ --gray-950: oklch(0.1957 0 0);
60
+ --green-50: oklch(0.9751 0.0137 174.17);
61
+ --green-100: oklch(0.9357 0.0355 172.13);
62
+ --green-200: oklch(0.8746 0.0685 171.38);
63
+ --green-300: oklch(0.8182 0.1016 168.83);
64
+ --green-400: oklch(0.7645 0.1269 166.74);
65
+ --green-500: oklch(0.7157 0.1459 163.25);
66
+ --green-600: oklch(0.6081 0.1224 163.61);
67
+ --green-700: oklch(0.495 0.0987 163.58);
68
+ --green-800: oklch(0.3727 0.0707 165.1);
69
+ --green-900: oklch(0.242 0.0423 166);
70
+ --green-950: oklch(0.1705 0.0249 170.92);
71
+ --purple-50: oklch(0.9441 0.0318 301.59);
72
+ --purple-100: oklch(0.9267 0.0416 300.77);
73
+ --purple-150: oklch(0.8975 0.0587 300.44);
74
+ --purple-200: oklch(0.8661 0.0763 300.9);
75
+ --purple-250: oklch(0.8393 0.0935 299.67);
76
+ --purple-300: oklch(0.8123 0.1096 298.85);
77
+ --purple-350: oklch(0.7783 0.1319 299.33);
78
+ --purple-400: oklch(0.7461 0.1513 299.4);
79
+ --purple-450: oklch(0.6797 0.1946 299.3);
80
+ --purple-500: oklch(0.6183 0.2321 298.35);
81
+ --purple-550: oklch(0.5887 0.2468 298.86);
82
+ --purple-600: oklch(0.5612 0.2595 299.09);
83
+ --purple-650: oklch(0.5374 0.2565 299.23);
84
+ --purple-700: oklch(0.5141 0.2528 299.31);
85
+ --purple-750: oklch(0.4829 0.2369 299.22);
86
+ --purple-800: oklch(0.4512 0.2207 299.11);
87
+ --purple-850: oklch(0.4238 0.2039 299.48);
88
+ --purple-900: oklch(0.3953 0.1874 300.01);
89
+ --purple-950: oklch(0.2899 0.1143 302.23);
90
+ --red-50: oklch(0.9779 0.0107 17.34);
91
+ --red-100: oklch(0.9322 0.0343 17.78);
92
+ --red-200: oklch(0.873 0.0678 18.54);
93
+ --red-300: oklch(0.7866 0.1239 20.23);
94
+ --red-400: oklch(0.7044 0.1872 23.19);
95
+ --red-500: oklch(0.6242 0.2221 26.55);
96
+ --red-600: oklch(0.5412 0.2073 27.82);
97
+ --red-700: oklch(0.4678 0.1801 27.91);
98
+ --red-800: oklch(0.406 0.1549 27.74);
99
+ --red-900: oklch(0.3468 0.1299 27.4);
100
+ --red-950: oklch(0.2335 0.0854 27.01);
101
+ --yellow-50: oklch(0.983 0.0195 87.51);
102
+ --yellow-100: oklch(0.9527 0.055 87.72);
103
+ --yellow-200: oklch(0.8868 0.1314 87.06);
104
+ --yellow-300: oklch(0.8527 0.1495 82.07);
105
+ --yellow-400: oklch(0.8059 0.1651 72.87);
106
+ --yellow-500: oklch(0.7379 0.175 58.17);
107
+ --yellow-600: oklch(0.6405 0.1742 47.87);
108
+ --yellow-700: oklch(0.5361 0.1626 40.82);
109
+ --yellow-800: oklch(0.4578 0.1385 38.99);
110
+ --yellow-900: oklch(0.4003 0.1182 38.42);
111
+ --yellow-950: oklch(0.2696 0.0828 38.8);
112
+ }
package/src/theme.css ADDED
@@ -0,0 +1,668 @@
1
+ /**
2
+ * Semantic theme tokens + Tailwind v4 registration. Generated from Figma.
3
+ * Do not edit by hand. Import order: tailwindcss -> this file.
4
+ */
5
+ @import "./base.css";
6
+
7
+ :root,
8
+ .light {
9
+ --card-primary-background: var(--gray-50);
10
+ --card-brand-primary-background: var(--purple-200);
11
+ --surface-backdrop: oklch(from var(--gray-950) l c h / 50%);
12
+ --primary-foreground: var(--black);
13
+ --primary-foreground-muted: var(--gray-500);
14
+ --foreground: var(--gray-900);
15
+ --foreground-muted: var(--gray-500);
16
+ --border: var(--gray-150);
17
+ --focus: var(--purple-500);
18
+ --foreground-accent: var(--gray-950);
19
+ --card-accent: var(--gray-50);
20
+ --surface: var(--white);
21
+ --brand-foreground: var(--purple-950);
22
+ --border-muted: var(--gray-100);
23
+ --border-accent: var(--gray-200);
24
+ --card-primary-accent: var(--gray-100);
25
+ --effect-01: oklch(from var(--gray-950) l c h / 5%);
26
+ --warning-foreground: var(--yellow-500);
27
+ --info-foreground: var(--blue-500);
28
+ --card-brand-primary-border: var(--purple-300);
29
+ --card-brand-primary-foreground: var(--purple-950);
30
+ --input-background: var(--gray-50);
31
+ --card-brand-background: var(--purple-50);
32
+ --card-brand-foreground: var(--purple-950);
33
+ --card-brand-foreground-muted: oklch(from var(--purple-950) l c h / 80%);
34
+ --card-brand-border: oklch(from var(--purple-950) l c h / 10%);
35
+ --effect-02: oklch(from var(--gray-950) l c h / 10%);
36
+ --brand-primary-foreground: var(--purple-950);
37
+ --fader-01: var(--white);
38
+ --fader-02: oklch(from var(--white) l c h / 0%);
39
+ --destructive-primary-foreground: var(--red-600);
40
+ --info-primary-foreground-background: var(--blue-50);
41
+ --warning-primary-foreground: var(--yellow-50);
42
+ --success-primary-foreground: var(--green-600);
43
+ --data-teal: var(--blue-400);
44
+ --data-purple: var(--purple-500);
45
+ --data-magenta: var(--red-300);
46
+ --data-teal-2: var(--blue-300);
47
+ --data-purple-2: var(--purple-300);
48
+ --data-magenta-2: var(--red-200);
49
+ --card-border: var(--gray-150);
50
+ --card-foreground: var(--gray-950);
51
+ --card-foreground-muted: var(--gray-500);
52
+ --data-indigo: var(--blue-600);
53
+ --data-indigo-2: var(--blue-400);
54
+ --brand-primary-background: var(--purple-200);
55
+ --brand-primary-accent: var(--purple-300);
56
+ --brand-primary-border: var(--purple-300);
57
+ --background: var(--gray-50);
58
+ --card-brand-secondary-foreground: var(--gray-50);
59
+ --card-brand-secondary-foreground-muted: oklch(from var(--gray-50) l c h / 40%);
60
+ --brand-background: var(--purple-50);
61
+ --card-brand-secondary-background: var(--purple-950);
62
+ --card-background: var(--white);
63
+ --secondary-foreground: var(--gray-950);
64
+ --secondary-foreground-muted: var(--gray-300);
65
+ --secondary-border-accent: var(--gray-200);
66
+ --secondary-border-muted: var(--gray-100);
67
+ --secondary-background: var(--white);
68
+ --secondary-border: var(--gray-150);
69
+ --destructive-background: var(--red-50);
70
+ --card-primary-foreground: var(--black);
71
+ --card-primary-foreground-muted: oklch(from var(--gray-950) l c h / 60%);
72
+ --card-primary-border: oklch(from var(--gray-950) l c h / 5%);
73
+ --success-primary-background: var(--green-50);
74
+ --button-brand-primary-accent: var(--purple-300);
75
+ --button-brand-primary-foreground: var(--purple-950);
76
+ --button-brand-primary-background: var(--purple-200);
77
+ --button-destructive-accent: var(--red-800);
78
+ --button-destructive-background: var(--red-700);
79
+ --button-destructive-primary-foreground: var(--white);
80
+ --button-primary-accent: var(--gray-900);
81
+ --button-primary-foreground: var(--white);
82
+ --button-primary-foreground-muted: var(--gray-300);
83
+ --button-primary-muted: var(--gray-150);
84
+ --button-primary-background: var(--black);
85
+ --button-secondary-border-accent: var(--gray-200);
86
+ --button-secondary-border: var(--gray-150);
87
+ --button-secondary-border-muted: var(--gray-100);
88
+ --button-secondary-foreground: var(--gray-950);
89
+ --button-secondary-foreground-accent: var(--gray-850);
90
+ --button-secondary-foreground-muted: var(--gray-300);
91
+ --button-secondary-background: var(--white);
92
+ --card-brand-secondary-border: oklch(from var(--gray-50) l c h / 10%);
93
+ --card-brand-accent: var(--purple-50);
94
+ --card-brand-border-accent: var(--purple-500);
95
+ --brand-border: var(--purple-800);
96
+ --input-foreground: var(--gray-500);
97
+ --input-border: var(--gray-150);
98
+ --input-border-accent: var(--purple-500);
99
+ --input-foreground-accent: var(--gray-950);
100
+ --input-foreground-muted: var(--gray-300);
101
+ --input-destructive-background: var(--gray-50);
102
+ --input-destructive-foreground: var(--gray-950);
103
+ --input-destructive-foreground-accent: var(--red-700);
104
+ --input-destructive-border: var(--red-700);
105
+ --overlay: oklch(from var(--gray-950) l c h / 50%);
106
+ --card-reversed-background: var(--black);
107
+ --card-reversed-foreground: var(--gray-50);
108
+ --card-reversed-foreground-muted: var(--gray-600);
109
+ --brand-accent: var(--purple-500);
110
+ }
111
+
112
+ .dark {
113
+ --card-primary-background: var(--gray-950);
114
+ --card-brand-primary-background: var(--purple-800);
115
+ --surface-backdrop: oklch(from var(--gray-950) l c h / 50%);
116
+ --primary-foreground: var(--white);
117
+ --primary-foreground-muted: var(--gray-400);
118
+ --foreground: var(--gray-100);
119
+ --foreground-muted: var(--gray-350);
120
+ --border: var(--gray-900);
121
+ --focus: var(--purple-400);
122
+ --foreground-accent: var(--gray-50);
123
+ --card-accent: var(--gray-950);
124
+ --surface: var(--black);
125
+ --brand-foreground: var(--purple-50);
126
+ --border-muted: var(--gray-750);
127
+ --border-accent: var(--gray-600);
128
+ --card-primary-accent: var(--gray-900);
129
+ --effect-01: oklch(from var(--gray-950) l c h / 50%);
130
+ --warning-foreground: var(--yellow-500);
131
+ --info-foreground: var(--blue-500);
132
+ --card-brand-primary-border: var(--purple-600);
133
+ --card-brand-primary-foreground: var(--purple-50);
134
+ --input-background: var(--gray-950);
135
+ --card-brand-background: var(--purple-950);
136
+ --card-brand-foreground: var(--purple-50);
137
+ --card-brand-foreground-muted: var(--purple-50);
138
+ --card-brand-border: oklch(from var(--gray-50) l c h / 10%);
139
+ --effect-02: oklch(from var(--gray-950) l c h / 80%);
140
+ --brand-primary-foreground: var(--purple-50);
141
+ --fader-01: var(--black);
142
+ --fader-02: oklch(from var(--gray-950) l c h / 0%);
143
+ --destructive-primary-foreground: var(--red-700);
144
+ --info-primary-foreground-background: var(--blue-950);
145
+ --warning-primary-foreground: var(--yellow-950);
146
+ --success-primary-foreground: var(--green-500);
147
+ --data-teal: var(--blue-200);
148
+ --data-purple: var(--purple-400);
149
+ --data-magenta: var(--red-400);
150
+ --data-teal-2: var(--blue-600);
151
+ --data-purple-2: var(--purple-600);
152
+ --data-magenta-2: var(--red-500);
153
+ --card-border: var(--gray-900);
154
+ --card-foreground: var(--gray-50);
155
+ --card-foreground-muted: var(--gray-400);
156
+ --data-indigo: var(--blue-300);
157
+ --data-indigo-2: var(--blue-700);
158
+ --brand-primary-background: var(--purple-900);
159
+ --brand-primary-accent: var(--purple-800);
160
+ --brand-primary-border: var(--purple-700);
161
+ --background: var(--gray-950);
162
+ --card-brand-secondary-foreground: var(--purple-950);
163
+ --card-brand-secondary-foreground-muted: oklch(from var(--purple-950) l c h / 40%);
164
+ --brand-background: var(--purple-950);
165
+ --card-brand-secondary-background: var(--purple-250);
166
+ --card-background: var(--black);
167
+ --secondary-foreground: var(--gray-50);
168
+ --secondary-foreground-muted: var(--gray-500);
169
+ --secondary-border-accent: var(--gray-850);
170
+ --secondary-border-muted: var(--gray-900);
171
+ --secondary-background: var(--black);
172
+ --secondary-border: var(--gray-850);
173
+ --destructive-background: var(--red-900);
174
+ --card-primary-foreground: var(--white);
175
+ --card-primary-foreground-muted: oklch(from var(--gray-50) l c h / 60%);
176
+ --card-primary-border: oklch(from var(--gray-50) l c h / 5%);
177
+ --success-primary-background: var(--green-900);
178
+ --button-brand-primary-accent: var(--purple-400);
179
+ --button-brand-primary-foreground: var(--purple-300);
180
+ --button-brand-primary-background: var(--purple-500);
181
+ --button-destructive-accent: var(--red-600);
182
+ --button-destructive-background: var(--red-700);
183
+ --button-destructive-primary-foreground: var(--white);
184
+ --button-primary-accent: var(--gray-100);
185
+ --button-primary-foreground: var(--black);
186
+ --button-primary-foreground-muted: var(--gray-400);
187
+ --button-primary-muted: var(--gray-850);
188
+ --button-primary-background: var(--white);
189
+ --button-secondary-border-accent: var(--gray-850);
190
+ --button-secondary-border: var(--gray-900);
191
+ --button-secondary-border-muted: var(--gray-900);
192
+ --button-secondary-foreground: var(--gray-50);
193
+ --button-secondary-foreground-accent: var(--gray-150);
194
+ --button-secondary-foreground-muted: var(--gray-400);
195
+ --button-secondary-background: var(--black);
196
+ --card-brand-secondary-border: oklch(from var(--purple-950) l c h / 10%);
197
+ --card-brand-accent: var(--purple-950);
198
+ --card-brand-border-accent: var(--purple-500);
199
+ --brand-border: var(--purple-500);
200
+ --input-foreground: var(--gray-400);
201
+ --input-border: var(--gray-900);
202
+ --input-border-accent: var(--purple-500);
203
+ --input-foreground-accent: var(--gray-50);
204
+ --input-foreground-muted: var(--gray-600);
205
+ --input-destructive-background: var(--gray-950);
206
+ --input-destructive-foreground: var(--gray-50);
207
+ --input-destructive-foreground-accent: var(--red-500);
208
+ --input-destructive-border: var(--red-500);
209
+ --overlay: oklch(from var(--gray-950) l c h / 80%);
210
+ --card-reversed-background: var(--gray-900);
211
+ --card-reversed-foreground: var(--gray-50);
212
+ --card-reversed-foreground-muted: var(--gray-600);
213
+ --brand-accent: var(--purple-500);
214
+ }
215
+
216
+ /* Register semantic colors as Tailwind utilities (theme-switch aware) */
217
+ @theme inline {
218
+ --color-card-primary-background: var(--card-primary-background);
219
+ --color-card-brand-primary-background: var(--card-brand-primary-background);
220
+ --color-surface-backdrop: var(--surface-backdrop);
221
+ --color-primary-foreground: var(--primary-foreground);
222
+ --color-primary-foreground-muted: var(--primary-foreground-muted);
223
+ --color-foreground: var(--foreground);
224
+ --color-foreground-muted: var(--foreground-muted);
225
+ --color-border: var(--border);
226
+ --color-focus: var(--focus);
227
+ --color-foreground-accent: var(--foreground-accent);
228
+ --color-card-accent: var(--card-accent);
229
+ --color-surface: var(--surface);
230
+ --color-brand-foreground: var(--brand-foreground);
231
+ --color-border-muted: var(--border-muted);
232
+ --color-border-accent: var(--border-accent);
233
+ --color-card-primary-accent: var(--card-primary-accent);
234
+ --color-effect-01: var(--effect-01);
235
+ --color-warning-foreground: var(--warning-foreground);
236
+ --color-info-foreground: var(--info-foreground);
237
+ --color-card-brand-primary-border: var(--card-brand-primary-border);
238
+ --color-card-brand-primary-foreground: var(--card-brand-primary-foreground);
239
+ --color-input-background: var(--input-background);
240
+ --color-card-brand-background: var(--card-brand-background);
241
+ --color-card-brand-foreground: var(--card-brand-foreground);
242
+ --color-card-brand-foreground-muted: var(--card-brand-foreground-muted);
243
+ --color-card-brand-border: var(--card-brand-border);
244
+ --color-effect-02: var(--effect-02);
245
+ --color-brand-primary-foreground: var(--brand-primary-foreground);
246
+ --color-fader-01: var(--fader-01);
247
+ --color-fader-02: var(--fader-02);
248
+ --color-destructive-primary-foreground: var(--destructive-primary-foreground);
249
+ --color-info-primary-foreground-background: var(--info-primary-foreground-background);
250
+ --color-warning-primary-foreground: var(--warning-primary-foreground);
251
+ --color-success-primary-foreground: var(--success-primary-foreground);
252
+ --color-data-teal: var(--data-teal);
253
+ --color-data-purple: var(--data-purple);
254
+ --color-data-magenta: var(--data-magenta);
255
+ --color-data-teal-2: var(--data-teal-2);
256
+ --color-data-purple-2: var(--data-purple-2);
257
+ --color-data-magenta-2: var(--data-magenta-2);
258
+ --color-card-border: var(--card-border);
259
+ --color-card-foreground: var(--card-foreground);
260
+ --color-card-foreground-muted: var(--card-foreground-muted);
261
+ --color-data-indigo: var(--data-indigo);
262
+ --color-data-indigo-2: var(--data-indigo-2);
263
+ --color-brand-primary-background: var(--brand-primary-background);
264
+ --color-brand-primary-accent: var(--brand-primary-accent);
265
+ --color-brand-primary-border: var(--brand-primary-border);
266
+ --color-background: var(--background);
267
+ --color-card-brand-secondary-foreground: var(--card-brand-secondary-foreground);
268
+ --color-card-brand-secondary-foreground-muted: var(--card-brand-secondary-foreground-muted);
269
+ --color-brand-background: var(--brand-background);
270
+ --color-card-brand-secondary-background: var(--card-brand-secondary-background);
271
+ --color-card-background: var(--card-background);
272
+ --color-secondary-foreground: var(--secondary-foreground);
273
+ --color-secondary-foreground-muted: var(--secondary-foreground-muted);
274
+ --color-secondary-border-accent: var(--secondary-border-accent);
275
+ --color-secondary-border-muted: var(--secondary-border-muted);
276
+ --color-secondary-background: var(--secondary-background);
277
+ --color-secondary-border: var(--secondary-border);
278
+ --color-destructive-background: var(--destructive-background);
279
+ --color-card-primary-foreground: var(--card-primary-foreground);
280
+ --color-card-primary-foreground-muted: var(--card-primary-foreground-muted);
281
+ --color-card-primary-border: var(--card-primary-border);
282
+ --color-success-primary-background: var(--success-primary-background);
283
+ --color-button-brand-primary-accent: var(--button-brand-primary-accent);
284
+ --color-button-brand-primary-foreground: var(--button-brand-primary-foreground);
285
+ --color-button-brand-primary-background: var(--button-brand-primary-background);
286
+ --color-button-destructive-accent: var(--button-destructive-accent);
287
+ --color-button-destructive-background: var(--button-destructive-background);
288
+ --color-button-destructive-primary-foreground: var(--button-destructive-primary-foreground);
289
+ --color-button-primary-accent: var(--button-primary-accent);
290
+ --color-button-primary-foreground: var(--button-primary-foreground);
291
+ --color-button-primary-foreground-muted: var(--button-primary-foreground-muted);
292
+ --color-button-primary-muted: var(--button-primary-muted);
293
+ --color-button-primary-background: var(--button-primary-background);
294
+ --color-button-secondary-border-accent: var(--button-secondary-border-accent);
295
+ --color-button-secondary-border: var(--button-secondary-border);
296
+ --color-button-secondary-border-muted: var(--button-secondary-border-muted);
297
+ --color-button-secondary-foreground: var(--button-secondary-foreground);
298
+ --color-button-secondary-foreground-accent: var(--button-secondary-foreground-accent);
299
+ --color-button-secondary-foreground-muted: var(--button-secondary-foreground-muted);
300
+ --color-button-secondary-background: var(--button-secondary-background);
301
+ --color-card-brand-secondary-border: var(--card-brand-secondary-border);
302
+ --color-card-brand-accent: var(--card-brand-accent);
303
+ --color-card-brand-border-accent: var(--card-brand-border-accent);
304
+ --color-brand-border: var(--brand-border);
305
+ --color-input-foreground: var(--input-foreground);
306
+ --color-input-border: var(--input-border);
307
+ --color-input-border-accent: var(--input-border-accent);
308
+ --color-input-foreground-accent: var(--input-foreground-accent);
309
+ --color-input-foreground-muted: var(--input-foreground-muted);
310
+ --color-input-destructive-background: var(--input-destructive-background);
311
+ --color-input-destructive-foreground: var(--input-destructive-foreground);
312
+ --color-input-destructive-foreground-accent: var(--input-destructive-foreground-accent);
313
+ --color-input-destructive-border: var(--input-destructive-border);
314
+ --color-overlay: var(--overlay);
315
+ --color-card-reversed-background: var(--card-reversed-background);
316
+ --color-card-reversed-foreground: var(--card-reversed-foreground);
317
+ --color-card-reversed-foreground-muted: var(--card-reversed-foreground-muted);
318
+ --color-brand-accent: var(--brand-accent);
319
+ }
320
+
321
+ /* Static scales — grouped by type. Values from Figma `theme-values`. */
322
+ @theme {
323
+ /* Font family — the `--font-archivo` / `--font-chakra-petch` vars are
324
+ injected by the app's `next/font/google` loader (see @financedistrict-platform/components
325
+ `fonts.ts`); literal names + system stacks are the fallback. */
326
+ --font-sans: var(--font-archivo), "Archivo", ui-sans-serif, system-ui, sans-serif;
327
+ --font-mono: var(--font-chakra-petch), "Chakra Petch", ui-monospace, SFMono-Regular, monospace;
328
+ --font-caption: var(--font-chakra-petch), "Chakra Petch", ui-monospace, SFMono-Regular, monospace;
329
+
330
+ /* Font style */
331
+ --font-style-italic: italic;
332
+ --font-style-not-italic: normal;
333
+
334
+ /* Font weight */
335
+ --font-weight-thin: 100;
336
+ --font-weight-extralight: 200;
337
+ --font-weight-light: 300;
338
+ --font-weight-normal: 400;
339
+ --font-weight-medium: 500;
340
+ --font-weight-semibold: 600;
341
+ --font-weight-bold: 700;
342
+ --font-weight-extrabold: 800;
343
+ --font-weight-black: 900;
344
+
345
+ /* Font size (text) */
346
+ --text-2xs: 10px;
347
+ --text-xs: 12px;
348
+ --text-sm: 14px;
349
+ --text-base: 16px;
350
+ --text-lg: 18px;
351
+ --text-xl: 20px;
352
+ --text-2xl: 24px;
353
+ --text-3xl: 32px;
354
+ --text-4xl: 36px;
355
+ --text-5xl: 40px;
356
+
357
+ /* Letter spacing (tracking) */
358
+ --tracking-tightest: -2px;
359
+ --tracking-tighter: -1.5px;
360
+ --tracking-tight: -1px;
361
+ --tracking-normal: 0px;
362
+ --tracking-wide: 1px;
363
+ --tracking-wider: 1.5px;
364
+ --tracking-widest: 2px;
365
+
366
+ /* Line height (leading) */
367
+ --leading-3: 12px;
368
+ --leading-4: 16px;
369
+ --leading-5: 20px;
370
+ --leading-6: 24px;
371
+ --leading-7: 28px;
372
+ --leading-8: 32px;
373
+ --leading-9: 36px;
374
+ --leading-10: 44px;
375
+
376
+ /* Border radius (rem; = px÷16 at the 16px root — matches Figma at default) */
377
+ --radius-none: 0rem;
378
+ --radius-xs: 0.125rem;
379
+ --radius-sm: 0.25rem;
380
+ --radius-md: 0.375rem;
381
+ --radius-lg: 0.5rem;
382
+ --radius-xl: 0.75rem;
383
+ --radius-2xl: 1rem;
384
+ --radius-3xl: 1.5rem;
385
+ --radius-4xl: 2rem;
386
+ --radius-5xl: 2.5rem;
387
+ --radius-full: 9999px;
388
+
389
+ /* Spacing — Figma's spacing is a linear scale; the base multiplier
390
+ reproduces every step exactly (p-1=0.25rem=4px … p-96=24rem=384px),
391
+ including the fractional (0.5/1.5/2.5/3.5) and auto-generated negatives. */
392
+ --spacing: 0.25rem;
393
+
394
+ /* Breakpoints (overrides Tailwind defaults; note 2xl = 1440px) */
395
+ --breakpoint-sm: 640px;
396
+ --breakpoint-md: 768px;
397
+ --breakpoint-lg: 1024px;
398
+ --breakpoint-xl: 1280px;
399
+ --breakpoint-2xl: 1440px;
400
+
401
+ /* Containers (rem) */
402
+ --container-0: 0rem;
403
+ --container-5xs: 5.25rem;
404
+ --container-4xs: 13rem;
405
+ --container-3xs: 15.25rem;
406
+ --container-2xs: 18rem;
407
+ --container-xs: 20rem;
408
+ --container-sm: 24rem;
409
+ --container-md: 28rem;
410
+ --container-lg: 32rem;
411
+ --container-xl: 37.5rem;
412
+ --container-2xl: 42rem;
413
+ --container-3xl: 48rem;
414
+ --container-4xl: 56.25rem;
415
+ --container-5xl: 64rem;
416
+ --container-6xl: 72rem;
417
+ --container-7xl: 80rem;
418
+
419
+ /* Blur */
420
+ --blur-none: 0px;
421
+ --blur-xs: 4px;
422
+ --blur-sm: 8px;
423
+ --blur-md: 12px;
424
+ --blur-lg: 16px;
425
+ --blur-xl: 24px;
426
+ --blur-2xl: 40px;
427
+ --blur-3xl: 64px;
428
+
429
+ /* Border width */
430
+ --border-width-0: 0px;
431
+ --border-width-1: 1px;
432
+ --border-width-2: 2px;
433
+ --border-width-3: 3px;
434
+ --border-width-4: 4px;
435
+ --border-width-8: 8px;
436
+
437
+ /* Skew */
438
+ --skew-0: 0deg;
439
+ --skew-1: 1deg;
440
+ --skew-2: 2deg;
441
+ --skew-3: 3deg;
442
+ --skew-6: 6deg;
443
+ --skew-12: 12deg;
444
+
445
+ /* Opacity (0–1; Tailwind also generates opacity-0..100 dynamically) */
446
+ --opacity-0: 0;
447
+ --opacity-5: 0.05;
448
+ --opacity-10: 0.1;
449
+ --opacity-15: 0.15;
450
+ --opacity-20: 0.2;
451
+ --opacity-25: 0.25;
452
+ --opacity-30: 0.3;
453
+ --opacity-35: 0.35;
454
+ --opacity-40: 0.4;
455
+ --opacity-45: 0.45;
456
+ --opacity-50: 0.5;
457
+ --opacity-55: 0.55;
458
+ --opacity-60: 0.6;
459
+ --opacity-65: 0.65;
460
+ --opacity-70: 0.7;
461
+ --opacity-75: 0.75;
462
+ --opacity-80: 0.8;
463
+ --opacity-85: 0.85;
464
+ --opacity-90: 0.9;
465
+ --opacity-95: 0.95;
466
+ --opacity-100: 1;
467
+ }
468
+
469
+ /* Shadow scale — from Figma effect styles `shadow/s`, `shadow/xs`.
470
+ Color stops (`--effect-01`/`--effect-02`) are theme-mode-aware. */
471
+ :root {
472
+ --shadows-props-xs-x: 0px;
473
+ --shadows-props-xs-y: 0px;
474
+ --shadows-props-xs-blur: 5px;
475
+ --shadows-props-xs-spread: 0px;
476
+ --shadows-props-s-x: 0px;
477
+ --shadows-props-s-y: 0px;
478
+ --shadows-props-s-blur: 10px;
479
+ --shadows-props-s-spread: 2px;
480
+ --shadow-xs: var(--shadows-props-xs-x) var(--shadows-props-xs-y)
481
+ var(--shadows-props-xs-blur) var(--shadows-props-xs-spread)
482
+ var(--tw-shadow-color, var(--effect-01));
483
+ --shadow-s: var(--shadows-props-s-x) var(--shadows-props-s-y)
484
+ var(--shadows-props-s-blur) var(--shadows-props-s-spread)
485
+ var(--tw-shadow-color, var(--effect-02));
486
+ }
487
+
488
+ /* Shadow utilities (override Tailwind's default shadow-xs with our scale) */
489
+ @utility shadow-xs {
490
+ box-shadow: var(--shadow-xs);
491
+ }
492
+ @utility shadow-s {
493
+ box-shadow: var(--shadow-s);
494
+ }
495
+
496
+ /* Fader (scrim) — from Figma paint style `fader-lg`: transparent → solid,
497
+ theme-aware via --fader-02 (transparent stop) / --fader-01 (solid stop). */
498
+ @utility fader-b {
499
+ background-image: linear-gradient(to bottom, var(--fader-02), var(--fader-01));
500
+ }
501
+ @utility fader-t {
502
+ background-image: linear-gradient(to top, var(--fader-02), var(--fader-01));
503
+ }
504
+
505
+ /* Composite type styles — from Figma text styles. Each mirrors a Figma text
506
+ style and is fully token-bound (font / size / leading / tracking / weight). */
507
+ @utility display-01 {
508
+ font-family: var(--font-sans);
509
+ font-size: var(--text-5xl);
510
+ line-height: var(--leading-10);
511
+ letter-spacing: var(--tracking-tightest);
512
+ font-weight: var(--font-weight-medium);
513
+ }
514
+ @utility display-02 {
515
+ font-family: var(--font-sans);
516
+ font-size: var(--text-3xl);
517
+ line-height: var(--leading-9);
518
+ letter-spacing: var(--tracking-tightest);
519
+ font-weight: var(--font-weight-medium);
520
+ }
521
+ @utility display-03 {
522
+ font-family: var(--font-sans);
523
+ font-size: var(--text-2xl);
524
+ line-height: var(--leading-7);
525
+ letter-spacing: var(--tracking-tight);
526
+ font-weight: var(--font-weight-medium);
527
+ }
528
+ @utility display-04 {
529
+ font-family: var(--font-sans);
530
+ font-size: var(--text-xl);
531
+ line-height: var(--leading-6);
532
+ letter-spacing: var(--tracking-normal);
533
+ font-weight: var(--font-weight-medium);
534
+ }
535
+ @utility body-01 {
536
+ font-family: var(--font-sans);
537
+ font-size: var(--text-lg);
538
+ line-height: var(--leading-6);
539
+ letter-spacing: var(--tracking-normal);
540
+ font-weight: var(--font-weight-normal);
541
+ }
542
+ @utility body-01-medium {
543
+ font-family: var(--font-sans);
544
+ font-size: var(--text-lg);
545
+ line-height: var(--leading-6);
546
+ letter-spacing: var(--tracking-normal);
547
+ font-weight: var(--font-weight-medium);
548
+ }
549
+ @utility body-02 {
550
+ font-family: var(--font-sans);
551
+ font-size: var(--text-base);
552
+ line-height: var(--leading-6);
553
+ letter-spacing: var(--tracking-normal);
554
+ font-weight: var(--font-weight-normal);
555
+ }
556
+ @utility body-02-medium {
557
+ font-family: var(--font-sans);
558
+ font-size: var(--text-base);
559
+ line-height: var(--leading-6);
560
+ letter-spacing: var(--tracking-normal);
561
+ font-weight: var(--font-weight-medium);
562
+ }
563
+ @utility body-03 {
564
+ font-family: var(--font-sans);
565
+ font-size: var(--text-sm);
566
+ line-height: var(--leading-5);
567
+ letter-spacing: var(--tracking-normal);
568
+ font-weight: var(--font-weight-normal);
569
+ }
570
+ @utility body-03-medium {
571
+ font-family: var(--font-sans);
572
+ font-size: var(--text-sm);
573
+ line-height: var(--leading-5);
574
+ letter-spacing: var(--tracking-normal);
575
+ font-weight: var(--font-weight-medium);
576
+ }
577
+ @utility body-04 {
578
+ font-family: var(--font-sans);
579
+ font-size: var(--text-xs);
580
+ line-height: var(--leading-4);
581
+ letter-spacing: var(--tracking-normal);
582
+ font-weight: var(--font-weight-normal);
583
+ }
584
+ @utility body-mono-02-medium {
585
+ font-family: var(--font-mono);
586
+ font-size: var(--text-base);
587
+ line-height: var(--leading-5);
588
+ letter-spacing: var(--tracking-normal);
589
+ font-weight: var(--font-weight-medium);
590
+ }
591
+ @utility body-mono-03 {
592
+ font-family: var(--font-mono);
593
+ font-size: var(--text-sm);
594
+ line-height: var(--leading-5);
595
+ letter-spacing: var(--tracking-normal);
596
+ font-weight: var(--font-weight-normal);
597
+ }
598
+ @utility body-mono-04 {
599
+ font-family: var(--font-mono);
600
+ font-size: var(--text-xs);
601
+ line-height: var(--leading-4);
602
+ letter-spacing: var(--tracking-normal);
603
+ font-weight: var(--font-weight-normal);
604
+ }
605
+ @utility caption-01 {
606
+ font-family: var(--font-caption);
607
+ font-size: var(--text-base);
608
+ line-height: var(--leading-6);
609
+ letter-spacing: var(--tracking-normal);
610
+ font-weight: var(--font-weight-normal);
611
+ }
612
+ @utility caption-02-medium {
613
+ font-family: var(--font-caption);
614
+ font-size: var(--text-sm);
615
+ line-height: var(--leading-5);
616
+ letter-spacing: var(--tracking-normal);
617
+ font-weight: var(--font-weight-medium);
618
+ }
619
+ @utility caption-02-semibold {
620
+ font-family: var(--font-caption);
621
+ font-size: var(--text-sm);
622
+ line-height: var(--leading-5);
623
+ letter-spacing: var(--tracking-normal);
624
+ font-weight: var(--font-weight-semibold);
625
+ }
626
+ @utility caption-03-medium {
627
+ font-family: var(--font-caption);
628
+ font-size: var(--text-xs);
629
+ line-height: var(--leading-4);
630
+ letter-spacing: var(--tracking-normal);
631
+ font-weight: var(--font-weight-medium);
632
+ }
633
+ @utility button-01 {
634
+ font-family: var(--font-sans);
635
+ font-size: var(--text-sm);
636
+ line-height: var(--leading-5);
637
+ letter-spacing: var(--tracking-normal);
638
+ font-weight: var(--font-weight-medium);
639
+ }
640
+
641
+ /* Element defaults — low-specificity, so any app utility overrides them.
642
+ Gives all FD webapps a shared baseline (headings → display styles). */
643
+ @layer base {
644
+ *,
645
+ ::after,
646
+ ::before {
647
+ border-color: var(--border);
648
+ outline-color: var(--focus);
649
+ }
650
+ body {
651
+ background-color: var(--background);
652
+ color: var(--foreground);
653
+ font-family: var(--font-sans);
654
+ -webkit-font-smoothing: antialiased;
655
+ }
656
+ h1 {
657
+ @apply display-01;
658
+ }
659
+ h2 {
660
+ @apply display-02;
661
+ }
662
+ h3 {
663
+ @apply display-03;
664
+ }
665
+ h4 {
666
+ @apply display-04;
667
+ }
668
+ }