@moonarc/core 0.1.0

package/src/styles/theme.css

@@ -0,0 +1,397 @@
+/*
+ * @moonarc/core/theme.css — the theme contract (phase 7F, palette and tone scopes 7F.3). Opt-in.
+ *
+ * The Pro sections read the shadcn variable names — --background, --card,
+ * --primary, --border, --radius … — with the base tokens as fallback
+ * (`var(--card, var(--ma-panel))`), so a page that imports nothing but
+ * base.css still renders, and a page that pastes a shadcn or tweakcn theme
+ * recolours every section without editing one. This file is the default
+ * theme for pages that have no theme of their own, plus the pieces shadcn
+ * does not have:
+ *
+ *   --ma-brand                one colour; --primary (step 600 light, 400 dark), --ring and the charts derive from it
+ *   --ma-brand-50 … 950       its scale — a static ramp first, then re-derived from --ma-brand
+ *                             where oklch(from …) exists (Chrome 122 · Firefox 128 · Safari 18)
+ *   --ma-neutral              the tinted neutral (the primary's hue −31.8°, low chroma), derived unless you set it
+ *   --ma-neutral-50 … 950     its scale; --background, --foreground, --muted, --border, --input … point at its steps
+ *   --ma-accent               the second colour (the primary's hue −143.5°), derived unless you set it; it fills, and
+ *   --ma-accent-text          is the accent darkened (light) or kept light (dark) enough to read as text on the page
+ *   --ma-success, --ma-warning, --ma-info (+ -foreground), and shadcn's --destructive: the status colours. A tinted
+ *                             background is mixed where it is used: color-mix(in oklab, var(--ma-success) 14%, transparent)
+ *   --ma-tone-muted, -ink, -brand   the grounds of tone="muted" · "ink" · "brand" (shadcn's --muted is too close to
+ *                             --background to read as a band); -ink-foreground and -brand-foreground are their text
+ *   --ma-tone-glow-1 … 3      the colours a decorated section's aurora takes, at the brand ground's lightness
+ *   --ma-card-shadow          a card's elevation: two soft shadows in light, a top-edge highlight in dark
+ *   --ma-radius-sm … 4xl      derived from --radius by shadcn's multipliers; not Tailwind's
+ *                             --radius-* names, which Tailwind emits on :root of every project
+ *   --ma-density              1; the section padding multiplier
+ *   --ma-shadow-1 … 3         elevation
+ *   --ma-dim, --ma-sec-floor  the faintest secondary text may be drawn (0.75; 0.9 on tone="brand")
+ *
+ * A painted tone is a theme scope: a section with data-ma-tone="muted" · "ink" · "brand" re-declares --card, --border,
+ * --input, --ring and --ma-card-shadow (and on ink and brand --card-foreground and --accent; on muted and brand the
+ * text floor) for everything inside it, so cards, hairlines, fields and focus rings follow the tone without the
+ * section writing them.
+ *
+ * Every rule is :where() — zero specificity — so a consumer's `:root { --primary: … }`
+ * or a pasted `.dark { … }` block wins, whatever the import order. Light is the base,
+ * system dark applies unless the page chose light, explicit dark wins (base.css's rule).
+ * A subtree can carry a theme of its own: `<section data-ma-theme style="--ma-brand: …">`
+ * re-derives every token inside it (the /theme preview is one), and
+ * data-ma-theme="light" / "dark" pins its scheme.
+ * --primary takes a colour or a --ma-brand-* step. The neutral, the accent and the tones are derived from it, so
+ * `--primary: var(--foreground)`, `var(--ma-neutral-900)` or `var(--ma-tone-ink)` is a cycle, and a cycle leaves every
+ * custom property in it invalid: the page loses its whole palette (measured, 2026-09-27). Setting --ma-neutral as well
+ * ends the cycle through the neutrals and --foreground; one through the accent or a tone has no such exit (dark reads
+ * --ma-tone-ink from --primary).
+ * Everything between the >>> <<< markers is written by scripts/build-brand-scale.mjs from
+ * scripts/theme-tables.mjs; do not edit it by hand.
+ */
+
+@layer theme {
+  :where(:root, [data-ma-theme]) {
+    color-scheme: light;
+
+    /* the one colour a buyer sets; everything blue below follows it */
+    --ma-brand: oklch(0.5433 0.0974 235);
+    /* >>> brand-scale:static */
+    --ma-brand-50: #eef9ff;
+    --ma-brand-100: #d6efff;
+    --ma-brand-200: #b6def6;
+    --ma-brand-300: #8fc6e6;
+    --ma-brand-400: #67abd2;
+    --ma-brand-500: #438fb8;
+    --ma-brand-600: #24749c;
+    --ma-brand-700: #025a7e;
+    --ma-brand-800: #00435f;
+    --ma-brand-900: #003045;
+    --ma-brand-950: #001e2d;
+    /* <<< brand-scale:static */
+    /* the neutral and the accent follow the primary unless set; the neutral scale follows the neutral */
+    /* >>> neutral:static */
+    --ma-neutral: #253031;
+    --ma-accent: #bcab79;
+    --ma-neutral-50: #fafcfd;
+    --ma-neutral-100: #f1f6f7;
+    --ma-neutral-200: #d5e0e1;
+    --ma-neutral-300: #b3c1c2;
+    --ma-neutral-400: #97a4a6;
+    --ma-neutral-500: #7c898a;
+    --ma-neutral-600: #5f6c6d;
+    --ma-neutral-700: #3f4a4b;
+    --ma-neutral-800: #1e292a;
+    --ma-neutral-900: #121d1e;
+    --ma-neutral-950: #080f0f;
+    /* <<< neutral:static */
+
+    /* >>> roles:light */
+    --background: var(--ma-neutral-50);
+    --foreground: var(--ma-neutral-900);
+    --card: oklch(1 0 0);
+    --card-foreground: var(--ma-neutral-900);
+    --popover: oklch(1 0 0);
+    --popover-foreground: var(--ma-neutral-900);
+    --primary: var(--ma-brand-600);
+    --primary-foreground: var(--ma-neutral-50);
+    --secondary: var(--ma-neutral-100);
+    --secondary-foreground: var(--ma-neutral-900);
+    --muted: var(--ma-neutral-100);
+    --muted-foreground: var(--ma-neutral-600);
+    --accent: var(--ma-neutral-100);
+    --accent-foreground: var(--ma-neutral-900);
+    --destructive: oklch(0.55 0.19 25);
+    --destructive-foreground: var(--ma-neutral-50);
+    --border: var(--ma-neutral-200);
+    --input: var(--ma-neutral-500);
+    --ring: var(--ma-brand-600);
+    --ma-card-shadow: var(--ma-shadow-1), var(--ma-shadow-2);
+    /* <<< roles:light */
+    /* >>> semantic:light */
+    --ma-success: oklch(0.5 0.13 150);
+    --ma-success-foreground: var(--ma-neutral-50);
+    --ma-warning: #ac5700;
+    --ma-warning-foreground: var(--ma-neutral-50);
+    --ma-info: var(--primary);
+    --ma-info-foreground: var(--primary-foreground);
+    --ma-accent-foreground: var(--ma-neutral-900);
+    --ma-accent-text: #726232;
+    /* <<< semantic:light */
+    /* >>> chart:static-light */
+    --chart-1: #3d89b2;
+    --chart-2: #593868;
+    --chart-3: #985d4d;
+    --chart-4: #323700;
+    --chart-5: #006c6c;
+    /* <<< chart:static-light */
+
+    /* the painted tones: muted a tinted band, ink a deep panel, brand the brand's own deep colour — apart by ≥ 0.1 ΔEok
+       (build-brand-scale.mjs); the glows are what a decorated section's aurora paints */
+    /* >>> tone:static-light */
+    --ma-tone-muted: #b6def7;
+    --ma-tone-ink: #253031;
+    --ma-tone-brand: #0d5f84;
+    --ma-tone-glow-1: #006566;
+    --ma-tone-glow-2: #44548c;
+    --ma-tone-glow-3: #6a4978;
+    --ma-tone-ink-foreground: var(--ma-neutral-100);
+    --ma-tone-brand-foreground: var(--ma-neutral-50);
+    --ma-tone-muted-card: oklch(1 0 0 / 60%);
+    --ma-tone-muted-border: #a6cae0;
+    --ma-tone-muted-shadow: var(--ma-shadow-1);
+    /* <<< tone:static-light */
+
+    /* secondary text: the faintest it is drawn (a section takes max(its own opacity, the floor)) */
+    /* >>> faint */
+    --ma-dim: 0.75;
+    --ma-sec-floor: 0.75;
+    --ma-sec-floor-brand: 0.9;
+    /* <<< faint */
+
+    /* shape and space */
+    --radius: 0.625rem;
+    --ma-radius-sm: calc(var(--radius) * 0.6);
+    --ma-radius-md: calc(var(--radius) * 0.8);
+    --ma-radius-lg: var(--radius);
+    --ma-radius-xl: calc(var(--radius) * 1.4);
+    --ma-radius-2xl: calc(var(--radius) * 1.8);
+    --ma-radius-3xl: calc(var(--radius) * 2.2);
+    --ma-radius-4xl: calc(var(--radius) * 2.6);
+    --ma-density: 1;
+    --ma-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
+    --ma-shadow-2: 0 8px 24px -12px rgb(0 0 0 / 0.25);
+    --ma-shadow-3: 0 32px 64px -32px rgb(0 0 0 / 0.5);
+  }
+
+  /* the same values, from the buyer's colours: lightness fixed per step, chroma tapered at the ends (it clips near L 0 and 1) */
+  @supports (color: oklch(from red l c h)) {
+    :where(:root, [data-ma-theme]) {
+      /* >>> brand-scale:derived */
+      --ma-brand-50: oklch(from var(--ma-brand) 0.975 calc(c * 0.2) h);
+      --ma-brand-100: oklch(from var(--ma-brand) 0.94 calc(c * 0.35) h);
+      --ma-brand-200: oklch(from var(--ma-brand) 0.88 calc(c * 0.55) h);
+      --ma-brand-300: oklch(from var(--ma-brand) 0.8 calc(c * 0.75) h);
+      --ma-brand-400: oklch(from var(--ma-brand) 0.71 calc(c * 0.92) h);
+      --ma-brand-500: oklch(from var(--ma-brand) 0.62 c h);
+      --ma-brand-600: oklch(from var(--ma-brand) 0.53 c h);
+      --ma-brand-700: oklch(from var(--ma-brand) 0.44 calc(c * 0.95) h);
+      --ma-brand-800: oklch(from var(--ma-brand) 0.36 calc(c * 0.85) h);
+      --ma-brand-900: oklch(from var(--ma-brand) 0.29 calc(c * 0.7) h);
+      --ma-brand-950: oklch(from var(--ma-brand) 0.22 calc(c * 0.55) h);
+      /* <<< brand-scale:derived */
+      /* >>> neutral:derived */
+      --ma-neutral: oklch(from var(--primary) 0.2994 min(calc(c * 0.2), 0.0151) calc(h - 31.8));
+      --ma-accent: oklch(from var(--primary) 0.7437 min(calc(c * 0.8), 0.0697) calc(h - 143.5));
+      --ma-neutral-50: oklch(from var(--ma-neutral) 0.99 min(calc(c * 0.2), 0.02) h);
+      --ma-neutral-100: oklch(from var(--ma-neutral) 0.97 min(calc(c * 0.4), 0.02) h);
+      --ma-neutral-200: oklch(from var(--ma-neutral) 0.9 min(calc(c * 0.8), 0.02) h);
+      --ma-neutral-300: oklch(from var(--ma-neutral) 0.8 min(c, 0.02) h);
+      --ma-neutral-400: oklch(from var(--ma-neutral) 0.71 min(c, 0.02) h);
+      --ma-neutral-500: oklch(from var(--ma-neutral) 0.62 min(c, 0.02) h);
+      --ma-neutral-600: oklch(from var(--ma-neutral) 0.52 min(c, 0.02) h);
+      --ma-neutral-700: oklch(from var(--ma-neutral) 0.4 min(c, 0.02) h);
+      --ma-neutral-800: oklch(from var(--ma-neutral) 0.27 min(c, 0.02) h);
+      --ma-neutral-900: oklch(from var(--ma-neutral) 0.22 min(c, 0.02) h);
+      --ma-neutral-950: oklch(from var(--ma-neutral) 0.16 min(calc(c * 0.66), 0.02) h);
+      /* <<< neutral:derived */
+      /* >>> semantic:derived-light */
+      --ma-accent-text: oklch(from var(--ma-accent) min(l, 0.5) c h);
+      /* <<< semantic:derived-light */
+      /* >>> chart:derived-light */
+      --chart-1: oklch(from var(--ma-brand) 0.6 c h);
+      --chart-2: oklch(from var(--ma-brand) 0.4 calc(c * 0.9) calc(h + 80));
+      --chart-3: oklch(from var(--ma-brand) 0.54 calc(c * 0.85) calc(h + 160));
+      --chart-4: oklch(from var(--ma-brand) 0.32 calc(c * 0.8) calc(h + 240));
+      --chart-5: oklch(from var(--ma-brand) 0.48 calc(c * 0.9) calc(h + 320));
+      /* <<< chart:derived-light */
+      /* >>> tone:derived-light */
+      --ma-tone-muted: oklch(from var(--primary) 0.88 calc(c * 0.56) h);
+      --ma-tone-ink: oklch(from var(--ma-neutral) 0.2994 min(c, 0.02) h);
+      --ma-tone-brand: oklch(from var(--primary) calc(l + (0.46 - l) * clamp(0, (l - 0.3) * 20, 1)) calc(c * 0.953) h);
+      --ma-tone-glow-1: oklch(from var(--ma-tone-brand) l calc(c * 1.15) calc(h - 40));
+      --ma-tone-glow-2: oklch(from var(--ma-tone-brand) l c calc(h + 35));
+      --ma-tone-glow-3: oklch(from var(--ma-tone-brand) l calc(c * 0.9) calc(h + 80));
+      --ma-tone-muted-border: oklch(from var(--ma-tone-muted) 0.82 calc(c * 0.9) h);
+      /* <<< tone:derived-light */
+    }
+  }
+
+  /* dark: its own values, not the light ramp inverted (a naive inversion goes muddy); the scales are shared, the roles pick other steps */
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme='light']):not(.light), :root:not([data-theme='light']):not(.light) [data-ma-theme]:not([data-ma-theme='light'])) {
+      color-scheme: dark;
+      /* >>> roles:dark */
+      --background: var(--ma-neutral-950);
+      --foreground: var(--ma-neutral-100);
+      --card: var(--ma-neutral-900);
+      --card-foreground: var(--ma-neutral-100);
+      --popover: var(--ma-neutral-900);
+      --popover-foreground: var(--ma-neutral-100);
+      --primary: var(--ma-brand-400);
+      --primary-foreground: var(--ma-neutral-950);
+      --secondary: var(--ma-neutral-800);
+      --secondary-foreground: var(--ma-neutral-100);
+      --muted: var(--ma-neutral-800);
+      --muted-foreground: var(--ma-neutral-400);
+      --accent: var(--ma-neutral-800);
+      --accent-foreground: var(--ma-neutral-100);
+      --destructive: oklch(0.7 0.17 25);
+      --destructive-foreground: var(--ma-neutral-950);
+      --border: oklch(1 0 0 / 10%);
+      --input: var(--ma-neutral-600);
+      --ring: var(--ma-brand-400);
+      --ma-card-shadow: inset 0 1px 0 oklch(1 0 0 / 5%);
+      /* <<< roles:dark */
+      /* >>> semantic:dark */
+      --ma-success: oklch(0.78 0.14 150);
+      --ma-success-foreground: var(--ma-neutral-950);
+      --ma-warning: oklch(0.8 0.14 65);
+      --ma-warning-foreground: var(--ma-neutral-950);
+      --ma-info: var(--primary);
+      --ma-info-foreground: var(--primary-foreground);
+      --ma-accent-foreground: var(--ma-neutral-900);
+      --ma-accent-text: #bcab79;
+      /* <<< semantic:dark */
+      /* >>> chart:static-dark */
+      --chart-1: #6aaed5;
+      --chart-2: #7c598c;
+      --chart-3: #f7c3b5;
+      --chart-4: #7e864b;
+      --chart-5: #7dc6c6;
+      /* <<< chart:static-dark */
+      /* >>> tone:static-dark */
+      --ma-tone-muted: #284548;
+      --ma-tone-ink: #00283b;
+      --ma-tone-brand: #0d5f84;
+      --ma-tone-glow-1: #006566;
+      --ma-tone-glow-2: #44548c;
+      --ma-tone-glow-3: #6a4978;
+      --ma-tone-ink-foreground: var(--ma-neutral-100);
+      --ma-tone-brand-foreground: var(--ma-neutral-50);
+      --ma-tone-muted-card: color-mix(in oklab, var(--foreground) 6%, transparent);
+      --ma-tone-muted-border: color-mix(in oklab, var(--foreground) 10%, transparent);
+      --ma-tone-muted-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 5%, transparent);
+      /* <<< tone:static-dark */
+    }
+    @supports (color: oklch(from red l c h)) {
+      :where(:root:not([data-theme='light']):not(.light), :root:not([data-theme='light']):not(.light) [data-ma-theme]:not([data-ma-theme='light'])) {
+        /* >>> semantic:derived-dark */
+        --ma-accent-text: oklch(from var(--ma-accent) max(l, 0.72) c h);
+        /* <<< semantic:derived-dark */
+        /* >>> chart:derived-dark */
+        --chart-1: oklch(from var(--ma-brand) 0.72 calc(c * 0.92) h);
+        --chart-2: oklch(from var(--ma-brand) 0.52 calc(c * 0.9) calc(h + 80));
+        --chart-3: oklch(from var(--ma-brand) 0.86 calc(c * 0.65) calc(h + 160));
+        --chart-4: oklch(from var(--ma-brand) 0.6 calc(c * 0.85) calc(h + 240));
+        --chart-5: oklch(from var(--ma-brand) 0.78 calc(c * 0.75) calc(h + 320));
+        /* <<< chart:derived-dark */
+        /* >>> tone:derived-dark */
+        --ma-tone-muted: oklch(from var(--ma-neutral) 0.37 min(calc(c * 2.318), 0.0464) h);
+        --ma-tone-ink: oklch(from var(--primary) 0.26 calc(c * 0.67) h);
+        --ma-tone-brand: oklch(from var(--primary) calc(l + (0.46 - l) * clamp(0, (l - 0.3) * 20, 1)) calc(c * 1.036) h);
+        --ma-tone-glow-1: oklch(from var(--ma-tone-brand) l calc(c * 1.15) calc(h - 40));
+        --ma-tone-glow-2: oklch(from var(--ma-tone-brand) l c calc(h + 35));
+        --ma-tone-glow-3: oklch(from var(--ma-tone-brand) l calc(c * 0.9) calc(h + 80));
+        /* <<< tone:derived-dark */
+      }
+    }
+  }
+  :where(:root[data-theme='dark'], :root.dark, :is(:root[data-theme='dark'], :root.dark) [data-ma-theme]:not([data-ma-theme='light']), [data-ma-theme='dark']) {
+    color-scheme: dark;
+    /* >>> roles:dark */
+    --background: var(--ma-neutral-950);
+    --foreground: var(--ma-neutral-100);
+    --card: var(--ma-neutral-900);
+    --card-foreground: var(--ma-neutral-100);
+    --popover: var(--ma-neutral-900);
+    --popover-foreground: var(--ma-neutral-100);
+    --primary: var(--ma-brand-400);
+    --primary-foreground: var(--ma-neutral-950);
+    --secondary: var(--ma-neutral-800);
+    --secondary-foreground: var(--ma-neutral-100);
+    --muted: var(--ma-neutral-800);
+    --muted-foreground: var(--ma-neutral-400);
+    --accent: var(--ma-neutral-800);
+    --accent-foreground: var(--ma-neutral-100);
+    --destructive: oklch(0.7 0.17 25);
+    --destructive-foreground: var(--ma-neutral-950);
+    --border: oklch(1 0 0 / 10%);
+    --input: var(--ma-neutral-600);
+    --ring: var(--ma-brand-400);
+    --ma-card-shadow: inset 0 1px 0 oklch(1 0 0 / 5%);
+    /* <<< roles:dark */
+    /* >>> semantic:dark */
+    --ma-success: oklch(0.78 0.14 150);
+    --ma-success-foreground: var(--ma-neutral-950);
+    --ma-warning: oklch(0.8 0.14 65);
+    --ma-warning-foreground: var(--ma-neutral-950);
+    --ma-info: var(--primary);
+    --ma-info-foreground: var(--primary-foreground);
+    --ma-accent-foreground: var(--ma-neutral-900);
+    --ma-accent-text: #bcab79;
+    /* <<< semantic:dark */
+    /* >>> chart:static-dark */
+    --chart-1: #6aaed5;
+    --chart-2: #7c598c;
+    --chart-3: #f7c3b5;
+    --chart-4: #7e864b;
+    --chart-5: #7dc6c6;
+    /* <<< chart:static-dark */
+    /* >>> tone:static-dark */
+    --ma-tone-muted: #284548;
+    --ma-tone-ink: #00283b;
+    --ma-tone-brand: #0d5f84;
+    --ma-tone-glow-1: #006566;
+    --ma-tone-glow-2: #44548c;
+    --ma-tone-glow-3: #6a4978;
+    --ma-tone-ink-foreground: var(--ma-neutral-100);
+    --ma-tone-brand-foreground: var(--ma-neutral-50);
+    --ma-tone-muted-card: color-mix(in oklab, var(--foreground) 6%, transparent);
+    --ma-tone-muted-border: color-mix(in oklab, var(--foreground) 10%, transparent);
+    --ma-tone-muted-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 5%, transparent);
+    /* <<< tone:static-dark */
+  }
+  @supports (color: oklch(from red l c h)) {
+    :where(:root[data-theme='dark'], :root.dark, :is(:root[data-theme='dark'], :root.dark) [data-ma-theme]:not([data-ma-theme='light']), [data-ma-theme='dark']) {
+      /* >>> semantic:derived-dark */
+      --ma-accent-text: oklch(from var(--ma-accent) max(l, 0.72) c h);
+      /* <<< semantic:derived-dark */
+      /* >>> chart:derived-dark */
+      --chart-1: oklch(from var(--ma-brand) 0.72 calc(c * 0.92) h);
+      --chart-2: oklch(from var(--ma-brand) 0.52 calc(c * 0.9) calc(h + 80));
+      --chart-3: oklch(from var(--ma-brand) 0.86 calc(c * 0.65) calc(h + 160));
+      --chart-4: oklch(from var(--ma-brand) 0.6 calc(c * 0.85) calc(h + 240));
+      --chart-5: oklch(from var(--ma-brand) 0.78 calc(c * 0.75) calc(h + 320));
+      /* <<< chart:derived-dark */
+      /* >>> tone:derived-dark */
+      --ma-tone-muted: oklch(from var(--ma-neutral) 0.37 min(calc(c * 2.318), 0.0464) h);
+      --ma-tone-ink: oklch(from var(--primary) 0.26 calc(c * 0.67) h);
+      --ma-tone-brand: oklch(from var(--primary) calc(l + (0.46 - l) * clamp(0, (l - 0.3) * 20, 1)) calc(c * 1.036) h);
+      --ma-tone-glow-1: oklch(from var(--ma-tone-brand) l calc(c * 1.15) calc(h - 40));
+      --ma-tone-glow-2: oklch(from var(--ma-tone-brand) l c calc(h + 35));
+      --ma-tone-glow-3: oklch(from var(--ma-tone-brand) l calc(c * 0.9) calc(h + 80));
+      /* <<< tone:derived-dark */
+    }
+  }
+
+  /* a painted tone is a theme scope (7F.3): what it re-declares for everything inside it. A section paints its own
+     ground (with fallbacks, so a page without this file keeps its tones); these follow it */
+  /* >>> tone:scope */
+  :where([data-ma-tone='muted']) { --card: var(--ma-tone-muted-card); --border: var(--ma-tone-muted-border); --input: color-mix(in oklab, var(--foreground) 65%, transparent); --ring: var(--foreground); --ma-card-shadow: var(--ma-tone-muted-shadow); --ma-dim: 0.8; --ma-sec-floor: 0.8; }
+  :where([data-ma-tone='ink']) { --card: color-mix(in oklab, var(--ma-tone-ink-foreground) 6%, transparent); --card-foreground: var(--ma-tone-ink-foreground); --border: color-mix(in oklab, var(--ma-tone-ink-foreground) 10%, transparent); --input: color-mix(in oklab, var(--ma-tone-ink-foreground) 65%, transparent); --ring: var(--ma-tone-ink-foreground); --accent: color-mix(in oklab, var(--ma-tone-ink-foreground) 14%, transparent); --ma-card-shadow: inset 0 1px 0 color-mix(in oklab, var(--ma-tone-ink-foreground) 6%, transparent); }
+  :where([data-ma-tone='brand']) { --card: color-mix(in oklab, var(--ma-tone-brand-foreground) 10%, transparent); --card-foreground: var(--ma-tone-brand-foreground); --border: color-mix(in oklab, var(--ma-tone-brand-foreground) 18%, transparent); --input: color-mix(in oklab, var(--ma-tone-brand-foreground) 65%, transparent); --ring: var(--ma-tone-brand-foreground); --accent: color-mix(in oklab, var(--ma-tone-brand-foreground) 14%, transparent); --ma-card-shadow: inset 0 1px 0 color-mix(in oklab, var(--ma-tone-brand-foreground) 12%, transparent); --ma-dim: 0.9; --ma-sec-floor: 0.9; }
+  /* <<< tone:scope */
+
+  /* text on the filled colours: black or white, whichever contrasts more, where the engine can decide
+     (Chrome 147 · Firefox 146 · Safari 26); the static values above are the tested fallback. Last on purpose: it
+     applies in both themes and still loses to a consumer's own :root / .dark declaration. */
+  @supports (color: contrast-color(red)) {
+    :where(:root, [data-ma-theme]) {
+      --primary-foreground: contrast-color(var(--primary));
+      --destructive-foreground: contrast-color(var(--destructive));
+      --ma-success-foreground: contrast-color(var(--ma-success));
+      --ma-warning-foreground: contrast-color(var(--ma-warning));
+      --ma-accent-foreground: contrast-color(var(--ma-accent));
+      --ma-tone-brand-foreground: contrast-color(var(--ma-tone-brand));
+    }
+  }
+}

