@clinia/tailwindcss 0.2.0

package/fonts.css

@@ -0,0 +1,99 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+/* ---------- CircularXX (UI Sans) ---------------------------------------- */
+@font-face {
+  font-family: "CircularXX";
+  src: url("/fonts/CircularXXWeb-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+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");
+  font-weight: 450; /* Regular falls between 400/500 in the Lineto cut. */
+  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+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-Medium.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+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");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
+    U+20AC, U+2122, U+FEFF, U+FFFD;
+}
+
+/* ---------- Gothia Serif (Display) -------------------------------------- */
+@font-face {
+  font-family: "Gothia Serif";
+  src: url("/fonts/GothiaSerif-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/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@clinia/tailwindcss",
+  "version": "0.2.0",
+  "description": "Clinia design-system: Tailwind v4 tokens, theme, and style layers.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./theme.css",
+    "./tokens": "./tokens.css",
+    "./theme": "./theme.css",
+    "./fonts": "./fonts.css",
+    "./style-sera": "./style-sera.css",
+    "./style-luma": "./style-luma.css"
+  },
+  "files": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  }
+}

package/style-luma.css

@@ -0,0 +1,80 @@
+/* ============================================================================
+ * 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

@@ -0,0 +1,75 @@
+/* ============================================================================
+ * 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;
+  }
+}

package/theme.css

@@ -0,0 +1,255 @@
+/* ============================================================================
+ * 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).
+ * ========================================================================== */
+
+@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;
+  --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;
+
+  --background: var(--clinia-serene);
+  --foreground: var(--clinia-infinite);
+
+  --card: #ffffff;
+  --card-foreground: var(--clinia-infinite);
+
+  --popover: #ffffff;
+  --popover-foreground: var(--clinia-infinite);
+
+  /* Primary = Infinite (deep brand black) — high-contrast default action.    */
+  --primary: var(--clinia-infinite);
+  --primary-foreground: var(--clinia-serene);
+
+  /* Secondary = Remedy (warm cream) — 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-foreground: var(--clinia-infinite);
+
+  --destructive: #b91c1c;
+  --destructive-foreground: var(--clinia-serene);
+
+  --success: #2d7d5e;
+  --success-foreground: var(--clinia-serene);
+
+  --warning: var(--clinia-noble);
+  --warning-foreground: var(--clinia-infinite);
+
+  --border: var(--clinia-infinite-1);
+  --input: var(--clinia-infinite-1);
+  --ring: var(--clinia-vital);
+
+  /* Chart palette drawn from across the brand families.                      */
+  --chart-1: var(--clinia-vital);
+  --chart-2: var(--clinia-thistle);
+  --chart-3: var(--clinia-noble);
+  --chart-4: var(--clinia-trust);
+  --chart-5: var(--clinia-purple-5);
+}
+
+/* ---------- Dark theme ---------------------------------------------------- */
+.dark {
+  --background: var(--clinia-infinite);
+  --foreground: var(--clinia-serene);
+
+  --card: #232327;             /* one stop above --background for surface lift */
+  --card-foreground: var(--clinia-serene);
+
+  --popover: #232327;
+  --popover-foreground: var(--clinia-serene);
+
+  /* On dark, primary inverts: Serene fill + Infinite text.                   */
+  --primary: var(--clinia-serene);
+  --primary-foreground: var(--clinia-infinite);
+
+  --secondary: var(--clinia-infinite-5);
+  --secondary-foreground: var(--clinia-serene);
+
+  --muted: var(--clinia-infinite-5);
+  --muted-foreground: var(--clinia-infinite-2);
+
+  --accent: var(--clinia-vital);
+  --accent-foreground: var(--clinia-infinite);
+
+  --destructive: #ef6b5c;
+  --destructive-foreground: var(--clinia-infinite);
+
+  --success: #4ea985;
+  --success-foreground: var(--clinia-infinite);
+
+  --warning: var(--clinia-beige-5);
+  --warning-foreground: var(--clinia-infinite);
+
+  --border: var(--clinia-infinite-5);
+  --input: var(--clinia-infinite-5);
+  --ring: var(--clinia-vital);
+
+  --chart-1: var(--clinia-peach-2);
+  --chart-2: var(--clinia-purple-5);
+  --chart-3: var(--clinia-beige-5);
+  --chart-4: var(--clinia-purple-3);
+  --chart-5: var(--clinia-mend);
+}
+
+/* ---------- Tailwind theme bridge ---------------------------------------- */
+@theme inline {
+  /* Surface + intent colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Direct access to raw brand swatches when explicitly needed.              */
+  --color-brand-vital: var(--clinia-vital);
+  --color-brand-infinite: var(--clinia-infinite);
+  --color-brand-serene: var(--clinia-serene);
+  --color-brand-noble: var(--clinia-noble);
+  --color-brand-thistle: var(--clinia-thistle);
+  --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-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Type scale — names mirror the Figma styles for traceability. */
+  --font-display: var(--clinia-font-display);
+  --font-sans: var(--clinia-font-sans);
+  --font-mono: var(--clinia-font-mono);
+
+  --text-display-xl: 6rem;       /* 96 / Display XL  */
+  --text-display-l: 5.5rem;      /* 88 / Display L   */
+  --text-display-m: 4.5rem;      /* 72 / Display M   */
+  --text-display-s: 3.5rem;      /* 56 / Display S   */
+  --text-title-xl: 5rem;         /* 80 / Title XL    */
+  --text-title-l: 4rem;          /* 64 / Title L     */
+  --text-title-m: 2.5rem;        /* 40 / Title M     */
+  --text-title-s: 2rem;          /* 32 / Title S     */
+  --text-title-xs: 1.5rem;       /* 24 / Title XS    */
+  --text-body-xl: 2rem;          /* 32 / Body XL     */
+  --text-body-l: 1.5rem;         /* 24 / Body L      */
+  --text-body-m: 1rem;           /* 16 / Body M      */
+  --text-body-s: 0.875rem;       /* 14 / Body S      */
+  --text-body-xs: 0.75rem;       /* 12 / Body XS     */
+  --text-eyebrow-l: 1rem;        /* 16 / Eyebrow L   */
+  --text-eyebrow-s: 0.625rem;    /* 10 / Eyebrow S   */
+}
+
+/* ---------- Base reset --------------------------------------------------- */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    color-scheme: light;
+    font-family: var(--clinia-font-sans);
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Honor reduced-motion preference everywhere by default. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/tokens.css

