tera-system-ui 0.1.76 → 0.2.2

package/dist/themes/tera-ui-base.css

@@ -106,20 +106,33 @@ html.dark, .dark * {
     /* ── Fonts ──────────────────────────────────────────────────── */
     --font-sans: "Inter Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: "Geist Mono", "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
-
-    /* ── Border Radius ──────────────────────────────────────────── */
-    --border-radius-base: 0.25rem;
-    --border-radius-container: 0.5rem;
-    --tera-radius-sm: 2px;
-    --tera-radius-base: 6px;
-    --tera-radius-lg: 8px;
-    --tera-radius-xl: 20px;
-
-    /* ── Control Heights ────────────────────────────────────────── */
+    --font-display: var(--font-sans);   /* TYPE axis: headings/display — themes override (e.g. a grotesque) */
+
+    /* ── Border Radius (SHAPE axis — themes override these) ─────── */
+    /* "Detent" shape language: crisp, intentional, two-tier. Controls sit
+       at 6px; containers step up to 10px; nothing over-rounds. */
+    --border-radius-base: 0.375rem;      /* 6px — rounded */
+    --border-radius-container: 0.625rem; /* 10px — rounded-container — cards, dialogs, menus */
+    --tera-radius-sm: 4px;
+    --tera-radius-base: 6px;             /* rounded-md — buttons, inputs, selects */
+    --tera-radius-lg: 10px;              /* rounded-lg — tab tracks, larger controls */
+    --tera-radius-xl: 14px;
+
+    /* ── Control DENSITY: height + inline padding (themes override) ──
+       A scale of rungs; each component size-variant maps onto one rung.
+       Defaults reproduce the current per-component pixel values, so
+       existing themes are visually unchanged. A theme shifts density by
+       overriding the rung values. */
     --tera-control-height-xs: 20px;
     --tera-control-height-sm: 24px;
-    --tera-control-height-base: 32px;
-    --tera-control-height-lg: 40px;
+    --tera-control-height-base: 32px;   /* compact control (Button md) */
+    --tera-control-height-md: 36px;     /* comfortable control (Input/Select md) */
+    --tera-control-height-lg: 40px;     /* large control (Button/Input/Select lg) */
+
+    --tera-control-px-xs: 6px;          /* Button xs */
+    --tera-control-px-sm: 8px;          /* Button sm */
+    --tera-control-px-md: 12px;         /* Input/Select inline padding */
+    --tera-control-px-lg: 16px;         /* Button md/lg inline padding */
 
     /* ── Transitions ────────────────────────────────────────────── */
     --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -132,34 +145,47 @@ html.dark, .dark * {
     --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
+    /* ── Motion durations (MOTION axis — themes override) ───────── */
+    /* Snappier than before — the "detent" lands fast and resolves clean. */
+    --tera-duration-micro: 90ms;    /* micro hovers: menu/row/option highlight */
+    --tera-duration-fast: 130ms;
+    --tera-duration-base: 180ms;
+    --tera-duration-slow: 260ms;
+
     /* ── Responsive ─────────────────────────────────────────────── */
     --header-height: 3rem;
 
     /* ── Primitive Color Scales (static — never use in components) ── */
-    --color-neutral-1: rgb(255, 255, 255);
-    --color-neutral-2: rgb(252, 252, 252);
-    --color-neutral-3: rgb(245, 245, 245);
-    --color-neutral-4: rgb(240, 240, 240);
-    --color-neutral-5: rgb(217, 217, 217);
-    --color-neutral-6: rgb(191, 191, 191);
-    --color-neutral-7: rgb(140, 140, 140);
-    --color-neutral-8: rgb(89, 89, 89);
-    --color-neutral-9: rgb(69, 69, 69);
-    --color-neutral-10: rgb(38, 38, 38);
-    --color-neutral-11: rgb(31, 31, 31);
-    --color-neutral-12: rgb(20, 20, 20);
-    --color-neutral-13: rgb(0, 0, 0);
-
-    --color-primary-50: rgb(235, 243, 254);
-    --color-primary-100: rgb(194, 216, 252);
-    --color-primary-200: rgb(165, 198, 251);
-    --color-primary-300: rgb(124, 171, 249);
-    --color-primary-400: rgb(98, 155, 248);
-    --color-primary-500: rgb(59, 130, 246);
-    --color-primary-600: rgb(54, 118, 224);
-    --color-primary-700: rgb(42, 92, 175);
-    --color-primary-800: rgb(32, 72, 135);
-    --color-primary-900: rgb(25, 55, 103);
+    /* "Detent" neutral ramp: a refined COOL SLATE (low chroma toward ~250hue),
+       not default gray. Reads screen-native and engineered; carries a hint of
+       blue so the substrate feels designed, never generic-kit. 1 = page,
+       13 = ink. Contrast verified: text-secondary(8)/tertiary(7) clear AA. */
+    --color-neutral-1:  rgb(251, 252, 253);  /* #FBFCFD — page */
+    --color-neutral-2:  rgb(246, 248, 250);  /* #F6F8FA — raised */
+    --color-neutral-3:  rgb(238, 241, 245);  /* #EEF1F5 — sunken */
+    --color-neutral-4:  rgb(228, 233, 239);  /* #E4E9EF — hover */
+    --color-neutral-5:  rgb(212, 218, 226);  /* #D4DAE2 — border */
+    --color-neutral-6:  rgb(178, 187, 201);  /* #B2BBC9 — border-strong */
+    --color-neutral-7:  rgb(105, 116, 131);  /* #697483 — text-tertiary */
+    --color-neutral-8:  rgb( 83,  94, 109);  /* #535E6D — text-secondary */
+    --color-neutral-9:  rgb( 60,  69,  81);  /* #3C4551 */
+    --color-neutral-10: rgb( 40,  47,  57);  /* #282F39 */
+    --color-neutral-11: rgb( 28,  34,  42);  /* #1C222A */
+    --color-neutral-12: rgb( 18,  23,  30);  /* #12171E */
+    --color-neutral-13: rgb( 11,  15,  21);  /* #0B0F15 — ink (cool near-black) */
+
+    /* Primary: electric azure — crisper and more saturated than stock blue.
+       600 is the action fill (white text passes AA); 500 the brand voice. */
+    --color-primary-50:  rgb(236, 243, 255);
+    --color-primary-100: rgb(213, 227, 254);
+    --color-primary-200: rgb(175, 203, 253);
+    --color-primary-300: rgb(132, 171, 251);
+    --color-primary-400: rgb( 91, 141, 239);
+    --color-primary-500: rgb( 59, 125, 245);  /* #3B7DF5 */
+    --color-primary-600: rgb( 37,  99, 235);  /* #2563EB — action fill */
+    --color-primary-700: rgb( 29,  79, 196);  /* #1D4FC4 */
+    --color-primary-800: rgb( 26,  63, 150);
+    --color-primary-900: rgb( 22,  48, 110);
 
     --color-error-50: rgb(253, 236, 236);
     --color-error-100: rgb(250, 197, 197);
@@ -215,7 +241,24 @@ html.dark, .dark * {
     --color-secondary-700: rgb(168, 51, 109);
     --color-secondary-800: rgb(130, 40, 84);
     --color-secondary-900: rgb(99, 30, 64);
+}
 
+/* =================================================================
+   Derived colour layer — scale tokens → semantic tokens → status.
+   Scoped to :root AND any [data-theme] element (`:where` keeps the
+   [data-theme] match at ZERO specificity) so that activating a theme
+   on ANY element — not just <html> — re-resolves this var() chain
+   against that element's themed primitives.
+
+   Without this, a theme applied below the document root only recolours
+   primitive-based utilities (e.g. bg-primary-*, .btn-primary); the
+   semantic tokens (surface / text / interactive / status) keep the
+   values computed once on :root with the base primitives. `.dark`
+   (declared later, specificity 0,1,0) still wins over the :where match
+   for dark mode, and explicit per-theme overrides win as well.
+   ================================================================= */
+:root,
+:where([data-theme]) {
     /* ── Scale Tokens (alias primitives in light; flip in dark) ─── */
     /* Components use these — they are the semantic-safe color scale */
     --color-neutral-token-1: var(--color-neutral-1);
@@ -312,18 +355,44 @@ html.dark, .dark * {
     --color-information-text: var(--color-information-700);
 
     /* ── Elevation Shadows ───────────────────────────────────────── */
+    /* "Detent" elevation: shadows are slate-TINTED (rgb 15 23 42), not pure
+       black — they read as cast by a cool light, never muddy. Each step is a
+       contact + ambient pair so depth is present, not flat. Blurs stay tasteful. */
     --shadow-none: none;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
-    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.07);
+    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 5px -1px rgba(15, 23, 42, 0.08);
+    --shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.07), 0 10px 24px -6px rgba(15, 23, 42, 0.14);
+    --shadow-lg: 0 4px 10px -3px rgba(15, 23, 42, 0.10), 0 28px 56px -16px rgba(15, 23, 42, 0.24);
     --shadow-glow: 0 0 0 1px var(--color-primary-200),
-    0 4px 16px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
+    0 6px 18px color-mix(in srgb, var(--color-primary-500) 22%, transparent);
+    /* Signature: the "raised key" under the primary action — contact shadow +
+       an accent-tinted ambient glow, so the main action reads as a physical key. */
+    --shadow-key: 0 1px 2px rgba(15, 23, 42, 0.18),
+    0 4px 10px -2px color-mix(in srgb, var(--color-primary-600) 40%, transparent);
 
     /* ── Focus Shadows ───────────────────────────────────────────── */
-    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
-    --shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--color-error-500) 20%, transparent);
-    --shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500) 20%, transparent);
-    --shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 20%, transparent);
+    /* Confident 3px ring at 28% — the "selected detent". */
+    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 28%, transparent);
+    --shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--color-error-500) 28%, transparent);
+    --shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500) 28%, transparent);
+    --shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 28%, transparent);
+
+    /* =============================================================
+       Per-component override hooks (the "restyle internals" rung).
+       Recipes read these as OPTIONAL overrides with an INLINE FALLBACK to a
+       global token, e.g. rounded-[var(--tera-button-radius, var(--tera-radius-base))]
+       or [font-weight:var(--tera-button-font-weight, 400)]. So a var left UNSET
+       = the base look (the fallback owns the default — no duplication here, no
+       drift). Set one in a theme/app to retune a single component, e.g.:
+           [data-theme='x'] { --tera-input-radius: 12px; }
+       Hook names per component are registered in src/lib/tokens/index.ts
+       (componentVars). Current hooks: --tera-button-{radius,font-weight,
+       active-scale,hover-lift}; --tera-{input,select,text-area,card,badge,
+       checkbox,switch}-radius (+ --tera-select-content-radius);
+       --tera-accordion-{trigger-py,trigger-weight,content-pb}.
+       Themes set these to OVERRIDE (e.g. theme-cv-builder sets
+       --tera-button-font-weight). They are intentionally NOT defaulted here.
+       ============================================================= */
 
     /* ── Accordion Animations ────────────────────────────────────── */
     --animate-accordion-down: accordion-down 0.2s ease-out;