package/src/styles/theme.tailwind.css

@@ -0,0 +1,75 @@
+/*
+ * @moonarc/core/styles/theme.tailwind.css — the Tailwind v4 bridge for
+ * the theme contract. Optional, Tailwind only; theme.css itself needs nothing.
+ *
+ * `@theme inline` (not `@theme`): the utility carries `var(--background)`
+ * itself, so `bg-background` in your markup and a Pro section read the same
+ * variable and both change when a theme swaps it at runtime — a plain
+ * `@theme` would freeze the value at build (checked on this site's own
+ * global.css, three engines). The radius keys replace Tailwind's fixed
+ * `--radius-*` with the contract's scale, as shadcn's globals.css does, so
+ * `rounded-lg` is `--radius`. The status colours (7F.3) are `bg-success`,
+ * `text-warning`, `bg-info` … with their -foreground. The accent and the
+ * neutral scale have no utility name of their own, because shadcn's `accent`
+ * is a neutral hover surface and Tailwind already ships a `neutral` palette:
+ * reach them as `bg-(--ma-accent)`, `text-(--ma-accent-text)`,
+ * `bg-(--ma-neutral-100)`.
+ *
+ * Usage:  @import "tailwindcss";
+ *         @import "@moonarc/core/theme.css";
+ *         @import "@moonarc/core/styles/theme.tailwind.css";
+ */
+
+@theme inline {
+  --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-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);
+  --color-brand: var(--ma-brand);
+  --color-brand-50: var(--ma-brand-50);
+  --color-brand-100: var(--ma-brand-100);
+  --color-brand-200: var(--ma-brand-200);
+  --color-brand-300: var(--ma-brand-300);
+  --color-brand-400: var(--ma-brand-400);
+  --color-brand-500: var(--ma-brand-500);
+  --color-brand-600: var(--ma-brand-600);
+  --color-brand-700: var(--ma-brand-700);
+  --color-brand-800: var(--ma-brand-800);
+  --color-brand-900: var(--ma-brand-900);
+  --color-brand-950: var(--ma-brand-950);
+  --color-ink: var(--ma-tone-ink);
+  --color-ink-foreground: var(--ma-tone-ink-foreground);
+  --color-success: var(--ma-success);
+  --color-success-foreground: var(--ma-success-foreground);
+  --color-warning: var(--ma-warning);
+  --color-warning-foreground: var(--ma-warning-foreground);
+  --color-info: var(--ma-info);
+  --color-info-foreground: var(--ma-info-foreground);
+  --radius-sm: var(--ma-radius-sm);
+  --radius-md: var(--ma-radius-md);
+  --radius-lg: var(--ma-radius-lg);
+  --radius-xl: var(--ma-radius-xl);
+  --radius-2xl: var(--ma-radius-2xl);
+  --radius-3xl: var(--ma-radius-3xl);
+  --radius-4xl: var(--ma-radius-4xl);
+}