@bubble-design-system/ui 0.2.0

package/dist/tokens.css

@@ -0,0 +1,750 @@
+/* ─────────────────────────────────────────────────────────
+   bubble · design tokens
+   Layer 1: primitives (raw values)
+   Layer 2: semantics (purpose-bound)
+   Layer 3: component (only when semantics don't fit)
+
+   Tone axis (`[data-tone]`, default `soft`):
+     · soft    — signature look: gray page, white floating pills,
+                 layered shadows w/ inset highlight, pill controls
+     · vivid   — flat shadcn-like: white surfaces, single-layer shadows
+     · pastel  — warm desaturated, off-white surfaces
+   ───────────────────────────────────────────────────────── */
+
+:root {
+  /* ── neutrals: cool slate (default) ─────────────────── */
+  --slate-50:  #F8FAFC;
+  --slate-100: #F1F5F9;
+  --slate-200: #E2E8F0;
+  --slate-300: #CBD5E1;
+  --slate-400: #94A3B8;
+  --slate-500: #64748B;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1E293B;
+  --slate-900: #0F172A;
+  --slate-950: #020617;
+
+  /* ── neutrals: true neutral ─────────────────────────── */
+  --neutral-50:  #FAFAFA;
+  --neutral-100: #F5F5F5;
+  --neutral-200: #E5E5E5;
+  --neutral-300: #D4D4D4;
+  --neutral-400: #A3A3A3;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0A0A0A;
+
+  /* ── neutrals: warm stone ───────────────────────────── */
+  --stone-50:  #FAFAF9;
+  --stone-100: #F5F5F4;
+  --stone-200: #E7E5E4;
+  --stone-300: #D6D3D1;
+  --stone-400: #A8A29E;
+  --stone-500: #78716C;
+  --stone-600: #57534E;
+  --stone-700: #44403C;
+  --stone-800: #292524;
+  --stone-900: #1C1917;
+  --stone-950: #0C0A09;
+
+  /* ── brand: blue (default, anchored on #1D4ED8) ─────── */
+  --blue-50:  #EFF6FF;
+  --blue-100: #DBEAFE;
+  --blue-200: #BFDBFE;
+  --blue-300: #93C5FD;
+  --blue-400: #60A5FA;
+  --blue-500: #3B82F6;
+  --blue-600: #1D4ED8;
+  --blue-700: #1E40AF;
+  --blue-800: #1E3A8A;
+  --blue-900: #172554;
+  --blue-950: #0B1336;
+
+  /* ── brand: violet ──────────────────────────────────── */
+  --violet-50:  #F5F3FF;
+  --violet-100: #EDE9FE;
+  --violet-200: #DDD6FE;
+  --violet-300: #C4B5FD;
+  --violet-400: #A78BFA;
+  --violet-500: #8B5CF6;
+  --violet-600: #6D28D9;
+  --violet-700: #5B21B6;
+  --violet-800: #4C1D95;
+  --violet-900: #3B0764;
+  --violet-950: #2A0556;
+
+  /* ── brand: emerald ─────────────────────────────────── */
+  --emerald-50:  #ECFDF5;
+  --emerald-100: #D1FAE5;
+  --emerald-200: #A7F3D0;
+  --emerald-300: #6EE7B7;
+  --emerald-400: #34D399;
+  --emerald-500: #10B981;
+  --emerald-600: #047857;
+  --emerald-700: #065F46;
+  --emerald-800: #064E3B;
+  --emerald-900: #022C22;
+  --emerald-950: #011D18;
+
+  /* ── brand: orange ──────────────────────────────────── */
+  --orange-50:  #FFF7ED;
+  --orange-100: #FFEDD5;
+  --orange-200: #FED7AA;
+  --orange-300: #FDBA74;
+  --orange-400: #FB923C;
+  --orange-500: #F97316;
+  --orange-600: #C2410C;
+  --orange-700: #9A3412;
+  --orange-800: #7C2D12;
+  --orange-900: #431407;
+  --orange-950: #2A0D04;
+
+  /* ── brand: mono (uses neutrals) ────────────────────── */
+  /* mono-* are aliased per gray family below */
+
+  /* ── semantic palette: green ────────────────────────── */
+  --green-50:  #F0FDF4;
+  --green-100: #DCFCE7;
+  --green-200: #BBF7D0;
+  --green-300: #86EFAC;
+  --green-400: #4ADE80;
+  --green-500: #22C55E;
+  --green-600: #16A34A;
+  --green-700: #15803D;
+  --green-800: #166534;
+  --green-900: #14532D;
+  --green-950: #052E16;
+
+  /* ── semantic palette: amber ────────────────────────── */
+  --amber-50:  #FFFBEB;
+  --amber-100: #FEF3C7;
+  --amber-200: #FDE68A;
+  --amber-300: #FCD34D;
+  --amber-400: #FBBF24;
+  --amber-500: #F59E0B;
+  --amber-600: #D97706;
+  --amber-700: #B45309;
+  --amber-800: #92400E;
+  --amber-900: #78350F;
+  --amber-950: #451A03;
+
+  /* ── semantic palette: red ──────────────────────────── */
+  --red-50:  #FEF2F2;
+  --red-100: #FEE2E2;
+  --red-200: #FECACA;
+  --red-300: #FCA5A5;
+  --red-400: #F87171;
+  --red-500: #EF4444;
+  --red-600: #DC2626;
+  --red-700: #B91C1C;
+  --red-800: #991B1B;
+  --red-900: #7F1D1D;
+  --red-950: #450A0A;
+
+  /* ── pure ───────────────────────────────────────────── */
+  --white: #FFFFFF;
+  --black: #000000;
+}
+
+/* ─────────────────────────────────────────────────────────
+   gray-family aliases — selected via [data-gray]
+   ───────────────────────────────────────────────────────── */
+:root,
+[data-gray="slate"] {
+  --gray-50:  var(--slate-50);
+  --gray-100: var(--slate-100);
+  --gray-200: var(--slate-200);
+  --gray-300: var(--slate-300);
+  --gray-400: var(--slate-400);
+  --gray-500: var(--slate-500);
+  --gray-600: var(--slate-600);
+  --gray-700: var(--slate-700);
+  --gray-800: var(--slate-800);
+  --gray-900: var(--slate-900);
+  --gray-950: var(--slate-950);
+}
+[data-gray="neutral"] {
+  --gray-50:  var(--neutral-50);
+  --gray-100: var(--neutral-100);
+  --gray-200: var(--neutral-200);
+  --gray-300: var(--neutral-300);
+  --gray-400: var(--neutral-400);
+  --gray-500: var(--neutral-500);
+  --gray-600: var(--neutral-600);
+  --gray-700: var(--neutral-700);
+  --gray-800: var(--neutral-800);
+  --gray-900: var(--neutral-900);
+  --gray-950: var(--neutral-950);
+}
+[data-gray="stone"] {
+  --gray-50:  var(--stone-50);
+  --gray-100: var(--stone-100);
+  --gray-200: var(--stone-200);
+  --gray-300: var(--stone-300);
+  --gray-400: var(--stone-400);
+  --gray-500: var(--stone-500);
+  --gray-600: var(--stone-600);
+  --gray-700: var(--stone-700);
+  --gray-800: var(--stone-800);
+  --gray-900: var(--stone-900);
+  --gray-950: var(--stone-950);
+}
+
+/* ─────────────────────────────────────────────────────────
+   brand aliases — selected via [data-brand]
+   ───────────────────────────────────────────────────────── */
+:root,
+[data-brand="blue"] {
+  --brand-50:  var(--blue-50);
+  --brand-100: var(--blue-100);
+  --brand-200: var(--blue-200);
+  --brand-300: var(--blue-300);
+  --brand-400: var(--blue-400);
+  --brand-500: var(--blue-500);
+  --brand-600: var(--blue-600);
+  --brand-700: var(--blue-700);
+  --brand-800: var(--blue-800);
+  --brand-900: var(--blue-900);
+  --brand-950: var(--blue-950);
+}
+[data-brand="violet"] {
+  --brand-50:  var(--violet-50);
+  --brand-100: var(--violet-100);
+  --brand-200: var(--violet-200);
+  --brand-300: var(--violet-300);
+  --brand-400: var(--violet-400);
+  --brand-500: var(--violet-500);
+  --brand-600: var(--violet-600);
+  --brand-700: var(--violet-700);
+  --brand-800: var(--violet-800);
+  --brand-900: var(--violet-900);
+  --brand-950: var(--violet-950);
+}
+[data-brand="emerald"] {
+  --brand-50:  var(--emerald-50);
+  --brand-100: var(--emerald-100);
+  --brand-200: var(--emerald-200);
+  --brand-300: var(--emerald-300);
+  --brand-400: var(--emerald-400);
+  --brand-500: var(--emerald-500);
+  --brand-600: var(--emerald-600);
+  --brand-700: var(--emerald-700);
+  --brand-800: var(--emerald-800);
+  --brand-900: var(--emerald-900);
+  --brand-950: var(--emerald-950);
+}
+[data-brand="orange"] {
+  --brand-50:  var(--orange-50);
+  --brand-100: var(--orange-100);
+  --brand-200: var(--orange-200);
+  --brand-300: var(--orange-300);
+  --brand-400: var(--orange-400);
+  --brand-500: var(--orange-500);
+  --brand-600: var(--orange-600);
+  --brand-700: var(--orange-700);
+  --brand-800: var(--orange-800);
+  --brand-900: var(--orange-900);
+  --brand-950: var(--orange-950);
+}
+[data-brand="mono"] {
+  --brand-50:  var(--gray-50);
+  --brand-100: var(--gray-100);
+  --brand-200: var(--gray-200);
+  --brand-300: var(--gray-300);
+  --brand-400: var(--gray-400);
+  --brand-500: var(--gray-500);
+  --brand-600: var(--gray-900);
+  --brand-700: var(--gray-950);
+  --brand-800: var(--black);
+  --brand-900: var(--black);
+  --brand-950: var(--black);
+}
+[data-brand="teal"] {
+  --brand-50:  #E2FBFA;
+  --brand-100: #B8F4F1;
+  --brand-200: #8AECE7;
+  --brand-300: #4DDFD9;
+  --brand-400: #14D2CB;
+  --brand-500: #00CEC8;
+  --brand-600: #00CEC8;
+  --brand-700: #009E99;
+  --brand-800: #007570;
+  --brand-900: #004B48;
+  --brand-950: #002523;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Semantic tokens — LIGHT (default)
+   ───────────────────────────────────────────────────────── */
+:root {
+  /* background */
+  --color-bg-page:           var(--color-bg-primary);
+  --color-bg-primary:        var(--white);
+  --color-bg-secondary:      var(--gray-50);
+  --color-bg-tertiary:       var(--gray-100);
+  --color-bg-inverse:        var(--gray-900);
+
+  --color-bg-brand:          var(--brand-600);
+  --color-bg-brand-hover:    var(--brand-700);
+  --color-bg-brand-active:   var(--brand-800);
+  --color-bg-brand-subtle:   var(--brand-50);
+
+  --color-bg-success:        var(--green-50);
+  --color-bg-success-strong: var(--green-600);
+  --color-bg-warning:        var(--amber-50);
+  --color-bg-warning-strong: var(--amber-500);
+  --color-bg-danger:         var(--red-50);
+  --color-bg-danger-strong:  var(--red-600);
+  --color-bg-danger-hover:   var(--red-700);
+  --color-bg-info:           var(--brand-50);
+
+  --color-bg-hover:          var(--gray-100);
+  --color-bg-pressed:        var(--gray-200);
+  --color-bg-disabled:       var(--gray-100);
+
+  /* text */
+  --color-text-primary:      var(--gray-900);
+  --color-text-secondary:    var(--gray-600);
+  --color-text-tertiary:     var(--gray-400);
+  --color-text-disabled:     var(--gray-300);
+  --color-text-inverse:      var(--white);
+
+  --color-text-brand:        var(--brand-700);
+  --color-text-success:      var(--green-700);
+  --color-text-warning:      var(--amber-700);
+  --color-text-danger:       var(--red-700);
+
+  --color-text-on-brand:     var(--white);
+  --color-text-on-danger:    var(--white);
+  --color-text-on-success:   var(--white);
+
+  /* border */
+  --color-border-primary:    var(--gray-300);
+  --color-border-secondary:  var(--gray-200);
+  --color-border-tertiary:   var(--gray-100);
+  --color-border-brand:      var(--brand-600);
+  --color-border-success:    var(--green-200);
+  --color-border-warning:    var(--amber-200);
+  --color-border-danger:     var(--red-200);
+  --color-border-focus:      var(--brand-600);
+
+  /* shadow */
+  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
+  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 1px -1px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
+  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
+  --shadow-focus: 0 0 0 3px var(--brand-100);
+
+  /* code surface */
+  --color-code-bg: var(--gray-50);
+  --color-code-border: var(--gray-200);
+  --color-code-text: var(--gray-800);
+
+  /* signature gradient — used for the brand blob + AI/featured accents.
+     Always present regardless of tone; soft tone leans on it most. */
+  --gradient-accent: linear-gradient(135deg,
+    #FF8A9E 0%,
+    #FF6BA5 25%,
+    #C760D9 55%,
+    #8B6BE8 100%);
+  --gradient-accent-soft: linear-gradient(135deg,
+    rgba(255, 138, 158, 0.18) 0%,
+    rgba(199, 96, 217, 0.16) 50%,
+    rgba(139, 107, 232, 0.18) 100%);
+
+  /* control radius — pill-first in soft, default otherwise */
+  --ctrl-radius: var(--radius-md);
+}
+
+/* ─────────────────────────────────────────────────────────
+   Semantic tokens — DARK
+   ───────────────────────────────────────────────────────── */
+[data-theme="dark"] {
+  --color-bg-primary:        var(--gray-950);
+  --color-bg-secondary:      var(--gray-900);
+  --color-bg-tertiary:       var(--gray-800);
+  --color-bg-inverse:        var(--gray-50);
+
+  --color-bg-brand:          var(--brand-500);
+  --color-bg-brand-hover:    var(--brand-400);
+  --color-bg-brand-active:   var(--brand-300);
+  --color-bg-brand-subtle:   color-mix(in srgb, var(--brand-500) 14%, transparent);
+
+  --color-bg-success:        color-mix(in srgb, var(--green-500) 14%, transparent);
+  --color-bg-success-strong: var(--green-500);
+  --color-bg-warning:        color-mix(in srgb, var(--amber-500) 14%, transparent);
+  --color-bg-warning-strong: var(--amber-400);
+  --color-bg-danger:         color-mix(in srgb, var(--red-500) 14%, transparent);
+  --color-bg-danger-strong:  var(--red-500);
+  --color-bg-danger-hover:   var(--red-400);
+  --color-bg-info:           color-mix(in srgb, var(--brand-500) 14%, transparent);
+
+  --color-bg-hover:          var(--gray-800);
+  --color-bg-pressed:        var(--gray-700);
+  --color-bg-disabled:       var(--gray-800);
+
+  --color-text-primary:      var(--gray-50);
+  --color-text-secondary:    var(--gray-400);
+  --color-text-tertiary:     var(--gray-500);
+  --color-text-disabled:     var(--gray-700);
+  --color-text-inverse:      var(--gray-950);
+
+  --color-text-brand:        var(--brand-400);
+  --color-text-success:      var(--green-400);
+  --color-text-warning:      var(--amber-400);
+  --color-text-danger:       var(--red-400);
+
+  --color-text-on-brand:     var(--gray-950);
+  --color-text-on-danger:    var(--white);
+  --color-text-on-success:   var(--gray-950);
+
+  --color-border-primary:    var(--gray-700);
+  --color-border-secondary:  var(--gray-800);
+  --color-border-tertiary:   var(--gray-800);
+  --color-border-brand:      var(--brand-400);
+  --color-border-success:    color-mix(in srgb, var(--green-500) 30%, transparent);
+  --color-border-warning:    color-mix(in srgb, var(--amber-500) 30%, transparent);
+  --color-border-danger:     color-mix(in srgb, var(--red-500) 30%, transparent);
+  --color-border-focus:      var(--brand-400);
+
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 1px 1px -1px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-400) 35%, transparent);
+
+  --color-code-bg: var(--gray-900);
+  --color-code-border: var(--gray-800);
+  --color-code-text: var(--gray-200);
+}
+
+/* "mono" brand needs special treatment in dark so it stays visible */
+[data-theme="dark"][data-brand="mono"] {
+  --color-bg-brand:          var(--gray-50);
+  --color-bg-brand-hover:    var(--gray-100);
+  --color-bg-brand-active:   var(--gray-200);
+  --color-text-on-brand:     var(--gray-950);
+  --color-text-brand:        var(--gray-50);
+  --color-border-brand:      var(--gray-50);
+}
+
+/* "teal" anchor (#00CEC8) is too light for white text — force dark text on brand */
+:root[data-brand="teal"] {
+  --color-text-on-brand: var(--gray-950);
+}
+[data-theme="dark"][data-brand="teal"] {
+  --color-bg-brand:        var(--brand-500);
+  --color-bg-brand-hover:  var(--brand-400);
+  --color-bg-brand-active: var(--brand-300);
+  --color-text-on-brand:   var(--gray-950);
+  --color-text-brand:      var(--brand-400);
+  --color-border-brand:    var(--brand-500);
+}
+
+/* ═════════════════════════════════════════════════════════
+   Tone axis — vivid (flat) · pastel (dusty) · soft (signature)
+   `vivid` is the implicit default produced by the primitives
+   above. `pastel` and `soft` retune the slate/neutral/stone +
+   semantic palettes; `soft` additionally swaps surface model
+   (gray page, white floating pills) and shadow stack (layered
+   with inset white highlight).
+   ═════════════════════════════════════════════════════════ */
+
+/* ─── pastel ─────────────────────────────────────────────── */
+[data-tone="pastel"] {
+  --slate-50:  #F6F7F9; --slate-100: #EBEEF3; --slate-200: #DDE1E9;
+  --slate-300: #C1C7D3; --slate-400: #8E96A7; --slate-500: #686F82;
+  --slate-600: #4E5667; --slate-700: #3C4250; --slate-800: #272C38;
+  --slate-900: #161A24; --slate-950: #0A0D14;
+
+  --neutral-50:  #F8F7F5; --neutral-100: #EFEDEA; --neutral-200: #E0DDD9;
+  --neutral-300: #C8C5BF; --neutral-400: #9D9A93; --neutral-500: #757269;
+  --neutral-600: #56544D; --neutral-700: #41403A; --neutral-800: #2A2926;
+  --neutral-900: #1A1A18; --neutral-950: #0D0D0B;
+
+  --stone-50:  #F8F6F2; --stone-100: #EFECE5; --stone-200: #E1DBD0;
+  --stone-300: #CAC2B3; --stone-400: #A19888; --stone-500: #7A7263;
+  --stone-600: #5A5447; --stone-700: #443F35; --stone-800: #2B2822;
+  --stone-900: #1A1814; --stone-950: #0D0B09;
+
+  --green-50:  #EEF6EF; --green-500: #66A26F; --green-600: #568D5E; --green-700: #45724B;
+  --amber-50:  #FBF4E1; --amber-400: #D5A741; --amber-500: #C19234; --amber-700: #855F23;
+  --red-50:    #FAEBEA; --red-500:   #BE584F; --red-600:   #A8463F; --red-700:   #883831;
+}
+
+/* pastel · light — warm off-white surfaces, softer shadows */
+[data-tone="pastel"]:not([data-theme="dark"]) {
+  --color-bg-primary:   #FBFAF7;
+  --color-bg-secondary: #F4F2EC;
+  --color-bg-tertiary:  #EBE8DF;
+  --color-bg-page:      var(--color-bg-primary);
+
+  --shadow-xs: 0 1px 2px 0 rgba(50, 47, 38, 0.04);
+  --shadow-sm: 0 1px 2px 0 rgba(50, 47, 38, 0.05), 0 1px 1px -1px rgba(50, 47, 38, 0.04);
+  --shadow-md: 0 4px 8px -2px rgba(50, 47, 38, 0.06), 0 2px 4px -2px rgba(50, 47, 38, 0.04);
+  --shadow-lg: 0 10px 18px -4px rgba(50, 47, 38, 0.08), 0 4px 6px -4px rgba(50, 47, 38, 0.04);
+  --shadow-xl: 0 20px 28px -6px rgba(50, 47, 38, 0.10), 0 8px 10px -6px rgba(50, 47, 38, 0.04);
+}
+[data-tone="pastel"][data-gray="stone"]:not([data-theme="dark"]) {
+  --color-bg-primary:   #FBF9F4;
+  --color-bg-secondary: #F3EFE5;
+  --color-bg-tertiary:  #E9E3D4;
+}
+
+/* ─── soft (signature look) ──────────────────────────────── */
+[data-tone="soft"] {
+  --slate-50:  #F6F7F8; --slate-100: #ECEDF0; --slate-200: #DCDEE3;
+  --slate-300: #BCC0C9; --slate-400: #8C92A0; --slate-500: #666C7B;
+  --slate-600: #4C5263; --slate-700: #3A3F4D; --slate-800: #262A35;
+  --slate-900: #181B23; --slate-950: #0C0E13;
+
+  --neutral-50:  #F7F7F6; --neutral-100: #EDEDEB; --neutral-200: #DEDDDA;
+  --neutral-300: #C5C4BF; --neutral-400: #99988F; --neutral-500: #71706A;
+  --neutral-600: #555450; --neutral-700: #41403D; --neutral-800: #2A2A28;
+  --neutral-900: #1A1A18; --neutral-950: #0D0D0C;
+
+  --stone-50:  #F8F6F2; --stone-100: #F0EDE6; --stone-200: #E2DDD2;
+  --stone-300: #CDC5B4; --stone-400: #A09683; --stone-500: #777060;
+  --stone-600: #595348; --stone-700: #443F37; --stone-800: #2B2823;
+  --stone-900: #1A1815; --stone-950: #0E0C0A;
+
+  /* soft status ramps — vivid but warm */
+  --green-50:  #E8F8EF; --green-500: #46B47C; --green-600: #38A06A; --green-700: #2A8054;
+  --amber-50:  #FFF8E0; --amber-400: #F5BC2E; --amber-500: #E8A716; --amber-700: #9C6E0E;
+  --red-50:    #FFEDEC; --red-500:   #ED5E5B; --red-600:   #D6443F; --red-700:   #AB3531;
+
+  /* pill controls */
+  --ctrl-radius: 9999px;
+}
+
+/* soft · light — gray page, white floating pills, layered shadow w/ inset highlight */
+[data-tone="soft"]:not([data-theme="dark"]) {
+  --color-bg-primary:   #FFFFFF;
+  --color-bg-secondary: #ECEDEF;
+  --color-bg-tertiary:  #E1E2E6;
+  --color-bg-page:      #ECEDEF;
+
+  --color-bg-brand-subtle: color-mix(in srgb, var(--brand-500) 14%, white);
+  --color-bg-success:      #E8F6EE;
+  --color-bg-warning:      #FFF6DC;
+  --color-bg-danger:       #FFE8E6;
+  --color-bg-info:         #ECF1FF;
+
+  --color-border-primary:   #DCDEE3;
+  --color-border-secondary: #E6E8EB;
+  --color-border-tertiary:  #EFF0F2;
+
+  /* the signature layered shadows — md/lg/xl carry an inset white top-highlight */
+  --shadow-xs: 0 1px 2px 0 rgba(20, 24, 34, 0.04);
+  --shadow-sm: 0 1px 2px 0 rgba(20, 24, 34, 0.05),
+               0 1px 3px 0 rgba(20, 24, 34, 0.04);
+  --shadow-md: 0 2px 4px -1px rgba(20, 24, 34, 0.05),
+               0 6px 16px -4px rgba(20, 24, 34, 0.08),
+               0 1px 1px 0 rgba(255, 255, 255, 0.65) inset;
+  --shadow-lg: 0 4px 6px -2px rgba(20, 24, 34, 0.06),
+               0 12px 24px -8px rgba(20, 24, 34, 0.10),
+               0 1px 1px 0 rgba(255, 255, 255, 0.70) inset;
+  --shadow-xl: 0 6px 10px -2px rgba(20, 24, 34, 0.07),
+               0 20px 40px -12px rgba(20, 24, 34, 0.14),
+               0 1px 1px 0 rgba(255, 255, 255, 0.70) inset;
+  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--brand-500) 18%, transparent);
+}
+
+[data-tone="soft"][data-theme="dark"] {
+  --color-bg-primary:   var(--gray-900);
+  --color-bg-secondary: var(--gray-950);
+  --color-bg-tertiary:  var(--gray-800);
+  --color-bg-page:      var(--gray-950);
+
+  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.40),
+               0 6px 16px -4px rgba(0, 0, 0, 0.50),
+               0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
+  --shadow-lg: 0 4px 6px -2px rgba(0, 0, 0, 0.45),
+               0 12px 24px -8px rgba(0, 0, 0, 0.60),
+               0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Typography scale  (rem-based, root = 16px)
+   ───────────────────────────────────────────────────────── */
+:root {
+  --font-size-xs:   0.75rem;   /* 12 */
+  --font-size-sm:   0.875rem;  /* 14 */
+  --font-size-md:   1rem;      /* 16 */
+  --font-size-lg:   1.125rem;  /* 18 */
+  --font-size-xl:   1.25rem;   /* 20 */
+  --font-size-2xl:  1.5rem;    /* 24 */
+  --font-size-3xl:  1.875rem;  /* 30 */
+  --font-size-4xl:  2.25rem;   /* 36 */
+  --font-size-5xl:  3rem;      /* 48 */
+  --font-size-6xl:  3.75rem;   /* 60 */
+
+  --line-height-tight:   1.15;
+  --line-height-snug:    1.3;
+  --line-height-normal:  1.5;
+  --line-height-relaxed: 1.65;
+
+  --font-weight-regular: 400;
+  --font-weight-medium:  500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:    700;
+
+  --letter-tight:  -0.022em;
+  --letter-snug:   -0.012em;
+  --letter-normal: 0;
+  --letter-wide:   0.04em;
+}
+
+/* font pairs — selected via [data-font] */
+:root,
+[data-font="geist"] {
+  --font-sans: 'Geist', 'Anuphan', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+}
+[data-font="plex"] {
+  --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Thai Looped', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+}
+[data-font="system"] {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Spacing scale — base 4px (8px after 4)
+   ───────────────────────────────────────────────────────── */
+:root {
+  --space-0:  0;
+  --space-1:  0.25rem;  /* 4 */
+  --space-2:  0.5rem;   /* 8 */
+  --space-3:  0.75rem;  /* 12 */
+  --space-4:  1rem;     /* 16 */
+  --space-5:  1.25rem;  /* 20 */
+  --space-6:  1.5rem;   /* 24 */
+  --space-8:  2rem;     /* 32 */
+  --space-10: 2.5rem;   /* 40 */
+  --space-12: 3rem;     /* 48 */
+  --space-16: 4rem;     /* 64 */
+  --space-20: 5rem;     /* 80 */
+  --space-24: 6rem;     /* 96 */
+}
+
+/* ─────────────────────────────────────────────────────────
+   Radius scale — selected via [data-radius]
+   ───────────────────────────────────────────────────────── */
+:root,
+[data-radius="default"] {
+  --radius-xs:  2px;
+  --radius-sm:  4px;
+  --radius-md:  6px;
+  --radius-lg:  8px;
+  --radius-xl:  12px;
+  --radius-2xl: 16px;
+  --radius-full: 9999px;
+}
+[data-radius="sharp"] {
+  --radius-xs:  0px;
+  --radius-sm:  1px;
+  --radius-md:  2px;
+  --radius-lg:  3px;
+  --radius-xl:  4px;
+  --radius-2xl: 6px;
+  --radius-full: 9999px;
+}
+[data-radius="soft"] {
+  --radius-xs:  4px;
+  --radius-sm:  8px;
+  --radius-md:  12px;
+  --radius-lg:  14px;
+  --radius-xl:  18px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+}
+[data-radius="pill"] {
+  --radius-xs:  4px;
+  --radius-sm:  9999px;
+  --radius-md:  9999px;
+  --radius-lg:  9999px;
+  --radius-xl:  18px;
+  --radius-2xl: 22px;
+  --radius-full: 9999px;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Density — affects control sizes, not the spacing scale
+   ───────────────────────────────────────────────────────── */
+:root,
+[data-density="default"] {
+  --control-h-sm: 28px;
+  --control-h-md: 36px;
+  --control-h-lg: 44px;
+  --control-px-sm: 10px;
+  --control-px-md: 14px;
+  --control-px-lg: 18px;
+  --card-p:        24px;
+  --row-gap:       16px;
+}
+[data-density="compact"] {
+  --control-h-sm: 24px;
+  --control-h-md: 30px;
+  --control-h-lg: 38px;
+  --control-px-sm: 8px;
+  --control-px-md: 12px;
+  --control-px-lg: 16px;
+  --card-p:        16px;
+  --row-gap:       12px;
+}
+[data-density="comfortable"] {
+  --control-h-sm: 32px;
+  --control-h-md: 42px;
+  --control-h-lg: 52px;
+  --control-px-sm: 12px;
+  --control-px-md: 18px;
+  --control-px-lg: 22px;
+  --card-p:        32px;
+  --row-gap:       20px;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Layout — 12-column grid, breakpoints, container widths
+   ───────────────────────────────────────────────────────── */
+:root {
+  --grid-columns:       12;
+  --grid-gutter:        var(--space-6);   /* 24 */
+  --grid-gutter-tight:  var(--space-4);   /* 16 — used below sm */
+  --grid-margin:        var(--space-6);   /* 24 */
+  --grid-margin-lg:     var(--space-10);  /* 40 */
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+
+  --container-sm:    640px;
+  --container-md:    768px;
+  --container-lg:    1024px;
+  --container-xl:    1140px;
+  --container-prose: 1080px;
+}
+
+/* ─────────────────────────────────────────────────────────
+   Motion
+   ───────────────────────────────────────────────────────── */
+:root {
+  --duration-instant: 50ms;
+  --duration-fast:    120ms;
+  --duration-normal:  200ms;
+  --duration-slow:    320ms;
+  --duration-slower:  500ms;
+
+  --ease-linear:  linear;
+  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
+}