@@ -335,20 +404,21 @@ html.dark, .dark * {
 /* === Dark Mode Overrides                    === */
 /* ============================================= */
 .dark {
-    /* ── Neutral Tokens (token-1/3/4/5/6 use custom dark values) ── */
-    --color-neutral-token-1: rgb(9, 9, 9);
-    --color-neutral-token-2: rgb(20, 20, 20);
-    --color-neutral-token-3: rgb(32, 32, 32);
-    --color-neutral-token-4: rgb(48, 48, 48);
-    --color-neutral-token-5: rgb(70, 70, 70);
-    --color-neutral-token-6: rgb(95, 95, 95);
-    --color-neutral-token-7: rgb(140, 140, 140);
-    --color-neutral-token-8: rgb(191, 191, 191);
-    --color-neutral-token-9: rgb(217, 217, 217);
-    --color-neutral-token-10: rgb(240, 240, 240);
-    --color-neutral-token-11: rgb(245, 245, 245);
-    --color-neutral-token-12: rgb(252, 252, 252);
-    --color-neutral-token-13: rgb(255, 255, 255);
+    /* ── Neutral Tokens — "Detent" dark is a COOL CHARCOAL, not pure black.
+       Same slate hue as light, inverted; reads designed and reduces smear. ── */
+    --color-neutral-token-1:  rgb( 11,  14,  20);  /* #0B0E14 — page */
+    --color-neutral-token-2:  rgb( 17,  21,  29);  /* #11151D — raised */
+    --color-neutral-token-3:  rgb( 23,  28,  38);  /* #171C26 — sunken */
+    --color-neutral-token-4:  rgb( 31,  37,  48);  /* #1F2530 — hover */
+    --color-neutral-token-5:  rgb( 43,  50,  63);  /* #2B323F — border */
+    --color-neutral-token-6:  rgb( 58,  66,  82);  /* #3A4252 — border-strong */
+    --color-neutral-token-7:  rgb(107, 118, 137);  /* #6B7689 — text-tertiary */
+    --color-neutral-token-8:  rgb(154, 164, 180);  /* #9AA4B4 — text-secondary */
+    --color-neutral-token-9:  rgb(184, 192, 204);
+    --color-neutral-token-10: rgb(213, 218, 226);
+    --color-neutral-token-11: rgb(229, 232, 238);
+    --color-neutral-token-12: rgb(241, 243, 247);
+    --color-neutral-token-13: rgb(247, 249, 251);  /* near-white ink */
 
     /* ── Primary Tokens (reversed scale) ────────────────────────── */
     --color-primary-token-1: var(--color-primary-900);
@@ -395,10 +465,13 @@ html.dark, .dark * {
     --color-information-border: var(--color-information-700);
     --color-information-text: var(--color-information-400);
 
-    /* ── Shadow Overrides (white glow replaces black drop on dark bg) */
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
-    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
+    /* ── Shadow Overrides — deeper drop + a 1px white hairline so raised
+       surfaces separate from the cool-charcoal page. ── */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 5px -1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 10px 24px -6px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.06);
+    --shadow-lg: 0 4px 10px -3px rgba(0, 0, 0, 0.5), 0 28px 56px -16px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.06);
+    --shadow-key: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-500) 50%, transparent);
 
     /* ── Semantic Tokens (re-stated so var() resolves in .dark context) ── */
     --color-surface: var(--color-neutral-token-1);
