@novie/ui 0.1.0

package/src/index.css

@@ -0,0 +1,986 @@
+@import "@fontsource-variable/google-sans-flex";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*,
+::before,
+::after {
+  font-family: 'Google Sans Flex Variable', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
+}
+
+/*
+ * Novie Design System — Color Tokens
+ * Source: Figma file 7gGNjg9EKbHtiB2fyuljQe, node 361:21232
+ * Format: HSL values without hsl() wrapper (shadcn/Next.js convention)
+ *
+ * Token layers:
+ *   Palette  → raw color scales (fern-600, gray-900, red-500 …)
+ *   Semantic → purpose-based aliases that reference the palette
+ *
+ * Annotation format:
+ *   semantic: <Figma semantic token>  ←  palette: <Figma palette source>  hex: <value>
+ *
+ * Usage in tailwind.config.ts:
+ *   primary: { DEFAULT: "hsl(var(--primary))" }
+ */
+
+:root {
+  /* ========================================
+   * SEMANTIC TOKENS
+   * ======================================== */
+
+  /* --- Surfaces --- */
+  --background: 0 0% 100%;
+  /* semantic: surface/default           ← palette: white          hex: #ffffff */
+  --foreground: 0 0% 20%;
+  /* semantic: text/primary/default      ← palette: neutral-900    hex: #333333 */
+  --card: 0 0% 100%;
+  /* semantic: surface/default           ← palette: white          hex: #ffffff */
+  --card-foreground: 0 0% 20%;
+  /* semantic: text/primary/default      ← palette: neutral-900    hex: #333333 */
+  --popover: 0 0% 100%;
+  /* semantic: surface/default           ← palette: white          hex: #ffffff */
+  --popover-foreground: 0 0% 20%;
+  /* semantic: text/primary/default      ← palette: neutral-900    hex: #333333 */
+
+  /* --- Primary (pure black / white) --- */
+  --primary: 0 0% 0%;
+  /* semantic: bg/primary/default        ← palette: gray-900       hex: #000000 */
+  --primary-foreground: 0 0% 100%;
+  /* semantic: button/primary/text       ← palette: white          hex: #ffffff */
+  --primary-secondary: 200 12% 95.1%;
+  /* semantic: bg/primary/secondary     ← palette: gray-100       hex: #f1f3f4 */
+  --primary-tertiary: 0 0% 89.8%;
+  /* semantic: bg/primary/tertiary       ← palette: gray-200       hex: #e5e5e5 */
+
+  /* --- Secondary --- */
+  --secondary: 200 12% 95.1%;
+  /* semantic: bg/primary/secondary      ← palette: gray-100       hex: #f1f3f4 */
+  --secondary-foreground: 0 0% 20%;
+  /* semantic: text/primary/default      ← palette: neutral-900    hex: #333333 */
+
+  /* --- Muted --- */
+  --muted: 0 0% 89.8%;
+  /* semantic: bg/primary/tertiary        ← palette: gray-200       hex: #e5e5e5 */
+  --muted-foreground: 0 0% 39.6%;
+  /* semantic: text/primary/secondary     ← palette: neutral-700    hex: #656565 */
+
+  /* --- Accent (warm sand) --- */
+  --accent: 45 25% 93.7%;
+  /* semantic: bg/interactive/secondary  ← palette: sand-400       hex: #f3f1eb */
+  --accent-foreground: 0 0% 20%;
+  /* semantic: text/primary/default      ← palette: neutral-900    hex: #333333 */
+
+  /* --- Destructive (Novie red) --- */
+  --destructive: 10.7 77% 44.3%;
+  /* semantic: bg/error/default          ← palette: red-500        hex: #c8391a */
+  --destructive-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default    ← palette: white          hex: #ffffff */
+
+  /* --- Borders --- */
+  --border: 0 0% 78%;
+  /* semantic: border/default/default    ← palette: neutral-200    hex: #c7c7c7 */
+  --input: 0 0% 85.1%;
+  /* semantic: border/default/secondary   ← palette: neutral-100    hex: #d9d9d9 */
+  --ring: 0 0% 0%;
+  /* semantic: border/focus/default      ← palette: gray-900       hex: #000000 */
+
+  --radius: 0.5rem;
+
+  /* ========================================
+   * STATUS TOKENS
+   * ======================================== */
+
+  /* --- Success (fern) --- */
+  --success: 148.1 23.2% 39.8%;
+  /* semantic: bg/success/default        ← palette: fern-600       hex: #4e7d64 */
+  --success-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default      ← palette: white          hex: #ffffff */
+  --success-secondary: 143.1 28.9% 64.7%;
+  /* semantic: bg/success/secondary ← palette: fern-400       hex: #8bbf9f */
+  --success-tertiary: 152.3 30.2% 91.6%;
+  /* semantic: bg/success/tertiary  ← palette: fern-100       hex: #e3f0ea */
+
+  /* --- Warning (orange) --- */
+  --warning: 30.2 100% 61.4%;
+  /* semantic: bg/warning/default        ← palette: orange-500     hex: #ff9d3a */
+  --warning-foreground: 39 90% 97.3%;
+  /* semantic: text/primary/on-dark      ← palette: page-secondary  hex: #fcfaf6 */
+  --warning-secondary: 30 100% 74.5%;
+  /* semantic: bg/warning/secondary     ← palette: orange-300     hex: #ffbe7d */
+  --warning-tertiary: 30 100% 87.1%;
+  /* semantic: bg/warning/tertiary       ← palette: orange-100     hex: #ffdebd */
+
+  /* --- Info (slate) --- */
+  --info: 210 11.9% 39.6%;
+  /* semantic: bg/info/default           ← palette: slate-700      hex: #596571 */
+  --info-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default      ← palette: white          hex: #ffffff */
+  --info-secondary: 210 12.5% 78%;
+  /* semantic: bg/info/secondary         ← palette: slate-200      hex: #c0c7ce */
+  --info-tertiary: 210 10.5% 92.5%;
+  /* semantic: bg/info/tertiary          ← palette: slate-50       hex: #eaecee */
+
+  /* --- Error (alias for destructive, with secondary/tertiary) --- */
+  --error: 10.7 77% 44.3%;
+  /* semantic: bg/error/default          ← palette: red-500        hex: #c8391a */
+  --error-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default      ← palette: white          hex: #ffffff */
+  --error-secondary: 14.8 81% 79.4%;
+  /* semantic: bg/error/secondary        ← palette: red-200        hex: #f5b5a0 */
+  --error-tertiary: 17.6 81% 95.9%;
+  /* semantic: bg/error/tertiary         ← palette: red-50         hex: #fdf1ec */
+
+  /* ========================================
+   * PAGE & SURFACE TOKENS (sand palette)
+   * ======================================== */
+
+  --page: 45 25% 93.7%;
+  /* semantic: bg/page/default           ← palette: sand-400       hex: #f3f1eb */
+  --page-secondary: 40 50% 97.6%;
+  /* semantic: bg/page/secondary         ← palette: sand-300       hex: #fcfaf6 */
+  --page-tertiary: 36 11.6% 91.6%;
+  /* semantic: bg/page/tertiary          ← palette: sand-500       hex: #eceae7 */
+  --surface-inset: 36 11.6% 91.6%;
+  /* semantic: bg/surface/inset          ← palette: sand-500       hex: #eceae7 */
+  --surface-elevated: 0 0% 100%;
+  /* semantic: bg/surface/elevated       ← palette: white          hex: #ffffff */
+  --surface-overlay: 0 0% 0% / 50%;
+  /* semantic: bg/surface/overlay        ← palette: black-50a      hex: #00000080 */
+
+  /* ========================================
+   * INTERACTIVE TOKENS
+   * ======================================== */
+
+  --interactive: 0 0% 100%;
+  /* semantic: bg/interactive/default    ← palette: white          hex: #ffffff */
+  --interactive-disabled: 0 0% 78%;
+  /* semantic: bg/interactive/disabled   ← palette: neutral-200    hex: #c7c7c7 */
+  --interactive-secondary: 45 25% 93.7%;
+  /* semantic: bg/interactive/secondary ← palette: sand-400    hex: #f3f1eb */
+  --interactive-tertiary: 40 50% 97.6%;
+  /* semantic: bg/interactive/tertiary  ← palette: sand-300    hex: #fcfaf6 */
+
+  /* ========================================
+   * SCENARIO BACKGROUNDS
+   * ======================================== */
+
+  --scenario-fern: 152.3 30.2% 91.6%;
+  /* semantic: bg/scenario/fern       ← palette: fern-100       hex: #e3f0ea */
+  --scenario-orange: 30 100% 87.1%;
+  /* semantic: bg/scenario/orange      ← palette: orange-100     hex: #ffdebd */
+  --scenario-red: 15.7 82.1% 89%;
+  /* semantic: bg/scenario/red         ← palette: red-100        hex: #fad8cc */
+  --scenario-slate: 210 13.2% 85.1%;
+  /* semantic: bg/scenario/slate       ← palette: slate-100      hex: #d4d9de */
+
+  /* ========================================
+   * BORDER TOKENS
+   * ======================================== */
+
+  --border-default: 0 0% 78%;
+  /* semantic: border/default/default     ← palette: neutral-200    hex: #c7c7c7 */
+  --border-disabled: 0 0% 85.1%;
+  /* semantic: border/default/disabled    ← palette: neutral-100    hex: #d9d9d9 */
+  --border-secondary: 0 0% 85.1%;
+  /* semantic: border/default/secondary   ← palette: neutral-100    hex: #d9d9d9 */
+  --border-strong: 0 0% 63.9%;
+  /* semantic: border/default/strong      ← palette: neutral-400    hex: #a3a3a3 */
+  --border-focus: 0 0% 0%;
+  /* semantic: border/focus/default       ← palette: gray-900       hex: #000000 */
+  --border-focus-error: 10.7 77% 44.3%;
+  /* semantic: border/focus/error         ← palette: red-500        hex: #c8391a */
+  --border-error: 10.7 77% 44.3%;
+  /* semantic: border/error/default       ← palette: red-500        hex: #c8391a */
+  --border-error-secondary: 12.8 76.2% 68.6%;
+  /* semantic: border/error/secondary ← palette: red-300       hex: #ec8c72 */
+  --border-success: 148.1 23.2% 39.8%;
+  /* semantic: border/success/default     ← palette: fern-600       hex: #4e7d64 */
+  --border-success-secondary: 143.1 28.9% 64.7%;
+  /* semantic: border/success/secondary ← palette: fern-400 hex: #8bbf9f */
+  --border-info: 210 12.6% 50.2%;
+  /* semantic: border/info/default        ← palette: slate-600      hex: #708090 */
+  --border-warning: 32.9 100% 50%;
+  /* semantic: border/warning/default     ← palette: orange-600     hex: #ff8c00 */
+  --border-warning-secondary: 30.2 100% 61.4%;
+  /* semantic: border/warning/secondary ← palette: orange-500 hex: #ff9d3a */
+  --border-warning-tertiary: 29.6 100% 68.2%;
+  /* semantic: border/warning/tertiary  ← palette: orange-400 hex: #ffad5d */
+
+  /* ========================================
+   * TEXT TOKENS
+   * ======================================== */
+
+  --text-primary: 0 0% 20%;
+  /* semantic: text/primary/default       ← palette: neutral-900    hex: #333333 */
+  --text-primary-secondary: 0 0% 39.6%;
+  /* semantic: text/primary/secondary     ← palette: neutral-700    hex: #656565 */
+  --text-primary-tertiary: 0 0% 39.6%;
+  /* semantic: text/primary/tertiary      ← palette: neutral-700    hex: #656565 */
+  --text-primary-on-dark: 40 50% 97.6%;
+  /* semantic: text/primary/on-dark       ← palette: sand-300       hex: #fcfaf6 */
+  --text-disabled: 0 0% 63.9%;
+  /* semantic: text/disabled/default      ← palette: neutral-400    hex: #a3a3a3 */
+  --text-disabled-on: 0 0% 56.9%;
+  /* semantic: text/disabled/on-disabled  ← palette: neutral-500    hex: #919191 */
+  --text-error: 11.2 80.6% 36.5%;
+  /* semantic: text/error/default         ← palette: red-600        hex: #a82e12 */
+  --text-error-on-surface: 10.3 78.4% 14.5%;
+  /* semantic: text/error/on-surface   ← palette: red-900        hex: #421208 */
+  --text-success: 148.1 23.2% 39.8%;
+  /* semantic: text/success/default       ← palette: fern-600       hex: #4e7d64 */
+  --text-success-on-surface: 146.1 33.3% 27.1%;
+  /* semantic: text/success/on-surface ← palette: fern-700   hex: #2e5c42 */
+  --text-warning: 31.5 86.9% 41.8%;
+  /* semantic: text/warning/default       ← palette: orange-700     hex: #c76f0e */
+  --text-warning-on-surface: 29.2 68.4% 22.4%;
+  /* semantic: text/warning/on-surface ← palette: orange-900  hex: #603812 */
+  --text-info: 208.2 11.3% 29.6%;
+  /* semantic: text/info/default          ← palette: slate-800      hex: #434c54 */
+  --text-inverse: 0 0% 100%;
+  /* semantic: text/inverse/default       ← palette: white          hex: #ffffff */
+  --text-link: 212.7 10.7% 20.2%;
+  /* semantic: text/link/default          ← palette: slate-900      hex: #2e3339 */
+  --text-link-visited: 210 11.9% 39.6%;
+  /* semantic: text/link/visited          ← palette: slate-700      hex: #596571 */
+
+  /* ========================================
+   * ICON TOKENS
+   * ======================================== */
+
+  --icon-default: 0 0% 20%;
+  /* semantic: Icon/default/default             ← palette: neutral-900    hex: #333333 */
+  --icon-secondary: 0 0% 50.2%;
+  /* semantic: Icon/default/secondary           ← palette: neutral-600    hex: #808080 */
+  --icon-tertiary: 0 0% 63.9%;
+  /* semantic: Icon/default/tertiary            ← palette: neutral-400    hex: #a3a3a3 */
+  --icon-disabled: 0 0% 70.6%;
+  /* semantic: Icon/default/disabled            ← palette: neutral-300    hex: #b4b4b4 */
+  --icon-on-dark: 0 0% 100%;
+  /* semantic: Icon/default/on-dark             ← palette: white          hex: #ffffff */
+  --icon-on-color: 0 0% 100%;
+  /* semantic: Icon/default/on-color            ← palette: white          hex: #ffffff */
+  --icon-border-primary: 0 0% 0%;
+  /* semantic: Icon/border/primary              ← palette: gray-900       hex: #000000 */
+  --icon-border-solid-primary: 0 0% 100%;
+  /* semantic: Icon/border/Solid primary        ← palette: white          hex: #ffffff */
+  --icon-border-secondary: 0 0% 29.8%;
+  /* semantic: Icon/border/secondary            ← palette: neutral-800    hex: #4c4c4c */
+
+  /* Icon/error */
+  --icon-error: 11.2 80.6% 36.5%;
+  /* semantic: Icon/error/default               ← palette: red-600        hex: #a82e12 */
+  --icon-error-on-surface: 0 0% 100%;
+  /* semantic: Icon/error/on-surface            ← palette: white          hex: #ffffff */
+  --icon-error-on-positive: 3 100% 88.2%;
+  /* semantic: Icon/error/On Positive           ← palette: —              hex: #ffc6c3 */
+  --icon-error-on-positive-secondary: 357 54.5% 21.6%;
+  /* semantic: Icon/error/On Positive Secondary ← palette: —     hex: #55191c */
+  --icon-error-on-positive-tertiary: 354 64.1% 30.6%;
+  /* semantic: Icon/error/On Positive Tertiary  ← palette: —     hex: #801c26 */
+  --icon-error-secondary: 356.5 75.6% 59.8%;
+  /* semantic: Icon/error/Secondary             ← palette: —              hex: #e64b54 */
+  --icon-error-tertiary: 0 80.1% 68.4%;
+  /* semantic: Icon/error/Tertiary              ← palette: —              hex: #ef6e6e */
+
+  /* Icon/success */
+  --icon-success: 146.1 33.3% 27.1%;
+  /* semantic: Icon/success/default             ← palette: fern-700       hex: #2e5c42 */
+  --icon-success-on-surface: 0 0% 100%;
+  /* semantic: Icon/success/on-surface          ← palette: white          hex: #ffffff */
+  --icon-success-on-positive: 140.6 84.2% 92.5%;
+  /* semantic: Icon/success/On Positive       ← palette: —              hex: #dcfce7 */
+  --icon-success-on-positive-secondary: 142.8 64.2% 24.1%;
+  /* semantic: Icon/success/On Positive Secondary ← palette: — hex: #166534 */
+  --icon-success-on-positive-tertiary: 143.8 61.2% 20.2%;
+  /* semantic: Icon/success/On Positive Tertiary  ← palette: — hex: #14532d */
+  --icon-success-tertiary: 142.1 70.6% 45.3%;
+  /* semantic: Icon/success/Tertiary            ← palette: —              hex: #22c55e */
+
+  /* Icon/warning */
+  --icon-warning: 31.5 86.9% 41.8%;
+  /* semantic: Icon/warning/default             ← palette: orange-700     hex: #c76f0e */
+  --icon-warning-on-surface: 0 0% 100%;
+  /* semantic: Icon/warning/on-surface          ← palette: white          hex: #ffffff */
+  --icon-warning-on-positive: 31.5 86.9% 41.8%;
+  /* semantic: Icon/warning/On Positive        ← palette: orange-700     hex: #c76f0e */
+  --icon-warning-on-positive-secondary: 32.9 100% 50%;
+  /* semantic: Icon/warning/On Positive Secondary ← palette: orange-600 hex: #ff8c00 */
+  --icon-warning-on-positive-tertiary: 30.2 100% 61.4%;
+  /* semantic: Icon/warning/On Positive Tertiary ← palette: orange-500 hex: #ff9d3a */
+  --icon-warning-tertiary: 29.6 100% 68.2%;
+  /* semantic: Icon/warning/Tertiary            ← palette: orange-400     hex: #ffad5d */
+
+  /* Icon/info */
+  --icon-info: 210 11.9% 39.6%;
+  /* semantic: Icon/info/default                ← palette: slate-700      hex: #596571 */
+  --icon-info-on-disabled: 0 0% 63.9%;
+  /* semantic: Icon/info/On Disabled            ← palette: neutral-400    hex: #a3a3a3 */
+
+  /* Icon/neutral */
+  --icon-neutral: 212.7 10.7% 20.2%;
+  /* semantic: Icon/neutral/Default             ← palette: slate-900      hex: #2e3339 */
+  --icon-neutral-on-neutral: 210 13.2% 85.1%;
+  /* semantic: Icon/neutral/On Neutral          ← palette: slate-100      hex: #d4d9de */
+  --icon-neutral-on-neutral-secondary: 212.7 10.7% 20.2%;
+  /* semantic: Icon/neutral/On Neutral Secondary ← palette: slate-900 hex: #2e3339 */
+  --icon-neutral-on-neutral-tertiary: 208.2 11.3% 29.6%;
+  /* semantic: Icon/neutral/On Neutral Tertiary  ← palette: slate-800 hex: #434c54 */
+  --icon-neutral-secondary: 210 11.9% 39.6%;
+  /* semantic: Icon/neutral/Secondary           ← palette: slate-700      hex: #596571 */
+  --icon-neutral-tertiary: 210 12.6% 50.2%;
+  /* semantic: Icon/neutral/Tertiary            ← palette: slate-600      hex: #708090 */
+
+  /* ========================================
+   * BUTTON TOKENS
+   * ======================================== */
+
+  --button-primary-bg: 0 0% 0%;
+  /* semantic: button/primary/background          ← palette: gray-900       hex: #000000 */
+  --button-primary-bg-disabled: 0 0% 78%;
+  /* semantic: button/primary/background-disabled ← palette: neutral-200    hex: #c7c7c7 */
+  --button-primary-text: 0 0% 100%;
+  /* semantic: button/primary/text                ← palette: white          hex: #ffffff */
+  --button-secondary-bg: 0 0% 0% / 0%;
+  /* semantic: button/secondary/background        ← palette: transparent    hex: #00000000 */
+  --button-secondary-hover-border: 0 0% 53.7%;
+  /* semantic: button/secondary/border-hover      ← palette: gray-500       hex: #898989 */
+  --button-primary-hover: 0 0% 14.1%;
+  /* semantic: button/primary-hover               ← palette: gray-800       hex: #242424 */
+  --button-primary-text-disabled: 215 9% 29.4%;
+  /* semantic: text/info/default                  ← palette: slate-600      hex: #434c54 */
+  --button-danger-hover: 346.3 71.3% 39.6%;
+  /* semantic: background/error/default-hover     ← palette: red-700        hex: #ad1c31 */
+  --button-danger-bg-disabled: 14.1 85.5% 79.6%;
+  /* semantic: button/destructive/background-disabled ← palette: red-200    hex: #f5b5a0 */
+  --button-danger-text-disabled: 14.5 71.4% 16.5%;
+  /* semantic: text/error/on-surface              ← palette: red-900        hex: #421208 */
+  --button-ghost-bg: 0 0% 0% / 0%;
+  /* semantic: button/ghost/background            ← palette: transparent    hex: #00000000 */
+  --button-ghost-hover: 210 17% 98%;
+  /* semantic: background/primary/default-hover   ← palette: gray-50        hex: #f8f9fa */
+  --icon-button-hover: 0 0% 50.2%;
+  /* semantic: icon/default/secondary             ← palette: neutral-500    hex: #808080 */
+  --icon-button-disabled: 0 0% 70.6%;
+  /* semantic: icon/default/disabled              ← palette: neutral-300    hex: #b4b4b4 */
+  --icon-button-danger-bg: 12.4 80.9% 36.5%;
+  /* semantic: icon/error/default                 ← palette: red-600        hex: #a82e12 */
+  --icon-button-danger-hover: 14.1 85.5% 79.6%;
+  /* semantic: background/error/secondary         ← palette: red-200        hex: #f5b5a0 */
+  --icon-button-danger-disabled: 18 80% 96.1%;
+  /* semantic: background/error/tertiary          ← palette: red-50         hex: #fdf1ec */
+
+  /* ========================================
+   * SHADOW TOKENS
+   * ======================================== */
+
+  --shadow-sm: 0 0% 0% / 30%;
+  /* semantic: shadow/sm       ← palette: black-30a   hex: #0000004d */
+  --shadow-default: 0 0% 0% / 30%;
+  /* semantic: shadow/default  ← palette: black-30a   hex: #0000004d */
+  --shadow-lg: 0 0% 0% / 50%;
+  /* semantic: shadow/lg       ← palette: black-50a   hex: #00000080 */
+
+  /* ========================================
+   * CHART COLORS
+   * ======================================== */
+
+  --chart-1: 10.7 77% 44.3%;
+  /* semantic: chart/1  ← palette: red-500     hex: #c8391a */
+  --chart-2: 148.1 23.2% 39.8%;
+  /* semantic: chart/2  ← palette: fern-600    hex: #4e7d64 */
+  --chart-3: 210 11.9% 39.6%;
+  /* semantic: chart/3  ← palette: slate-700   hex: #596571 */
+  --chart-4: 30.2 100% 61.4%;
+  /* semantic: chart/4  ← palette: orange-500  hex: #ff9d3a */
+  --chart-5: 45 25% 93.7%;
+  /* semantic: chart/5  ← palette: sand-400    hex: #f3f1eb */
+
+  /* ========================================
+   * PALETTE — Raw color scales
+   * These are the base values that semantic tokens reference.
+   * Use semantic tokens above whenever possible.
+   * ======================================== */
+
+  /* --- Fern --- */
+  --fern-50: 145.7 30.4% 95.5%;
+  /* #f0f7f3 */
+  --fern-100: 152.3 30.2% 91.6%;
+  /* #e3f0ea */
+  --fern-200: 148.8 26.9% 81.8%;
+  /* #c4ddd0 */
+  --fern-300: 150.7 27.5% 70.8%;
+  /* #a0c9b5 */
+  --fern-400: 143.1 28.9% 64.7%;
+  /* #8bbf9f */
+  --fern-500: 150 21.1% 51.8%;
+  /* #6a9e84 */
+  --fern-600: 148.1 23.2% 39.8%;
+  /* #4e7d64 */
+  --fern-700: 146.1 33.3% 27.1%;
+  /* #2e5c42 */
+  --fern-800: 147.3 37.1% 17.5%;
+  /* #1c3d2b */
+  --fern-900: 150 44% 9.8%;
+  /* #0e2419 */
+
+  /* --- Gray --- */
+  --gray-0: 0 0% 100%;
+  /* #ffffff */
+  --gray-50: 210 16.7% 97.6%;
+  /* #f8f9fa */
+  --gray-100: 200 12% 95.1%;
+  /* #f1f3f4 */
+  --gray-200: 0 0% 89.8%;
+  /* #e5e5e5 */
+  --gray-300: 0 0% 83.9%;
+  /* #d6d6d6 */
+  --gray-400: 0 0% 68.6%;
+  /* #afafaf */
+  --gray-500: 0 0% 53.7%;
+  /* #898989 */
+  --gray-600: 0 0% 39.6%;
+  /* #656565 */
+  --gray-650: 213.3 4.5% 39%;
+  /* #5f6368 */
+  --gray-700: 0 0% 23.1%;
+  /* #3b3b3b */
+  --gray-800: 0 0% 14.1%;
+  /* #242424 */
+  --gray-900: 0 0% 0%;
+  /* #000000 */
+
+  /* --- Green --- */
+  --green-50: 80 36% 95.1%;
+  /* #f4f7ee */
+  --green-100: 78.3 39% 88.4%;
+  /* #e6edd6 */
+  --green-200: 82.7 39.8% 77.8%;
+  /* #ccddb0 */
+  --green-300: 85.1 41.1% 64.7%;
+  /* #abca80 */
+  --green-400: 85.2 39.4% 50.2%;
+  /* #88b24e */
+  --green-500: 85 49% 38.4%;
+  /* #6a9232 */
+  --green-600: 85.5 50% 31.4%;
+  /* #567828 */
+  --green-700: 84.8 42% 27.1%;
+  /* #4a6228 */
+  --green-800: 87.3 42.3% 20.4%;
+  /* #364a1e */
+  --green-900: 90 42.9% 13.7%;
+  /* #233214 */
+
+  /* --- Neutral --- */
+  --neutral-50: 0 0% 92.5%;
+  /* #ececec */
+  --neutral-100: 0 0% 85.1%;
+  /* #d9d9d9 */
+  --neutral-200: 0 0% 78%;
+  /* #c7c7c7 */
+  --neutral-300: 0 0% 70.6%;
+  /* #b4b4b4 */
+  --neutral-400: 0 0% 63.9%;
+  /* #a3a3a3 */
+  --neutral-500: 0 0% 56.9%;
+  /* #919191 */
+  --neutral-600: 0 0% 50.2%;
+  /* #808080 */
+  --neutral-700: 0 0% 39.6%;
+  /* #656565 */
+  --neutral-800: 0 0% 29.8%;
+  /* #4c4c4c */
+  --neutral-900: 0 0% 20%;
+  /* #333333 */
+
+  /* --- Orange --- */
+  --orange-50: 30.9 100% 93.5%;
+  /* #ffefde */
+  --orange-100: 30 100% 87.1%;
+  /* #ffdebd */
+  --orange-200: 30 100% 80.8%;
+  /* #ffce9d */
+  --orange-300: 30 100% 74.5%;
+  /* #ffbe7d */
+  --orange-400: 29.6 100% 68.2%;
+  /* #ffad5d */
+  --orange-500: 30.2 100% 61.4%;
+  /* #ff9d3a */
+  --orange-600: 32.9 100% 50%;
+  /* #ff8c00 */
+  --orange-700: 31.5 86.9% 41.8%;
+  /* #c76f0e */
+  --orange-800: 30.5 78% 32.2%;
+  /* #925312 */
+  --orange-900: 29.2 68.4% 22.4%;
+  /* #603812 */
+
+  /* --- Red --- */
+  --red-50: 17.6 81% 95.9%;
+  /* #fdf1ec */
+  --red-100: 15.7 82.1% 89%;
+  /* #fad8cc */
+  --red-200: 14.8 81% 79.4%;
+  /* #f5b5a0 */
+  --red-300: 12.8 76.2% 68.6%;
+  /* #ec8c72 */
+  --red-400: 12 72.1% 56.5%;
+  /* #e06040 */
+  --red-500: 10.7 77% 44.3%;
+  /* #c8391a */
+  --red-600: 11.2 80.6% 36.5%;
+  /* #a82e12 */
+  --red-700: 10.1 78.8% 29.6%;
+  /* #872410 */
+  --red-800: 10.1 78.8% 22.2%;
+  /* #651b0c */
+  --red-900: 10.3 78.4% 14.5%;
+  /* #421208 */
+
+  /* --- Sand --- */
+  --sand-50: 0 0% 99.6%;
+  /* #fefefe */
+  --sand-100: 45 50% 98.4%;
+  /* #fdfcf9 */
+  --sand-200: 36 55.6% 98.2%;
+  /* #fdfbf8 */
+  --sand-300: 40 50% 97.6%;
+  /* #fcfaf6 */
+  --sand-400: 45 25% 93.7%;
+  /* #f3f1eb */
+  --sand-500: 36 11.6% 91.6%;
+  /* #eceae7 */
+  --sand-600: 42.9 7.7% 82.2%;
+  /* #d5d3ce */
+  --sand-700: 42.9 5.2% 73.5%;
+  /* #bfbdb8 */
+  --sand-800: 42.9 3.9% 64.9%;
+  /* #a9a7a2 */
+  --sand-900: 42.9 3% 53.5%;
+  /* #8c8a85 */
+
+  /* --- Black & White (with alpha variants) --- */
+  --black: 0 0% 0%;
+  /* #000000 */
+  --white: 0 0% 100%;
+  /* #ffffff */
+  --black-30a: 0 0% 0% / 30%;
+  /* #0000004d */
+  --black-50a: 0 0% 0% / 50%;
+  /* #00000080 */
+  --white-30a: 0 0% 100% / 30%;
+  /* #ffffff4d */
+  --white-50a: 0 0% 100% / 50%;
+  /* #ffffff80 */
+
+  /* --- Slate --- */
+  --slate-50: 210 10.5% 92.5%;
+  /* #eaecee */
+  --slate-100: 210 13.2% 85.1%;
+  /* #d4d9de */
+  --slate-200: 210 12.5% 78%;
+  /* #c0c7ce */
+  --slate-300: 211.6 12.8% 70.8%;
+  /* #abb4be */
+  --slate-400: 210 13% 63.9%;
+  /* #97a3af */
+  --slate-500: 210 12.7% 56.9%;
+  /* #83919f */
+  --slate-600: 210 12.6% 50.2%;
+  /* #708090 */
+  --slate-700: 210 11.9% 39.6%;
+  /* #596571 */
+  --slate-800: 208.2 11.3% 29.6%;
+  /* #434c54 */
+  --slate-900: 212.7 10.7% 20.2%;
+  /* #2e3339 */
+}
+
+.dark {
+  /* ========================================
+   * DARK MODE — Figma-accurate palette mappings
+   * Source: Figma Colors page, Light→Dark column
+   * ======================================== */
+
+  /* --- Surfaces --- */
+  --background: 0 0% 14.1%;
+  /* semantic: surface/default (dark)          ← palette: gray-800       hex: #242424 */
+  --foreground: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)     ← palette: neutral-50     hex: #ececec */
+  --card: 0 0% 14.1%;
+  /* semantic: surface/default (dark)          ← palette: gray-800       hex: #242424 */
+  --card-foreground: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)     ← palette: neutral-50     hex: #ececec */
+  --popover: 0 0% 14.1%;
+  /* semantic: surface/default (dark)          ← palette: gray-800       hex: #242424 */
+  --popover-foreground: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)     ← palette: neutral-50     hex: #ececec */
+
+  /* --- Primary (inverted: dark=white, light=black) --- */
+  --primary: 0 0% 100%;
+  /* semantic: bg/primary/default (dark)       ← palette: white          hex: #ffffff */
+  --primary-foreground: 0 0% 0%;
+  /* semantic: button/primary/text (dark)      ← palette: gray-900       hex: #000000 */
+  --primary-secondary: 0 0% 14.1%;
+  /* semantic: bg/primary/secondary (dark)     ← palette: gray-800       hex: #242424 */
+  --primary-tertiary: 0 0% 23.1%;
+  /* semantic: bg/primary/tertiary (dark)      ← palette: gray-700       hex: #3b3b3b */
+
+  /* --- Secondary (maps to primary/secondary) --- */
+  --secondary: 0 0% 14.1%;
+  /* semantic: bg/primary/secondary (dark)     ← palette: gray-800       hex: #242424 */
+  --secondary-foreground: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)     ← palette: neutral-50     hex: #ececec */
+
+  /* --- Muted (maps to primary/tertiary) --- */
+  --muted: 0 0% 23.1%;
+  /* semantic: bg/primary/tertiary (dark)      ← palette: gray-700       hex: #3b3b3b */
+  --muted-foreground: 0 0% 78%;
+  /* semantic: text/primary/secondary (dark)   ← palette: neutral-200    hex: #c7c7c7 */
+
+  /* --- Accent (maps to interactive/secondary) --- */
+  --accent: 0 0% 14.1%;
+  /* semantic: bg/interactive/secondary (dark) ← palette: gray-800       hex: #242424 */
+  --accent-foreground: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)     ← palette: neutral-50     hex: #ececec */
+
+  /* --- Destructive (bg/error/default: dark stays red-500) --- */
+  --destructive: 10.7 77% 44.3%;
+  /* semantic: bg/error/default (dark)         ← palette: red-500        hex: #c8391a */
+  --destructive-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default (dark)     ← palette: white          hex: #ffffff */
+
+  /* --- Borders --- */
+  --border: 0 0% 39.6%;
+  /* semantic: border/default/default (dark)   ← palette: gray-600       hex: #656565 */
+  --input: 0 0% 23.1%;
+  /* semantic: border/default/secondary (dark) ← palette: gray-700       hex: #3b3b3b */
+  --ring: 0 0% 100%;
+  /* semantic: border/focus/default (dark)     ← palette: white          hex: #ffffff */
+
+  /* ========================================
+   * STATUS TOKENS
+   * ======================================== */
+
+  /* --- Success (fern) --- */
+  --success: 146.1 33.3% 27.1%;
+  /* semantic: bg/success/default (dark)       ← palette: fern-700       hex: #2e5c42 */
+  --success-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default (dark)     ← palette: white          hex: #ffffff */
+  --success-secondary: 147.3 37.1% 17.5%;
+  /* semantic: bg/success/secondary (dark)   ← palette: fern-800       hex: #1c3d2b */
+  --success-tertiary: 147.3 37.1% 17.5%;
+  /* semantic: bg/success/tertiary (dark)     ← palette: fern-800       hex: #1c3d2b */
+
+  /* --- Warning (orange) --- */
+  --warning: 30.2 100% 61.4%;
+  /* semantic: bg/warning/default (dark)       ← palette: orange-500     hex: #ff9d3a */
+  --warning-foreground: 39 90% 97.3%;
+  /* semantic: text/primary/on-dark (dark)     ← palette: page-secondary  hex: #fcfaf6 */
+  --warning-secondary: 30.5 78% 32.2%;
+  /* semantic: bg/warning/secondary (dark)     ← palette: orange-800     hex: #925312 */
+  --warning-tertiary: 29.2 68.4% 22.4%;
+  /* semantic: bg/warning/tertiary (dark)      ← palette: orange-900     hex: #603812 */
+
+  /* --- Info (slate) --- */
+  --info: 210 11.9% 39.6%;
+  /* semantic: bg/info/default (dark)          ← palette: slate-700      hex: #596571 — NOTE: same as light, no dark override in Figma data */
+  --info-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default (dark)     ← palette: white          hex: #ffffff */
+  --info-secondary: 208.2 11.3% 29.6%;
+  /* semantic: bg/info/secondary (dark)        ← palette: slate-800      hex: #434c54 */
+  --info-tertiary: 208.2 11.3% 29.6%;
+  /* semantic: bg/info/tertiary (dark)         ← palette: slate-800      hex: #434c54 */
+
+  /* --- Error (alias for destructive, with secondary/tertiary) --- */
+  --error: 10.7 77% 44.3%;
+  /* semantic: bg/error/default (dark)         ← palette: red-500        hex: #c8391a */
+  --error-foreground: 0 0% 100%;
+  /* semantic: text/inverse/default (dark)     ← palette: white          hex: #ffffff */
+  --error-secondary: 10.1 78.8% 29.6%;
+  /* semantic: bg/error/secondary (dark)       ← palette: red-700        hex: #872410 */
+  --error-tertiary: 10.1 78.8% 22.2%;
+  /* semantic: bg/error/tertiary (dark)        ← palette: red-800        hex: #651b0c */
+
+  /* ========================================
+   * PAGE & SURFACE TOKENS
+   * ======================================== */
+
+  --page: 0 0% 0%;
+  /* semantic: bg/page/default (dark)         ← palette: gray-900       hex: #000000 */
+  --page-secondary: 0 0% 14.1%;
+  /* semantic: bg/page/secondary (dark)       ← palette: gray-800       hex: #242424 */
+  --page-tertiary: 0 0% 23.1%;
+  /* semantic: bg/page/tertiary (dark)        ← palette: gray-700       hex: #3b3b3b */
+  --surface-inset: 0 0% 23.1%;
+  /* semantic: bg/surface/inset (dark)        ← palette: gray-700       hex: #3b3b3b */
+  --surface-elevated: 0 0% 23.1%;
+  /* semantic: bg/surface/elevated (dark)     ← palette: gray-700       hex: #3b3b3b */
+  --surface-overlay: 0 0% 0% / 50%;
+  /* semantic: bg/surface/overlay (dark)      ← palette: black-50a      hex: #00000080 */
+
+  /* ========================================
+   * INTERACTIVE TOKENS
+   * ======================================== */
+
+  --interactive: 0 0% 14.1%;
+  /* semantic: bg/interactive/default (dark)   ← palette: gray-800      hex: #242424 */
+  --interactive-disabled: 0 0% 23.1%;
+  /* semantic: bg/interactive/disabled (dark)  ← palette: gray-700      hex: #3b3b3b */
+  --interactive-secondary: 0 0% 23.1%;
+  /* semantic: bg/interactive/secondary (dark) ← palette: gray-700      hex: #3b3b3b */
+  --interactive-tertiary: 0 0% 39.6%;
+  /* semantic: bg/interactive/tertiary (dark)  ← palette: gray-600      hex: #656565 */
+
+  /* ========================================
+   * SCENARIO BACKGROUNDS
+   * ======================================== */
+
+  --scenario-fern: 147.3 37.1% 17.5%;
+  /* semantic: bg/scenario/fern (dark)        ← palette: fern-800      hex: #1c3d2b */
+  --scenario-orange: 29.2 68.4% 22.4%;
+  /* semantic: bg/scenario/orange (dark)      ← palette: orange-900    hex: #603812 */
+  --scenario-red: 10.1 78.8% 22.2%;
+  /* semantic: bg/scenario/red (dark)         ← palette: red-800       hex: #651b0c */
+  --scenario-slate: 208.2 11.3% 29.6%;
+  /* semantic: bg/scenario/slate (dark)       ← palette: slate-800     hex: #434c54 */
+
+  /* ========================================
+   * BORDER TOKENS
+   * ======================================== */
+
+  --border-default: 0 0% 39.6%;
+  /* semantic: border/default/default (dark)    ← palette: gray-600     hex: #656565 */
+  --border-disabled: 0 0% 23.1%;
+  /* semantic: border/default/disabled (dark)   ← palette: gray-700     hex: #3b3b3b */
+  --border-secondary: 0 0% 23.1%;
+  /* semantic: border/default/secondary (dark)  ← palette: gray-700     hex: #3b3b3b */
+  --border-strong: 0 0% 53.7%;
+  /* semantic: border/default/strong (dark)     ← palette: gray-500     hex: #898989 */
+  --border-focus: 0 0% 100%;
+  /* semantic: border/focus/default (dark)      ← palette: white        hex: #ffffff */
+  --border-focus-error: 12 72.1% 56.5%;
+  /* semantic: border/focus/error (dark)        ← palette: red-400      hex: #e06040 */
+  --border-error: 12 72.1% 56.5%;
+  /* semantic: border/error/default (dark)      ← palette: red-400      hex: #e06040 */
+  --border-error-secondary: 10.1 78.8% 29.6%;
+  /* semantic: border/error/secondary (dark) ← palette: red-700    hex: #872410 */
+  --border-success: 150 21.1% 51.8%;
+  /* semantic: border/success/default (dark)    ← palette: fern-500     hex: #6a9e84 */
+  --border-success-secondary: 146.1 33.3% 27.1%;
+  /* semantic: border/success/secondary (dark) ← palette: fern-700 hex: #2e5c42 */
+  --border-info: 210 13% 63.9%;
+  /* semantic: border/info/default (dark)       ← palette: slate-400    hex: #97a3af */
+  --border-warning: 30.2 100% 61.4%;
+  /* semantic: border/warning/default (dark)    ← palette: orange-500   hex: #ff9d3a */
+  --border-warning-secondary: 30.2 100% 61.4%;
+  /* semantic: border/warning/secondary (dark) — no separate Figma mapping, using orange-500 (estimated) */
+  --border-warning-tertiary: 29.6 100% 68.2%;
+  /* semantic: border/warning/tertiary (dark)  — no separate Figma mapping, using orange-400 (estimated) */
+
+  /* ========================================
+   * TEXT TOKENS
+   * ======================================== */
+
+  --text-primary: 0 0% 92.5%;
+  /* semantic: text/primary/default (dark)      ← palette: neutral-50   hex: #ececec */
+  --text-primary-secondary: 0 0% 78%;
+  /* semantic: text/primary/secondary (dark)    ← palette: neutral-200  hex: #c7c7c7 */
+  --text-primary-tertiary: 0 0% 56.9%;
+  /* semantic: text/primary/tertiary (dark)     ← palette: neutral-500  hex: #919191 */
+  --text-primary-on-dark: 0 0% 20%;
+  /* semantic: text/primary/on-dark (dark)      ← palette: neutral-900  hex: #333333 */
+  --text-disabled: 0 0% 56.9%;
+  /* semantic: text/disabled/default (dark)     ← palette: neutral-500  hex: #919191 */
+  --text-disabled-on: 0 0% 63.9%;
+  /* semantic: text/disabled/on-disabled (dark) ← palette: neutral-400  hex: #a3a3a3 */
+  --text-error: 12.8 76.2% 68.6%;
+  /* semantic: text/error/default (dark)        ← palette: red-300     hex: #ec8c72 */
+  --text-error-on-surface: 15.7 82.1% 89%;
+  /* semantic: text/error/on-surface (dark)   ← palette: red-100     hex: #fad8cc */
+  --text-success: 150.7 27.5% 70.8%;
+  /* semantic: text/success/default (dark)      ← palette: fern-300    hex: #a0c9b5 */
+  --text-success-on-surface: 148.8 26.9% 81.8%;
+  /* semantic: text/success/on-surface (dark) ← palette: fern-200 hex: #c4ddd0 */
+  --text-warning: 29.6 100% 68.2%;
+  /* semantic: text/warning/default (dark)      ← palette: orange-400  hex: #ffad5d */
+  --text-warning-on-surface: 30 100% 87.1%;
+  /* semantic: text/warning/on-surface (dark) ← palette: orange-100  hex: #ffdebd */
+  --text-info: 211.6 12.8% 70.8%;
+  /* semantic: text/info/default (dark)         ← palette: slate-300   hex: #abb4be */
+  --text-inverse: 0 0% 20%;
+  /* semantic: text/inverse/default (dark)      ← palette: neutral-900 hex: #333333 */
+  --text-link: 210 12.5% 78%;
+  /* semantic: text/link/default (dark)         ← palette: slate-200   hex: #c0c7ce */
+  --text-link-visited: 210 13% 63.9%;
+  /* semantic: text/link/visited (dark)         ← palette: slate-400   hex: #97a3af */
+
+  /* ========================================
+   * ICON TOKENS
+   * ======================================== */
+
+  --icon-default: 0 0% 92.5%;
+  /* semantic: Icon/default/default (dark)      ← palette: neutral-50    hex: #ececec */
+  --icon-secondary: 0 0% 70.6%;
+  /* semantic: Icon/default/secondary (dark)    ← palette: neutral-300   hex: #b4b4b4 */
+  --icon-tertiary: 0 0% 56.9%;
+  /* semantic: Icon/default/tertiary (dark)     ← palette: neutral-500   hex: #919191 */
+  --icon-disabled: 0 0% 50.2%;
+  /* semantic: Icon/default/disabled (dark)     ← palette: neutral-600   hex: #808080 */
+  --icon-on-dark: 0 0% 20%;
+  /* semantic: Icon/default/on-dark (dark)      ← palette: neutral-900   hex: #333333 */
+  --icon-on-color: 0 0% 100%;
+  /* semantic: Icon/default/on-color (dark)     ← palette: white         hex: #ffffff */
+  --icon-border-primary: 0 0% 100%;
+  /* semantic: Icon/border/primary (dark)       ← palette: white         hex: #ffffff — (estimated, invert of gray-900) */
+  --icon-border-solid-primary: 0 0% 0%;
+  /* semantic: Icon/border/Solid primary (dark) ← palette: gray-900      hex: #000000 — (estimated, invert of white) */
+  --icon-border-secondary: 0 0% 70.6%;
+  /* semantic: Icon/border/secondary (dark)     ← palette: neutral-300   hex: #b4b4b4 — (estimated) */
+
+  /* Icon/error */
+  --icon-error: 12.8 76.2% 68.6%;
+  /* semantic: Icon/error/default (dark)        ← palette: red-300      hex: #ec8c72 */
+  --icon-error-on-surface: 10.3 78.4% 14.5%;
+  /* semantic: Icon/error/on-surface (dark)  ← palette: red-900      hex: #421208 */
+  --icon-error-on-positive: 3 100% 88.2%;
+  /* semantic: Icon/error/On Positive (dark)    — no Figma dark mapping (estimated) */
+  --icon-error-on-positive-secondary: 357 54.5% 21.6%;
+  /* semantic: Icon/error/On Positive Secondary (dark) — (estimated) */
+  --icon-error-on-positive-tertiary: 354 64.1% 30.6%;
+  /* semantic: Icon/error/On Positive Tertiary (dark)  — (estimated) */
+  --icon-error-secondary: 356.5 75.6% 59.8%;
+  /* semantic: Icon/error/Secondary (dark)   — (estimated) */
+  --icon-error-tertiary: 0 80.1% 68.4%;
+  /* semantic: Icon/error/Tertiary (dark)       — (estimated) */
+
+  /* Icon/success */
+  --icon-success: 150.7 27.5% 70.8%;
+  /* semantic: Icon/success/default (dark)      ← palette: fern-300     hex: #a0c9b5 */
+  --icon-success-on-surface: 150 44% 9.8%;
+  /* semantic: Icon/success/on-surface (dark)  ← palette: fern-900     hex: #0e2419 — NOTE: Figma typo "fern900" */
+  --icon-success-on-positive: 140.6 84.2% 92.5%;
+  /* semantic: Icon/success/On Positive (dark) — (estimated) */
+  --icon-success-on-positive-secondary: 142.8 64.2% 24.1%;
+  /* semantic: Icon/success/On Positive Secondary (dark) — (estimated) */
+  --icon-success-on-positive-tertiary: 143.8 61.2% 20.2%;
+  /* semantic: Icon/success/On Positive Tertiary (dark)  — (estimated) */
+  --icon-success-tertiary: 142.1 70.6% 45.3%;
+  /* semantic: Icon/success/Tertiary (dark)  — (estimated) */
+
+  /* Icon/warning */
+  --icon-warning: 29.6 100% 68.2%;
+  /* semantic: Icon/warning/default (dark)      ← palette: orange-400   hex: #ffad5d */
+  --icon-warning-on-surface: 29.2 68.4% 22.4%;
+  /* semantic: Icon/warning/on-surface (dark) ← palette: orange-900 hex: #603812 */
+  --icon-warning-on-positive: 29.6 100% 68.2%;
+  /* semantic: Icon/warning/On Positive (dark) — (estimated, same as default) */
+  --icon-warning-on-positive-secondary: 30.2 100% 61.4%;
+  /* semantic: Icon/warning/On Positive Secondary (dark) — (estimated) */
+  --icon-warning-on-positive-tertiary: 30.5 78% 32.2%;
+  /* semantic: Icon/warning/On Positive Tertiary (dark) — (estimated) */
+  --icon-warning-tertiary: 30 100% 74.5%;
+  /* semantic: Icon/warning/Tertiary (dark)     — (estimated, orange-300) */
+
+  /* Icon/info */
+  --icon-info: 211.6 12.8% 70.8%;
+  /* semantic: Icon/info/default (dark)         ← palette: slate-300    hex: #abb4be */
+  --icon-info-on-disabled: 0 0% 56.9%;
+  /* semantic: Icon/info/On Disabled (dark)     — (estimated, neutral-500) */
+
+  /* Icon/neutral */
+  --icon-neutral: 210 12.5% 78%;
+  /* semantic: Icon/neutral/Default (dark)      — (estimated, slate-200) */
+  --icon-neutral-on-neutral: 212.7 10.7% 20.2%;
+  /* semantic: Icon/neutral/On Neutral (dark)  — (estimated, invert: slate-900) */
+  --icon-neutral-on-neutral-secondary: 210 12.5% 78%;
+  /* semantic: Icon/neutral/On Neutral Secondary (dark) — (estimated, slate-200) */
+  --icon-neutral-on-neutral-tertiary: 211.6 12.8% 70.8%;
+  /* semantic: Icon/neutral/On Neutral Tertiary (dark)  — (estimated, slate-300) */
+  --icon-neutral-secondary: 210 13% 63.9%;
+  /* semantic: Icon/neutral/Secondary (dark)   — (estimated, slate-400) */
+  --icon-neutral-tertiary: 210 12.7% 56.9%;
+  /* semantic: Icon/neutral/Tertiary (dark)   — (estimated, slate-500) */
+
+  /* Icon/brand */
+  /* --icon-brand not in :root but Figma shows: Icon/brand/default dark = fern-400 (143.1 28.9% 64.7%) */
+
+  /* ========================================
+   * BUTTON TOKENS
+   * ======================================== */
+
+  --button-primary-bg: 0 0% 100%;
+  /* semantic: button/primary/background (dark)          ← palette: white       hex: #ffffff */
+  --button-primary-bg-disabled: 0 0% 23.1%;
+  /* semantic: button/primary/background-disabled (dark) ← palette: gray-700  hex: #3b3b3b */
+  --button-primary-text: 0 0% 0%;
+  /* semantic: button/primary/text (dark)                ← palette: gray-900    hex: #000000 */
+  --button-secondary-bg: 0 0% 0% / 0%;
+  /* semantic: button/secondary/background (dark)        ← palette: black-0     hex: transparent */
+  --button-secondary-hover-border: 0 0% 53.7%;
+  /* semantic: button/secondary/border-hover (dark)      ← palette: gray-500    hex: #898989  (estimated) */
+  --button-primary-hover: 0 0% 89.8%;
+  /* semantic: button/primary-hover (dark)               ← palette: gray-200    hex: #e5e5e5  (estimated) */
+  --button-primary-text-disabled: 215 9% 29.4%;
+  /* semantic: text/info/default (dark)                  ← palette: slate-600   hex: #434c54  (estimated) */
+  --button-danger-hover: 346.3 71.3% 39.6%;
+  /* semantic: background/error/default-hover (dark)     ← palette: red-700     hex: #ad1c31  (estimated) */
+  --button-danger-bg-disabled: 14.1 85.5% 79.6%;
+  /* semantic: button/destructive/background-disabled (dark) ← palette: red-200 hex: #f5b5a0  (estimated) */
+  --button-danger-text-disabled: 14.5 71.4% 16.5%;
+  /* semantic: text/error/on-surface (dark)              ← palette: red-900     hex: #421208  (estimated) */
+  --button-ghost-bg: 0 0% 0% / 0%;
+  /* semantic: button/ghost/background (dark)            ← palette: black-0     hex: transparent */
+  --button-ghost-hover: 0 0% 23.1%;
+  /* semantic: background/primary/default-hover (dark)   ← palette: gray-700    hex: #3b3b3b  (estimated) */
+  --icon-button-hover: 0 0% 50.2%;
+  /* semantic: icon/default/secondary (dark)             ← palette: neutral-500 hex: #808080  (estimated) */
+  --icon-button-disabled: 0 0% 70.6%;
+  /* semantic: icon/default/disabled (dark)              ← palette: neutral-300 hex: #b4b4b4  (estimated) */
+  --icon-button-danger-bg: 12.4 80.9% 36.5%;
+  /* semantic: icon/error/default (dark)                 ← palette: red-600     hex: #a82e12  (estimated) */
+  --icon-button-danger-hover: 14.1 85.5% 79.6%;
+  /* semantic: background/error/secondary (dark)         ← palette: red-200     hex: #f5b5a0  (estimated) */
+  --icon-button-danger-disabled: 18 80% 96.1%;
+  /* semantic: background/error/tertiary (dark)          ← palette: red-50      hex: #fdf1ec  (estimated) */
+
+  /* ========================================
+   * SHADOW TOKENS
+   * ======================================== */
+
+  --shadow-sm: 0 0% 0% / 50%;
+  /* semantic: shadow/sm (dark)       ← palette: black-50a      hex: #00000080 */
+  --shadow-default: 0 0% 0% / 50%;
+  /* semantic: shadow/default (dark)  ← palette: black-50a      hex: #00000080 */
+  --shadow-lg: 0 0% 0% / 50%;
+  /* semantic: shadow/lg (dark)       ← palette: black-50a      hex: #00000080 */
+
+  /* ========================================
+   * CHART COLORS (no Figma dark mapping — estimated from nearby patterns)
+   * ======================================== */
+
+  --chart-1: 12 72.1% 56.5%;
+  /* semantic: chart/1 (dark)  ← palette: red-400 (estimated)    hex: #e06040 */
+  --chart-2: 150 21.1% 51.8%;
+  /* semantic: chart/2 (dark)  ← palette: fern-500 (estimated)   hex: #6a9e84 */
+  --chart-3: 210 13% 63.9%;
+  /* semantic: chart/3 (dark)  ← palette: slate-400 (estimated)  hex: #97a3af */
+  --chart-4: 29.6 100% 68.2%;
+  /* semantic: chart/4 (dark)  ← palette: orange-400 (estimated) hex: #ffad5d */
+  --chart-5: 0 0% 23.1%;
+  /* semantic: chart/5 (dark)  ← palette: gray-700 (estimated)   hex: #3b3b3b */
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html,
+  body {
+    @apply bg-background text-foreground;
+  }
+}