@clinia/tailwindcss 0.3.0 → 2.0.0-rc.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Clinia Health Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# @clinia/tailwindcss
+
+Clinia's brand tokens for Tailwind CSS v4: the colour palette, the light and dark theme as semantic tokens (`bg-primary`, `text-muted-foreground`, `border-emphasis`), the type scale, the radius scale, and the brand font faces.
+
+Components come from the `@clinia` shadcn registry, not from this package. Documentation, rules, and components: [ui.clinia.dev](https://ui.clinia.dev).
+
+## Install
+
+The theme registry item installs this package and writes the imports for you:
+
+```bash
+pnpm dlx shadcn@latest add @clinia/theme            # product apps
+pnpm dlx shadcn@latest add @clinia/theme-marketing  # marketing sites
+```
+
+To install it by hand:
+
+```bash
+pnpm add @clinia/tailwindcss
+```
+
+```css
+@import "@clinia/tailwindcss/fonts";
+@import "@clinia/tailwindcss";
+```
+
+## Entry points
+
+| Import | What it adds |
+|---|---|
+| `@clinia/tailwindcss` | The theme: semantic tokens for light and dark, exposed to Tailwind |
+| `@clinia/tailwindcss/tokens` | The raw brand palette and font stacks only |
+| `@clinia/tailwindcss/fonts` | The `@font-face` declarations for the seven licensed faces |
+| `@clinia/tailwindcss/marketing` | The illustration roles for marketing scenes. Marketing sites only |
+
+Dark mode follows a `dark` class on `<html>` or any ancestor; `light` pins a subtree back to light.
+
+## Fonts
+
+The package declares the brand faces but ships no font files: CircularXX and NaN Serf B are licensed per property and can't be redistributed. Put the seven `.woff2` files in your app's `public/fonts/`: [App getting started](https://ui.clinia.dev/docs/app/getting-started#3-host-the-brand-fonts) lists them and where to get them.
+
+## Licence
+
+MIT. The brand fonts are not part of this licence.

package/fonts.css

@@ -1,38 +1,14 @@
-/* ============================================================================
- * Clinia – Font loading
- *
- * Drop this file into your app's global CSS *once* and place the licensed
- * woff2 files at the paths declared below. The package itself does not ship
- * the font binaries — Lineto (CircularXX) and Sharp Type (Gothia Serif)
- * licenses are non-redistributable.
- *
- * Usage in a Next.js or Vite app:
- *   1. Drop the woff2 files in `public/fonts/` (paths must match the URLs below).
- *   2. Import this file from your app's globals.css *before* @clinia/ui's theme:
- *        @import "@clinia/ui/fonts";
- *        @import "@clinia/ui/styles";
- *   3. Preload the two faces above the fold in your HTML <head>:
- *        <link rel="preload" href="/fonts/CircularXX-Book.woff2"
- *              as="font" type="font/woff2" crossorigin />
- *        <link rel="preload" href="/fonts/CircularXX-Medium.woff2"
- *              as="font" type="font/woff2" crossorigin />
- *
- * Why these specific weights:
- *   - Pulled directly from the Clinia – Brand Guidelines Figma text styles.
- *   - CircularXX: Book (most body), Regular (titles), Medium (labels, eyebrows).
- *   - Gothia Serif: Book (Display XL/L), Regular (Huge, Display M/S).
- *   - CircularXX Mono: Regular (Eyebrow L/S, Dev Body).
- *
- * Performance:
- *   - `font-display: swap` paints fallback first, swaps when the file lands.
- *     Avoids invisible text (FOIT). Pairs with the fallback stack tuned in
- *     tokens.css.
- *   - `unicode-range: U+0000-00FF, U+0131, ...` requests the latin subset only.
- *     Cuts ~40% off file size. Drop or extend if you serve other scripts.
- *   - Subset your woff2 with `pyftsubset` or `glyphhanger` before deploying.
- * ========================================================================== */
+/* Clinia font loading.
+ * Import once, before the theme:
+ *   @import "@clinia/tailwindcss/fonts";
+ *   @import "@clinia/tailwindcss";
+ * Place the seven licensed woff2 files at the /fonts/ paths below. The package does not ship them: the Lineto (CircularXX) and NaN (NaN Serf B) licenses forbid redistributing the binaries.
+ * Faces: CircularXX Book 400, Regular 450, Medium 500, Book Italic 400, Medium Italic 500; CircularXX Mono Regular 400; NaN Serf B Book 400.
+ * Each face requests the latin subset only through unicode-range. Extend it if you serve other scripts.
+ * Preload the above-the-fold faces (CircularXXWeb-Book and CircularXXWeb-Medium) with <link rel="preload" as="font" type="font/woff2" crossorigin>.
+ */
 
-/* ---------- CircularXX (UI Sans) ---------------------------------------- */
+/* CircularXX, the UI sans. */
 @font-face {
   font-family: "CircularXX";
   src: url("/fonts/CircularXXWeb-Book.woff2") format("woff2");
@@ -44,6 +20,17 @@
     U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+@font-face {
+  font-family: "CircularXX";
+  src: url("/fonts/CircularXXWeb-BookItalic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 @font-face {
   font-family: "CircularXX";
   src: url("/fonts/CircularXXWeb-Regular.woff2") format("woff2");
@@ -66,7 +53,18 @@
     U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* ---------- CircularXX Mono --------------------------------------------- */
+@font-face {
+  font-family: "CircularXX";
+  src: url("/fonts/CircularXXWeb-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* CircularXX Mono. */
 @font-face {
   font-family: "CircularXX Mono";
   src: url("/fonts/CircularXXMonoWeb-Regular.woff2") format("woff2");
@@ -77,23 +75,13 @@
     U+20AC, U+2122, U+FEFF, U+FFFD;
 }
 
-/* ---------- Gothia Serif (Display) -------------------------------------- */
+/* NaN Serf B, the display face. Book 400 only; no italic. */
 @font-face {
-  font-family: "Gothia Serif";
-  src: url("/fonts/GothiaSerif-Book.woff2") format("woff2");
+  font-family: "NaN Serf B";
+  src: url("/fonts/NaNSerfBText-Book.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
     U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
 }
-
-@font-face {
-  font-family: "Gothia Serif";
-  src: url("/fonts/GothiaSerif-Regular.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
-}

package/marketing.css

@@ -0,0 +1,29 @@
+/* @clinia/tailwindcss/marketing, for marketing surfaces only.
+ *
+ * Illustration roles for the scenes on Clinia's marketing sites (the patient
+ * graphs on clinia.com): one colour per entity type, for its dot and the tint
+ * and outline of the tags that point to it. Every value is a brand swatch, the
+ * same in both themes.
+ *
+ * Use them in illustrations only, not for UI controls, text or states. Product
+ * (base-luma) apps do not import this file. Import it after the theme:
+ *   @import "@clinia/tailwindcss";
+ *   @import "@clinia/tailwindcss/marketing";
+ */
+
+:root {
+  /* Conditions: T2 diabetes, retinopathy. Vital #ff5c00, for illustration only. */
+  --scene-condition: var(--clinia-vital);
+
+  /* Labs and measures: HbA1c. */
+  --scene-lab: var(--clinia-trust);
+
+  /* Medications and treatments: metformin, lisinopril. */
+  --scene-medication: var(--clinia-purple-5);
+}
+
+@theme inline {
+  --color-scene-condition: var(--scene-condition);
+  --color-scene-lab: var(--scene-lab);
+  --color-scene-medication: var(--scene-medication);
+}

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@clinia/tailwindcss",
-  "version": "0.3.0",
-  "description": "Clinia design-system: Tailwind v4 tokens, theme, and style layers.",
+  "version": "2.0.0-rc.2",
+  "description": "Clinia design-system: Tailwind v4 tokens, theme, and fonts.",
   "license": "MIT",
+  "homepage": "https://ui.clinia.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clinia/ui.git",
+    "directory": "packages/tailwindcss"
+  },
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -12,11 +18,12 @@
     "./tokens": "./tokens.css",
     "./theme": "./theme.css",
     "./fonts": "./fonts.css",
-    "./style-sera": "./style-sera.css",
-    "./style-luma": "./style-luma.css"
+    "./marketing": "./marketing.css"
   },
   "files": [
-    "*.css"
+    "*.css",
+    "README.md",
+    "LICENSE"
   ],
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"

package/theme.css

@@ -1,44 +1,27 @@
-/* ============================================================================
- * Clinia Theme — Tailwind v4
- *
- * Architecture (modern shadcn + Tailwind v4 pattern, with style layering):
- *   1. Raw brand palette + fonts live in `tokens.css` (the brand truth).
- *   2. Semantic *color* tokens (background, foreground, primary, …) are declared
- *      here on `:root` (light) and `.dark` (dark) — one shared color truth
- *      across every Clinia surface.
- *   3. *Shape* tokens (radii, shadows, spacing density, control treatment) are
- *      declared in style layers — `style-sera.css` and `style-luma.css` —
- *      and gated by `[data-style="sera"|"luma"]` on the root. Apps pick one;
- *      brand sites typically pick Sera, product surfaces pick Luma.
- *   4. `@theme inline` re-exposes the semantic variables to Tailwind so
- *      utilities like `bg-primary`, `rounded-md`, etc. resolve correctly and
- *      switch with both theme (light/dark) and style (sera/luma).
- *
- * Accessibility:
- *   - All text-on-surface pairs target WCAG AA at minimum.
- *   - Brand orange (Vital) is paired with deep Infinite text — never white —
- *     because white-on-Vital fails AA for normal text (≈3.1:1).
- *   - Focus ring uses Vital at 2px to remain visible on any surface.
- *
- * Dark mode:    add `class="dark"` to <html> (or any ancestor).
- * Style choice: add `data-style="sera"` or `data-style="luma"` to <html>.
- *               No attribute = the neutral default (radius 0.5rem, light shadow).
- * ========================================================================== */
+/* Clinia theme for Tailwind v4.
+ * Maps the brand swatches in tokens.css to semantic tokens on :root and .light (light) and .dark (dark), plus one set of shape tokens, and exposes them to Tailwind through @theme inline.
+ * Dark mode: add class="dark" to <html> or any ancestor.
+ * Accessibility: every text pair meets WCAG AA in both themes. accent (Trust) is a 3:1 color: borders, icons, selected states, and text from 24px or 18.66px bold. Never body or label text, never a fill behind small text.
+ * ring is Trust in both themes.
+ */
 
 @import "tailwindcss";
 @import "./tokens.css";
 
 @custom-variant dark (&:is(.dark *));
 
-/* ---------- Light theme (default) ---------------------------------------- */
-:root {
-  /* Shape defaults — overridden by style layers when [data-style] is set.  */
-  --radius: 0.5rem;
+/* Maps `data-horizontal:` and `data-vertical:` (slider, tabs, separator) onto the `data-orientation` attribute Base UI emits. */
+@custom-variant data-horizontal (&[data-orientation="horizontal"]);
+@custom-variant data-vertical (&[data-orientation="vertical"]);
+
+/* Light theme, the default. .light redeclares every token, so a light island inside .dark gets light values. */
+:root,
+.light {
+  /* Shape. 0.625rem is the shadcn Luma default; a surface may override --radius locally. */
+  --radius: 0.625rem;
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
   --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
   --shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 0.10);
-  --tracking-display: -0.01em;
-  --tracking-eyebrow: 0.1em;
   --button-text-transform: none;
   --button-letter-spacing: normal;
 
@@ -51,19 +34,20 @@
   --popover: #ffffff;
   --popover-foreground: var(--clinia-infinite);
 
-  /* Primary = Infinite (deep brand black) — high-contrast default action.    */
+  /* Primary: Infinite #1a1a1e, the default action. */
   --primary: var(--clinia-infinite);
   --primary-foreground: var(--clinia-serene);
 
-  /* Secondary = Remedy (warm cream) — low-emphasis surfaces.                 */
+  /* Secondary: Remedy #fcf8ef, low-emphasis surfaces. */
   --secondary: var(--clinia-remedy);
   --secondary-foreground: var(--clinia-infinite);
 
   --muted: var(--clinia-remedy);
   --muted-foreground: var(--clinia-infinite-4);
 
-  /* Accent = Vital orange — brand emphasis, always paired with dark text.    */
-  --accent: var(--clinia-vital);
+  /* Accent: Trust #95795c, brand emphasis. 3:1 color: 4.00:1 on the background (Serene #fffdf9), 4.27:1 on Infinite #1a1a1e.
+   * --accent-foreground (Infinite) is valid on a Trust fill from 24px, never at label size. */
+  --accent: var(--clinia-trust);
   --accent-foreground: var(--clinia-infinite);
 
   --destructive: #b91c1c;
@@ -76,15 +60,18 @@
   --warning-foreground: var(--clinia-infinite);
 
   --border: var(--clinia-infinite-1);
-  --input: var(--clinia-infinite-1);
-  --ring: var(--clinia-vital);
+  --input: #8c8c8c;            /* derived neutral, boundary use only          */
+  --ring: var(--clinia-trust);
 
-  /* Chart palette drawn from across the brand families.                      */
-  --chart-1: var(--clinia-vital);
+  /* Selected/hover outlines, section rules, the one emphasis moment per view. */
+  --border-emphasis: var(--clinia-trust);
+
+  /* Chart palette led by Trust, drawn from across the brand families. */
+  --chart-1: var(--clinia-trust);
   --chart-2: var(--clinia-thistle);
   --chart-3: var(--clinia-noble);
-  --chart-4: var(--clinia-trust);
-  --chart-5: var(--clinia-purple-5);
+  --chart-4: var(--clinia-purple-5);
+  --chart-5: var(--clinia-peach-4);
 
   /* Sidebar tokens alias the base semantic tokens.                           */
   --sidebar: var(--background);
@@ -97,12 +84,13 @@
   --sidebar-ring: var(--ring);
 }
 
-/* ---------- Dark theme ---------------------------------------------------- */
+/* Dark theme, under class="dark". */
 .dark {
   --background: var(--clinia-infinite);
   --foreground: var(--clinia-serene);
 
-  --card: #232327;             /* one stop above --background for surface lift */
+  /* One step above --background, so cards lift off the page. */
+  --card: #232327;
   --card-foreground: var(--clinia-serene);
 
   --popover: #232327;
@@ -118,7 +106,7 @@
   --muted: var(--clinia-infinite-5);
   --muted-foreground: var(--clinia-infinite-2);
 
-  --accent: var(--clinia-vital);
+  --accent: var(--clinia-trust);
   --accent-foreground: var(--clinia-infinite);
 
   --destructive: #ef6b5c;
@@ -131,10 +119,12 @@
   --warning-foreground: var(--clinia-infinite);
 
   --border: var(--clinia-infinite-5);
-  --input: var(--clinia-infinite-5);
-  --ring: var(--clinia-vital);
+  --input: #777777;            /* derived neutral, boundary use only          */
+  --ring: var(--clinia-trust);
+
+  --border-emphasis: var(--clinia-trust);
 
-  --chart-1: var(--clinia-peach-2);
+  --chart-1: var(--clinia-trust);
   --chart-2: var(--clinia-purple-5);
   --chart-3: var(--clinia-beige-5);
   --chart-4: var(--clinia-purple-3);
@@ -146,13 +136,19 @@
   --sidebar-primary-foreground: var(--primary-foreground);
   --sidebar-accent: var(--accent);
   --sidebar-accent-foreground: var(--accent-foreground);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: var(--border);
   --sidebar-ring: var(--ring);
 }
 
-/* ---------- Tailwind theme bridge ---------------------------------------- */
+/* Exposes the semantic tokens as Tailwind utilities. */
+/* Letter spacing for display headlines and eyebrows, exposed as `tracking-display` and `tracking-eyebrow`. */
+@theme {
+  --tracking-display: -0.01em;
+  --tracking-eyebrow: 0.1em;
+}
+
 @theme inline {
-  /* Surface + intent colors */
+  /* Surface + intent colours */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
 
@@ -184,6 +180,8 @@
   --color-warning-foreground: var(--warning-foreground);
 
   --color-border: var(--border);
+  /* Tailwind builds colour utilities from --color-*, so this name yields `border-emphasis`, `ring-emphasis`, `bg-emphasis` and `text-emphasis`. */
+  --color-emphasis: var(--border-emphasis);
   --color-input: var(--input);
   --color-ring: var(--ring);
 
@@ -202,7 +200,7 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Direct access to raw brand swatches when explicitly needed.              */
+  /* Raw brand swatches as `brand-*` utilities, for marketing surfaces only. Product UI uses the semantic tokens. */
   --color-brand-vital: var(--clinia-vital);
   --color-brand-infinite: var(--clinia-infinite);
   --color-brand-serene: var(--clinia-serene);
@@ -211,16 +209,16 @@
   --color-brand-mend: var(--clinia-mend);
   --color-brand-trust: var(--clinia-trust);
 
-  /* Radius scale derived from a single base. */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  /* Radius scale as multiples of --radius, matching shadcn, so it follows when Luma re-bases --radius inside the sidebar. */
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.4);
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
 
-  /* Type scale — names mirror the Figma styles for traceability. */
+  /* Type scale. Names match the Figma text styles. */
   --font-display: var(--clinia-font-display);
   --font-sans: var(--clinia-font-sans);
   --font-mono: var(--clinia-font-mono);
@@ -243,7 +241,7 @@
   --text-eyebrow-s: 0.625rem;    /* 10 / Eyebrow S   */
 }
 
-/* ---------- Base reset --------------------------------------------------- */
+/* Base styles. */
 @layer base {
   * {
     border-color: var(--border);
@@ -252,6 +250,8 @@
   html {
     color-scheme: light;
     font-family: var(--clinia-font-sans);
+    /* Missing weights and italics fall back instead of being faked. */
+    font-synthesis: none;
   }
 
   html.dark {
@@ -272,14 +272,17 @@
     border-radius: 2px;
   }
 
-  /* Honor reduced-motion preference everywhere by default. */
+  /* Honour reduced-motion preference everywhere by default. */
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
       animation-duration: 0.01ms !important;
+      animation-delay: 0s !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
+      /* A staggered build would otherwise still wait its turn. */
+      transition-delay: 0s !important;
       scroll-behavior: auto !important;
     }
   }

package/tokens.css

@@ -1,33 +1,26 @@
-/* ============================================================================
- * Clinia Brand Tokens
- * Source: Clinia – Brand Guidelines (Figma)
- *   https://www.figma.com/design/aF7fTYG31l7DcKdySyk6yH
- *
- * These are the raw brand values pulled from the Figma paint + text styles.
- * Do NOT use these directly in components — consume the semantic tokens in
- * `theme.css` (e.g., `--color-primary`, `--color-accent`) so light/dark
- * theming and accessibility guarantees remain intact.
- * ========================================================================== */
+/* Clinia brand tokens: the raw swatches and font stacks from the brand guidelines' Figma paint and text styles.
+ * Components use the semantic tokens in theme.css (`--color-primary`, `--color-accent`), which carry the light and dark themes and the contrast guarantees. Never use these directly.
+ */
 
 @layer base {
   :root {
-    /* --- Foundation ------------------------------------------------------ */
-    --clinia-infinite: #1a1a1e; /* Brand black — anchors the system        */
+    /* Foundation. Infinite is the brand black that anchors the system. */
+    --clinia-infinite: #1a1a1e;
     --clinia-infinite-5: #333333;
     --clinia-infinite-4: #666666;
     --clinia-infinite-3: #999999;
     --clinia-infinite-2: #cdcdcd;
     --clinia-infinite-1: #e2e2e2;
 
-    /* --- Beige / Tan (warm neutrals) ------------------------------------ */
-    --clinia-serene: #fffdf9;       /* Brand cream — page background       */
+    /* Beige and tan, the warm neutrals. Serene is the brand cream page background. */
+    --clinia-serene: #fffdf9;
     --clinia-remedy: #fcf8ef;
     --clinia-beige-3: #f1e3cb;
     --clinia-remedy-dark: #ecd9b9;
     --clinia-beige-5: #dbbe87;
     --clinia-noble: #cca44f;
 
-    /* --- Purple (cool accent family) ------------------------------------ */
+    /* Purple, the cool accent family. */
     --clinia-purple-1: #faf7ff;
     --clinia-aura: #f8f1ff;
     --clinia-purple-3: #ede5f6;
@@ -35,21 +28,18 @@
     --clinia-purple-5: #cabbdb;
     --clinia-purple-6: #b3a0ae;
 
-    /* --- Peach / Orange (warm accent family) ---------------------------- */
+    /* Peach and orange, the warm accent family. */
     --clinia-mend: #ffccaf;
     --clinia-peach-2: #fd945f;
-    --clinia-vital: #ff5c00;        /* Brand orange — flagship accent      */
+    /* Approved marketing highlights only. */
+    --clinia-vital: #ff5c00;
     --clinia-peach-4: #cb6a3d;
     --clinia-peach-5: #b3724c;
+    /* Flagship accent, a 3:1 colour. */
     --clinia-trust: #95795c;
 
-    /* --- Typography ------------------------------------------------------
-     * Gothia Serif and CircularXX are licensed fonts. Self-host the .woff2
-     * files via @font-face in your app's CSS or use a hosting provider.
-     * Fallbacks are tuned to keep editorial vs. UI character distinct.
-     * ----------------------------------------------------------------- */
-    --clinia-font-display: "Gothia Serif", "GT Sectra", "Tiempos Headline",
-      Georgia, "Times New Roman", serif;
+    /* Typography. NaN Serf B and CircularXX are licensed: import @clinia/tailwindcss/fonts and self-host the woff2 files. */
+    --clinia-font-display: "NaN Serf B", "Source Serif 4", Georgia, serif;
     --clinia-font-sans: "CircularXX", "Inter", -apple-system, BlinkMacSystemFont,
       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --clinia-font-mono: "CircularXX Mono", "JetBrains Mono", ui-monospace,

package/style-luma.css

@@ -1,80 +0,0 @@
-/* ============================================================================
- * Luma — shape layer
- *
- * Rounded geometry. Soft elevation. Breathable layouts. The shape system for
- * Clinia's product surfaces — clinical workflows, search consoles, login,
- * settings. Calmer than Sera, with enough lift to guide the eye through
- * dense interfaces without shouting.
- *
- * Activate by adding `data-style="luma"` to <html> (or any ancestor).
- *
- * Design notes:
- *   - radius bumps to 0.875rem — soft but not pill-y.
- *   - shadows are subtle but real. Cards earn the lift; popovers earn more.
- *   - typography stays sans (no uppercase tracking on buttons). The voice
- *     here is calm-and-competent, not editorial.
- *   - transitions soften slightly (180ms ease-out) so hover states feel
- *     considered, not snappy.
- * ========================================================================== */
-
-[data-style="luma"] {
-  --radius: 0.875rem;
-
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04),
-               0 1px 1px 0 rgb(0 0 0 / 0.03);
-  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06),
-               0 4px 12px -4px rgb(0 0 0 / 0.08);
-  --shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 0.12),
-               0 16px 48px -16px rgb(0 0 0 / 0.10);
-
-  --tracking-display: -0.015em;
-  --tracking-eyebrow: 0.08em;
-
-  --button-text-transform: none;
-  --button-letter-spacing: -0.005em;
-}
-
-/* Dark mode shadow tuning — increase opacity slightly so elevation reads. */
-.dark[data-style="luma"],
-[data-style="luma"] .dark,
-.dark [data-style="luma"] {
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30),
-               0 1px 1px 0 rgb(0 0 0 / 0.20);
-  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.35),
-               0 4px 12px -4px rgb(0 0 0 / 0.25);
-  --shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 0.40),
-               0 16px 48px -16px rgb(0 0 0 / 0.30);
-}
-
-/* ---------- Component-level expression ---------------------------------- */
-@layer components {
-  /* Buttons: subtle hover lift. Pairs with the soft shadow on press. */
-  [data-style="luma"] :where(button, [role="button"], a[role="button"]) {
-    transition-duration: 180ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  /* Cards: visible elevation, generous radius. */
-  [data-style="luma"] :where(.shadow-sm) {
-    box-shadow: var(--shadow-sm);
-  }
-  [data-style="luma"] :where(.shadow, .shadow-md) {
-    box-shadow: var(--shadow-md);
-  }
-  [data-style="luma"] :where(.shadow-lg) {
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Inputs: softer borders, slight inner shadow for depth. */
-  [data-style="luma"] :where(input, textarea, select) {
-    transition: border-color 160ms ease, box-shadow 160ms ease;
-  }
-  [data-style="luma"] :where(input, textarea, select):not(:focus) {
-    box-shadow: inset 0 1px 0 0 rgb(0 0 0 / 0.02);
-  }
-
-  /* Headings: confident negative tracking for tighter rhythm. */
-  [data-style="luma"] :where(h1, h2, h3) {
-    letter-spacing: var(--tracking-display);
-  }
-}

package/style-sera.css

@@ -1,75 +0,0 @@
-/* ============================================================================
- * Sera — shape layer
- *
- * Typography-first, print-inspired. Square corners, uppercase tracking,
- * underlined controls. Built for Clinia's brand surfaces (marketing site,
- * editorial content) where the Gothia Serif + CircularXX + CircularXX Mono
- * pairing carries the visual weight.
- *
- * Activate by adding `data-style="sera"` to <html> (or any ancestor).
- *
- * Design notes:
- *   - radius collapses to 0 — every edge is a hairline.
- *   - shadows go away. Cards/popovers separate via 1px borders only.
- *   - body text inherits sans (CircularXX); headings should set
- *     `font-display` (Gothia Serif) at the consumer level.
- *   - buttons get tracked, slightly uppercase typography to match the
- *     editorial register without committing to ALL CAPS everywhere.
- *   - links and ghost buttons receive an offset underline for
- *     "underlined controls".
- * ========================================================================== */
-
-[data-style="sera"] {
-  --radius: 0;
-
-  --shadow-sm: 0 0 0 1px var(--border);
-  --shadow-md: 0 0 0 1px var(--border);
-  --shadow-lg: 0 0 0 1px var(--border);
-
-  --tracking-display: 0;
-  --tracking-eyebrow: 0.18em;
-
-  --button-text-transform: uppercase;
-  --button-letter-spacing: 0.08em;
-}
-
-/* ---------- Component-level expression ---------------------------------- */
-@layer components {
-  /* Buttons: editorial chrome. Default fill keeps the Confident voice;
-     uppercase + tracking adds the print-inspired register. */
-  [data-style="sera"] :where(button, [role="button"], a[role="button"]) {
-    text-transform: var(--button-text-transform);
-    letter-spacing: var(--button-letter-spacing);
-    font-weight: 500;
-  }
-
-  /* Link variant gets the explicit underline. */
-  [data-style="sera"] :where(a:not([role="button"])) {
-    text-underline-offset: 4px;
-    text-decoration-thickness: 1px;
-  }
-
-  /* Cards: hairline only, no shadow lift. The border and the negative
-     space carry the structure. */
-  [data-style="sera"] :where(.shadow-sm, .shadow, .shadow-md, .shadow-lg) {
-    box-shadow: 0 0 0 1px var(--border);
-  }
-
-  /* Headings: editorial spacing. Tighter line-height, slight tracking. */
-  [data-style="sera"] :where(h1, h2, h3) {
-    letter-spacing: var(--tracking-display);
-    line-height: 1.05;
-  }
-
-  /* Eyebrows already exist as a brand pattern. Sera amps the tracking. */
-  [data-style="sera"] :where(.eyebrow, [data-eyebrow]) {
-    text-transform: uppercase;
-    letter-spacing: var(--tracking-eyebrow);
-    font-family: var(--clinia-font-mono);
-  }
-
-  /* Inputs: square, hairline border, no inner shadow. */
-  [data-style="sera"] :where(input, textarea, select) {
-    box-shadow: none;
-  }
-}