@@ -449,6 +522,18 @@ html.dark, .dark * {
 
     --radius-container: var(--border-radius-container);
     --radius: var(--border-radius-base);
+    /* Map Tailwind's radius scale to tera shape tokens so rounded-md / rounded-lg
+       become theme-driven repo-wide (defaults below preserve current pixels). */
+    --radius-md: var(--tera-radius-base);
+    --radius-lg: var(--tera-radius-lg);
+
+    /* Expose the display font family as a `font-display` utility. */
+    --font-display: var(--font-display);
+
+    /* Bare `transition-*` utilities (no explicit duration suffix) inherit this.
+       Pointing it at the fast rung makes un-suffixed transitions theme-aware;
+       150ms equals Tailwind's own default, so existing themes are unchanged. */
+    --default-transition-duration: var(--tera-duration-fast);
 
     /* Primitive scales */
     --color-primary-50: var(--color-primary-50);
@@ -627,10 +712,12 @@ html.dark, .dark * {
     --color-information-text: var(--color-information-text);
 
     /* Elevation shadows */
+    --shadow-xs: var(--shadow-xs);
     --shadow-sm: var(--shadow-sm);
     --shadow-md: var(--shadow-md);
     --shadow-lg: var(--shadow-lg);
     --shadow-glow: var(--shadow-glow);
+    --shadow-key: var(--shadow-key);
     --shadow-focus: var(--shadow-focus);
     --shadow-focus-error: var(--shadow-focus-error);
     --shadow-focus-warning: var(--shadow-focus-warning);

package/dist/themes/theme-cv-builder.css

@@ -0,0 +1,146 @@
+/* ============================================= */
+/* === TeraUI — CV Builder Theme ("Precision Press") === */
+/* Target: the WeBuildCV résumé/CV builder app UI (chrome only — */
+/* CV/résumé template visuals keep their own hardcoded palette).  */
+/* Load AFTER tera-ui-base.css; activate with data-theme="cv-builder". */
+/* Brand: one decisive cerise on a pure-white page, near-black plum  */
+/* ink, Bricolage Grotesque + Inter. Light-mode-first (no dark v1).  */
+/* ============================================= */
+
+[data-theme='cv-builder'] {
+    /* ─────────────────────────────────────────────────────────────
+       COLOR — primary ramp → cerise.
+       500 is the brand voice (#E11D5C); it cascades to --color-interactive,
+       the focus ring + glow (color-mix from primary-500), and the brand
+       token. The primary button uses 600 (deep cerise) and brightens to
+       500 on hover, per the system's interaction language.
+       ───────────────────────────────────────────────────────────── */
+    --color-primary-50:  rgb(252, 231, 238);  /* #FCE7EE — cerise tint */
+    --color-primary-100: rgb(251, 208, 221);
+    --color-primary-200: rgb(247, 168, 192);
+    --color-primary-300: rgb(241, 120, 160);
+    --color-primary-400: rgb(236,  74, 126);
+    --color-primary-500: rgb(225,  29,  92);  /* #E11D5C — cerise */
+    --color-primary-600: rgb(192,  20,  80);  /* #C01450 — cerise deep */
+    --color-primary-700: rgb(138,  14,  58);  /* #8A0E3A — cerise ink */
+    --color-primary-800: rgb(110,  11,  46);
+    --color-primary-900: rgb( 86,   8,  35);
+
+    /* ─────────────────────────────────────────────────────────────
+       COLOR — neutral ramp → near-black plum ink on pink-tinted whites.
+       Overriding the primitives cascades through the scale tokens to every
+       semantic surface/text/border (light mode aliases token-N = neutral-N).
+       1 surface · 2 raised · 3 sunken · 4 hover · 5 border · 6 border-strong
+       · 7 text-tertiary · 8 text-secondary · 13 text-primary.
+       ───────────────────────────────────────────────────────────── */
+    --color-neutral-1:  rgb(255, 255, 255);  /* #FFFFFF — page / surface */
+    --color-neutral-2:  rgb(251, 247, 249);  /* #FBF7F9 — raised (cards) */
+    --color-neutral-3:  rgb(243, 237, 241);  /* #F3EDF1 — sunken (inputs) */
+    --color-neutral-4:  rgb(237, 229, 234);  /* #EDE5EA — hover */
+    --color-neutral-5:  rgb(232, 225, 229);  /* #E8E1E5 — border */
+    --color-neutral-6:  rgb(216, 206, 212);  /* #D8CED4 — border-strong */
+    --color-neutral-7:  rgb(154, 144, 151);  /* #9A9097 — text-tertiary */
+    --color-neutral-8:  rgb(108,  98, 106);  /* #6C626A — text-secondary */
+    --color-neutral-9:  rgb( 68,  59,  66);  /* #443B42 — ink-soft */
+    --color-neutral-10: rgb( 53,  45,  51);
+    --color-neutral-11: rgb( 44,  36,  42);
+    --color-neutral-12: rgb( 38,  31,  36);
+    --color-neutral-13: rgb( 33,  26,  31);  /* #211A1F — ink / text-primary */
+
+    /* ─────────────────────────────────────────────────────────────
+       COLOR — status. Utilitarian and distinct from the cerise voice.
+       Stops chosen so subtle(50)/border(200)/hover(400)/default(500)/
+       active(600)/text(700) all resolve cleanly.
+       ───────────────────────────────────────────────────────────── */
+    /* Success — green #1F9D6B on #E4F6EE */
+    --color-success-50:  rgb(228, 246, 238);
+    --color-success-100: rgb(195, 235, 217);
+    --color-success-200: rgb(155, 220, 192);
+    --color-success-400: rgb( 63, 181, 133);
+    --color-success-500: rgb( 31, 157, 107);  /* #1F9D6B */
+    --color-success-600: rgb( 26, 130,  89);
+    --color-success-700: rgb( 21, 106,  73);
+
+    /* Error / danger — orange-red #CF3B2B on #FBE7E3 (not pink — kept clear of cerise) */
+    --color-error-50:  rgb(251, 231, 227);
+    --color-error-100: rgb(246, 201, 193);
+    --color-error-200: rgb(239, 168, 155);
+    --color-error-400: rgb(220,  94,  77);
+    --color-error-500: rgb(207,  59,  43);  /* #CF3B2B */
+    --color-error-600: rgb(178,  47,  34);
+    --color-error-700: rgb(142,  37,  27);
+
+    /* Warning — amber #E6B24A on #FCF2DC, dark-amber text #6B4A0B */
+    --color-warning-50:  rgb(252, 242, 220);
+    --color-warning-100: rgb(248, 226, 180);
+    --color-warning-200: rgb(242, 208, 138);
+    --color-warning-400: rgb(235, 190,  95);
+    --color-warning-500: rgb(230, 178,  74);  /* #E6B24A */
+    --color-warning-600: rgb(200, 150,  58);
+    --color-warning-700: rgb(107,  74,  11);  /* #6B4A0B */
+
+    /* Information — neutral slate #6B7385 (deliberately not brand blue) on #EFF1F4 */
+    --color-information-50:  rgb(239, 241, 244);
+    --color-information-100: rgb(220, 223, 230);
+    --color-information-200: rgb(194, 199, 209);
+    --color-information-400: rgb(134, 142, 159);
+    --color-information-500: rgb(107, 115, 133);  /* #6B7385 */
+    --color-information-600: rgb( 86,  93, 108);
+    --color-information-700: rgb( 67,  73,  86);
+
+    /* Cerise focus ring at the brand's exact 28% (base derives 20% from primary-500). */
+    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 28%, transparent);
+
+    /* ─────────────────────────────────────────────────────────────
+       FEEL — SHAPE. Softer, more editorial than the base; cards cap at 16px.
+       Reaches rounded-md (buttons/inputs) and rounded-lg (tab tracks) via the
+       @theme radius wiring, and rounded-container (cards/dialogs/menus) directly.
+       ───────────────────────────────────────────────────────────── */
+    --border-radius-base:      0.5rem;   /* 8px — `rounded` */
+    --border-radius-container: 1rem;     /* 16px — cards, dialogs, menus (the cap) */
+    --tera-radius-sm:   6px;
+    --tera-radius-base: 8px;             /* rounded-md — buttons, inputs, selects */
+    --tera-radius-lg:   12px;            /* rounded-lg — tab tracks */
+    --tera-radius-xl:   16px;
+
+    /* FEEL — TYPE. Bricolage Grotesque for display/headings; Inter for UI; Geist for data. */
+    --font-display: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
+    --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
+
+    /* FEEL — ELEVATION. Flat at rest; soft, plum-tinted depth (rgba of #211A1F). */
+    --shadow-sm: 0 1px 2px rgba(33, 26, 31, 0.05);
+    --shadow-md: 0 3px 10px -3px rgba(33, 26, 31, 0.12);
+    --shadow-lg: 0 16px 40px -12px rgba(33, 26, 31, 0.22);
+
+    /* FEEL — MOTION. Fast, functional ease-out (quart); no bounce. */
+    --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
+    --tera-duration-micro: 90ms;        /* crisp micro-hovers, below the fast rung */
+    --tera-duration-fast: 140ms;
+    --tera-duration-base: 200ms;
+    --tera-duration-slow: 280ms;
+
+    /* FEEL — DENSITY. A touch more generous than the base, still tight. */
+    --tera-control-height-xs:   24px;
+    --tera-control-height-sm:   28px;
+    --tera-control-height-base: 36px;   /* Button md */
+    --tera-control-height-md:   40px;   /* Input/Select md */
+    --tera-control-height-lg:   44px;   /* lg controls */
+
+    --tera-control-px-xs: 8px;
+    --tera-control-px-sm: 10px;
+    --tera-control-px-md: 14px;         /* Input/Select inline padding */
+    --tera-control-px-lg: 18px;         /* Button inline padding */
+
+    /* FEEL — per-component overrides ("restyle internals" rung). Radius inherits
+       the theme's --tera-radius-base (8px). Precision Press wants buttons with a
+       touch more presence (medium weight) and a subtler, more precise press. */
+    --tera-button-font-weight: 500;
+    --tera-button-active-scale: 0.98;
+
+}
+
+/* Dark mode is intentionally NOT authored for v1 — "Precision Press" is
+   designed light-first (the pure-white page is the protagonist). Toggling
+   .dark falls back to the base auto-inversion; a bespoke dark direction is
+   a future follow-up. */

package/dist/themes/theme-professional.css

@@ -4,38 +4,13 @@
 /* Load after tera-ui-base.css */
 /* ============================================= */
 
-[data-theme='professional'],
-:root {
-    /* Primary: Tailwind blue-600 — more saturated than blue-500 */
-    --color-primary-500: rgb(37,  99,  235);   /* #2563EB */
-    --color-primary-600: rgb(29,  78,  216);   /* #1D4ED8 */
-    --color-primary-400: rgb(96,  165, 250);
-    --color-primary-200: rgb(191, 219, 254);
-    --color-primary-50:  rgb(239, 246, 255);
+/* The "Detent" base substrate now carries the Professional look directly —
+   electric-azure accent, cool-slate surfaces, crisp two-tier radii, fast
+   tactile motion, a real elevation model. Professional therefore INHERITS the
+   base wholesale (the divergence-ladder ideal: reach for the lightest rung).
+   This file is intentionally near-empty; add deltas here only when a future
+   Professional direction genuinely diverges from the base. */
 
-    /* Border radius — 2px more modern than AntDesign */
-    --border-radius-base:      0.5rem;   /* 8px */
-    --border-radius-container: 0.625rem; /* 10px — cards, dialogs */
-
-    /* Page background: cool off-white, softer than pure white */
-    --color-neutral-token-1: rgb(248, 250, 252); /* #F8FAFC */
-
-    /* Motion: fast, responsive */
-    --tera-theme-duration: 150ms;
-    --tera-theme-easing:   var(--ease-ui);
-    --tera-transition-base: var(--tera-theme-duration) var(--tera-theme-easing);
-
-    /* Card style: subtle shadow */
-    --tera-card-shadow: var(--shadow-sm);
-    --tera-card-radius: var(--border-radius-container);
-
-    /* No gradients in Professional */
-    --tera-gradient-primary: none;
-}
-
-[data-theme='professional'].dark,
-[data-theme='professional'] .dark {
-    --color-neutral-token-1: rgb(15,  23,  42);  /* slate-900 */
-    --color-neutral-token-2: rgb(30,  41,  59);  /* slate-800 */
-    --color-neutral-token-3: rgb(51,  65,  85);  /* slate-700 */
+[data-theme='professional'] {
+    /* Inherits the base. No overrides — the base is the Professional look. */
 }

package/dist/tokens/index.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Token map — typed `var()` references to the design-token contract.
+ *
+ * This is the cross-app contract that stays shared at every divergence rung.
+ * Use it for inline styles, programmatic config, or anywhere a Tailwind utility
+ * class isn't available; recipes generally reference tokens through utilities
+ * (e.g. `bg-surface`, `text-text-primary`) instead.
+ *
+ *   import { token } from 'tera-system-ui/tokens';
+ *   <div style:background={token.color.surfaceRaised} />
+ *
+ * `componentVars` lists the per-component override hooks (the "restyle
+ * internals" rung). Set them in a theme/app stylesheet to retune one
+ * component without touching markup, e.g. `--tera-button-radius: 16px`.
+ */
+export declare const token: {
+    readonly color: {
+        readonly surface: string;
+        readonly surfaceRaised: string;
+        readonly surfaceSunken: string;
+        readonly surfaceHover: string;
+        readonly surfaceControl: string;
+        readonly borderDefault: string;
+        readonly borderStrong: string;
+        readonly textPrimary: string;
+        readonly textSecondary: string;
+        readonly textTertiary: string;
+        readonly textDisabled: string;
+        readonly interactive: string;
+        readonly interactiveHover: string;
+        readonly interactiveActive: string;
+        readonly interactiveSubtle: string;
+        readonly interactiveBorder: string;
+        readonly interactiveText: string;
+        readonly interactiveOn: string;
+        readonly overlay: string;
+        readonly error: string;
+        readonly warning: string;
+        readonly success: string;
+        readonly information: string;
+        readonly brand: string;
+    };
+    readonly radius: {
+        readonly sm: string;
+        readonly base: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly container: string;
+    };
+    readonly duration: {
+        readonly micro: string;
+        readonly fast: string;
+        readonly base: string;
+        readonly slow: string;
+    };
+    readonly easing: {
+        readonly ui: string;
+        readonly spring: string;
+        readonly out: string;
+        readonly inOut: string;
+    };
+    readonly shadow: {
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly glow: string;
+        readonly focus: string;
+    };
+    readonly font: {
+        readonly sans: string;
+        readonly mono: string;
+        readonly display: string;
+    };
+};
+/**
+ * Per-component override hooks — the raw CSS custom-property names. Set these
+ * (not the values above) to restyle a single component's internals. Each
+ * defaults to a global axis token in tera-ui-base.css, so unset = base look.
+ */
+export declare const componentVars: {
+    readonly button: {
+        readonly radius: "--tera-button-radius";
+        readonly fontWeight: "--tera-button-font-weight";
+        readonly activeScale: "--tera-button-active-scale";
+        readonly hoverLift: "--tera-button-hover-lift";
+    };
+    readonly input: {
+        readonly radius: "--tera-input-radius";
+    };
+    readonly select: {
+        readonly radius: "--tera-select-radius";
+        readonly contentRadius: "--tera-select-content-radius";
+    };
+    readonly textArea: {
+        readonly radius: "--tera-textarea-radius";
+    };
+    readonly card: {
+        readonly radius: "--tera-card-radius";
+    };
+    readonly badge: {
+        readonly radius: "--tera-badge-radius";
+    };
+    readonly checkbox: {
+        readonly radius: "--tera-checkbox-radius";
+    };
+    readonly switch: {
+        readonly radius: "--tera-switch-radius";
+    };
+    readonly accordion: {
+        readonly triggerPy: "--tera-accordion-trigger-py";
+        readonly triggerWeight: "--tera-accordion-trigger-weight";
+        readonly contentPb: "--tera-accordion-content-pb";
+    };
+    readonly dialog: {
+        readonly radius: "--tera-dialog-radius";
+    };
+    readonly dropdownMenu: {
+        readonly radius: "--tera-dropdown-radius";
+    };
+    readonly popover: {
+        readonly radius: "--tera-popover-radius";
+    };
+    readonly tooltip: {
+        readonly radius: "--tera-tooltip-radius";
+    };
+    readonly drawer: {
+        readonly radius: "--tera-drawer-radius";
+    };
+    readonly slider: {
+        readonly radius: "--tera-slider-radius";
+    };
+    readonly alert: {
+        readonly radius: "--tera-alert-radius";
+    };
+    readonly combobox: {
+        readonly radius: "--tera-combobox-radius";
+        readonly contentRadius: "--tera-combobox-content-radius";
+    };
+    readonly tabs: {
+        readonly radius: "--tera-tabs-radius";
+    };
+    readonly avatar: {
+        readonly radius: "--tera-avatar-radius";
+    };
+    readonly table: {
+        readonly radius: "--tera-table-radius";
+    };
+    readonly command: {
+        readonly radius: "--tera-command-radius";
+    };
+    readonly skeleton: {
+        readonly radius: "--tera-skeleton-radius";
+    };
+    readonly dateRangePicker: {
+        readonly radius: "--tera-date-range-picker-radius";
+        readonly panelRadius: "--tera-date-range-picker-panel-radius";
+    };
+    readonly marketing: {
+        readonly featureCardRadius: "--tera-feature-card-radius";
+        readonly pricingCardRadius: "--tera-pricing-card-radius";
+        readonly testimonialCardRadius: "--tera-testimonial-card-radius";
+    };
+    readonly ai: {
+        readonly promptRadius: "--tera-ai-prompt-radius";
+    };
+};
+export type Token = typeof token;
+export type ComponentVars = typeof componentVars;