@@ -0,0 +1,58 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+@layer base {
+  :root {
+    /* --- Foundation ------------------------------------------------------ */
+    --clinia-infinite: #1a1a1e; /* Brand black — anchors the system        */
+    --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       */
+    --clinia-remedy: #fcf8ef;
+    --clinia-beige-3: #f1e3cb;
+    --clinia-remedy-dark: #ecd9b9;
+    --clinia-beige-5: #dbbe87;
+    --clinia-noble: #cca44f;
+
+    /* --- Purple (cool accent family) ------------------------------------ */
+    --clinia-purple-1: #faf7ff;
+    --clinia-aura: #f8f1ff;
+    --clinia-purple-3: #ede5f6;
+    --clinia-thistle: #e3daed;
+    --clinia-purple-5: #cabbdb;
+    --clinia-purple-6: #b3a0ae;
+
+    /* --- Peach / Orange (warm accent family) ---------------------------- */
+    --clinia-mend: #ffccaf;
+    --clinia-peach-2: #fd945f;
+    --clinia-vital: #ff5c00;        /* Brand orange — flagship accent      */
+    --clinia-peach-4: #cb6a3d;
+    --clinia-peach-5: #b3724c;
+    --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;
+    --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,
+      SFMono-Regular, Menlo, Consolas, monospace;
+  }
+}