@nebutra/tokens 0.1.2 → 2.0.0

package/recipe.css

@@ -11,6 +11,14 @@
  * Tailwind utilities: bg-brand-mark / text-brand-mark (see @theme below).
  */
 
+@custom-variant hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
 :root {
   /* ── Color roles (overridden by brand skins) ──────────────────── */
   --role-action: var(--primary);
@@ -23,7 +31,8 @@
   --btn-default-fg: hsl(var(--primary-foreground));
   --btn-default-border: transparent;
   --btn-default-border-width: 0px;
-  --btn-default-stroke-gradient: transparent;
+  /* An image, never a colour — see the @property registration below. */
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
   --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
   --btn-default-radius: var(--radius-button, var(--radius-md, 0.375rem));
   --btn-default-shadow: 0 0 #0000;
@@ -42,6 +51,11 @@
   --control-height-sm: 2rem; /* 32 */
   --control-height-md: 2.5rem; /* 40 */
   --control-height-lg: 3rem; /* 48 */
+  /* Icon-only triggers — orthogonal to the text-button ladder above.
+     apps use 28/32/36 rounded-md squares; circle uses the same boxes. */
+  --control-height-icon-sm: 1.75rem; /* 28 */
+  --control-height-icon-md: 2rem; /* 32 */
+  --control-height-icon-lg: 2.25rem; /* 36 */
   --control-font-size-tiny: 0.6875rem; /* 11 */
   --control-font-size-sm: 0.75rem; /* 12 */
   --control-font-size-md: 0.875rem; /* 14 */
@@ -62,6 +76,321 @@
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--brand-mark)) 80%, transparent);
 }
 
+/**
+ * The stroke slot is consumed as a background-image layer, so its value has to
+ * be an <image>. A colour there is not merely ignored: background-image becomes
+ * invalid as a whole and the browser drops every layer, including the solid
+ * brand fill in front of it. The button then renders with no background at all,
+ * while `color` — a separate declaration — keeps painting white text. That is
+ * what shipped: every default Button outside the gsap skin was white-on-white,
+ * because the slot held `transparent`, which is a colour.
+ *
+ * Registering the property makes that unrepresentable rather than merely
+ * discouraged. A colour written here now fails to parse against `<image>`, so
+ * the declaration is rejected and the slot keeps this initial value — the fill
+ * survives. Skins are generated, and a generator is exactly the place where one
+ * wrong branch reaches every brand at once.
+ *
+ * The var() fallbacks at the use sites stay as the unregistered path, so the
+ * recipe is still correct where @property is unsupported.
+ */
+@property --btn-default-stroke-gradient {
+  syntax: "<image>";
+  inherits: true;
+  initial-value: linear-gradient(transparent, transparent);
+}
+
+/**
+ * ── Type contracts for every other recipe slot ───────────────────────────────
+ *
+ * Same reasoning, generalised. Each slot below is read from a typed CSS position
+ * (a colour, a length, a font weight), so a wrong-typed value written by a skin
+ * does not fail locally — it makes the whole consuming declaration invalid at
+ * computed-value time and the browser silently drops it. Registering the slot
+ * moves the failure to the slot itself: the bad value is rejected, the property
+ * keeps its initial-value, and the declaration that reads it still renders.
+ *
+ * Rules observed here:
+ *   • `inherits: true` on every slot. Custom properties inherit by default, and
+ *     every skin sets these on `:root` / `[data-theme]` for descendants to read.
+ *     `inherits: false` would hand every non-root element the initial-value.
+ *   • `initial-value` is computationally independent: absolute colours and `px`
+ *     only. No `var()`, no `em`/`rem`, no `currentcolor`. The declared values in
+ *     `:root` above are free to keep using `var()` and `rem` — the restriction
+ *     applies to the initial-value alone. The px initials are the rem defaults
+ *     resolved at a 16px root (0.375rem → 6px) so the fallback matches the
+ *     factory ladder rather than inventing a new one.
+ *   • Registering a `<length>` slot absolutises `rem` at computed-value time.
+ *     Every skin writes `rem` or `px`, so this is a no-op today. A skin that
+ *     wants element-relative sizing must not use `em` in these slots: it would
+ *     resolve against the element's own font-size before the slot is read.
+ */
+
+/* ── Colour slots ─────────────────────────────────────────────────────────────
+ * Read inside `linear-gradient()` (button) and `background-color` (badge).
+ * Initial-values are the light-theme action blue (222.8 85% 55.7%) and its
+ * white foreground, i.e. the factory default rendered without a skin.
+ */
+@property --btn-default-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --btn-default-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --btn-default-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --btn-default-hover-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --badge-default-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+@property --badge-default-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --badge-default-border {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --badge-default-hover-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(222.8 85% 55.7%);
+}
+
+/* ── Length slots ─────────────────────────────────────────────────────────────
+ * `border-width` and the control ladder are plain lengths. Radii and padding go
+ * into `border-radius` / `padding`, which both accept percentages, so those get
+ * `<length-percentage>` — a skin expressing a pill as `50%` stays legal.
+ */
+@property --btn-default-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --btn-default-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --btn-default-padding-y {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 8px;
+}
+
+@property --btn-default-padding-x {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --badge-default-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --radius-button {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --radius-card {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 12px;
+}
+
+@property --radius-badge {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --radius-inputs {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 6px;
+}
+
+@property --radius-pill {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 9999px;
+}
+
+@property --control-height-tiny {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 24px;
+}
+
+@property --control-height-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 32px;
+}
+
+@property --control-height-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 40px;
+}
+
+@property --control-height-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 48px;
+}
+
+@property --control-height-icon-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 28px;
+}
+
+@property --control-height-icon-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 32px;
+}
+
+@property --control-height-icon-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 36px;
+}
+
+@property --control-font-size-tiny {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 11px;
+}
+
+@property --control-font-size-sm {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 12px;
+}
+
+@property --control-font-size-md {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 14px;
+}
+
+@property --control-font-size-lg {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+/* ── Numeric slots ────────────────────────────────────────────────────────────
+ * `font-weight` also accepts `normal` / `bold` in CSS, so those two idents are
+ * spelled into the syntax rather than excluded. `bolder` / `lighter` are left
+ * out on purpose: they are parent-relative and cannot survive as a slot value.
+ * Every skin currently writes a number (300–700).
+ */
+@property --font-weight-medium {
+  syntax: "<number> | normal | bold";
+  inherits: true;
+  initial-value: 500;
+}
+
+@property --font-weight-heading {
+  syntax: "<number> | normal | bold";
+  inherits: true;
+  initial-value: 600;
+}
+
+/* ── Genuinely untypeable: box-shadow lists ───────────────────────────────────
+ * These four are consumed as `box-shadow`, and the `@property` syntax grammar
+ * has no `<shadow>` component — its component names are limited to <length>,
+ * <number>, <percentage>, <length-percentage>, <color>, <image>, <url>,
+ * <integer>, <angle>, <time>, <resolution>, <transform-function>,
+ * <transform-list>, <custom-ident> and <string>, with only `+` / `#`
+ * multipliers. A shadow list ("0 1px 2px 0 rgb(…)", possibly comma-separated)
+ * cannot be spelled in that grammar, so `*` is the honest answer, not a
+ * shortcut. These slots therefore remain unguarded and a colour written into
+ * one still voids the `box-shadow` declaration that reads it. The audit script
+ * is the backstop for them.
+ */
+@property --btn-default-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-card {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-control {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --elevation-raised {
+  syntax: "*";
+  inherits: true;
+}
+
+/* ── Genuinely untypeable: bare HSL channel triplets ──────────────────────────
+ * These carry channels ("222 47% 11%"), not colours — they exist to be wrapped
+ * as `hsl(var(--brand-mark))` / `hsl(var(--brand-mark) / 0.08)`, which is what
+ * makes the alpha-suffix idiom possible. `<color>` would reject every one of
+ * them. There is also no typed spelling for the triplet: `@property` syntax has
+ * no space-separated component composition and no <number-percentage>, so
+ * "<number> <percentage> <percentage>" is not expressible. `*` is correct here.
+ * The type error these slots invite is the inverse one — writing a full colour
+ * (`#0033FE`) where channels are expected, which the audit script catches at
+ * the `hsl()` call site.
+ */
+@property --role-action {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --role-action-fg {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --brand-mark {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --brand-mark-foreground {
+  syntax: "*";
+  inherits: true;
+}
+
 /* Tailwind v4: brand-mark as first-class color (Logo / BrandMark / badge) */
 @theme inline {
   --color-brand-mark: hsl(var(--brand-mark));

package/skins/README.md

@@ -1,7 +1,7 @@
 # Design skins & Brand Packages
 
 **Goal:** Create Center users swap a **design language** by applying one **Brand Package**.
-This package is a *carrier* (roles + free elev/radii + zones), not a list of brand hacks.
+This package is a *carrier* (roles + free elev/radii), not a list of brand hacks.
 
 ## Two layers
 
@@ -130,11 +130,9 @@ const { iframeRef, apply: preview, writePreviewDocument } = useBrandIframePrevie
 // preview(brand)  or  writePreviewDocument(brand, "<button class='btn-brand-default'>CTA</button>")
 ```
 
-### Fonts + zones
+### Fonts
 
 - `typography.faces[]` → emitted as `@font-face` (swap URL for Create Center CDN/upload).
-- `zones.product` / `zones.marketing` → CSS vars + `[data-zone="…"]` / `.zone-…` consumers.
-- Marketing may use 224px display; product stays compact.
 
 ### design-sync
 

package/skins/cosmos.css

@@ -0,0 +1,239 @@
+/**
+ * Brand carrier skin: Cosmos (cosmos) v2.0.0
+ * darkDefault=false dualMode=true button=solid
+ * fonts=0 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+:root,
+html[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 30 20% 96%;
+  --role-canvas-fg: 0 0% 5%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 0 0% 5%;
+  --role-action: 0 0% 5%;
+  --role-action-fg: 30 20% 96%;
+  --role-quiet: 0 0% 100%;
+  --role-quiet-fg: 0 0% 5%;
+  --role-muted: 30 20% 96%;
+  --role-muted-fg: 12 2% 42%;
+  --role-border: 30 5% 85%;
+  --role-input: 30 5% 85%;
+  --role-ring: 0 0% 5%;
+  --role-brand: 0 0% 5%;
+  --role-brand-fg: 30 20% 96%;
+  --brand-mark: 0 0% 5%;
+  --brand-mark-foreground: 30 20% 96%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 30 20% 96%;
+  --foreground: 0 0% 5%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 5%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 5%;
+  --primary: 0 0% 5%;
+  --primary-foreground: 30 20% 96%;
+  --secondary: 0 0% 100%;
+  --secondary-foreground: 0 0% 5%;
+  --muted: 30 20% 96%;
+  --muted-foreground: 12 2% 42%;
+  --accent: 0 0% 5%;
+  --accent-foreground: 30 20% 96%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 30 5% 85%;
+  --input: 30 5% 85%;
+  --ring: 0 0% 5%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 5%;
+  --sidebar-primary: 0 0% 5%;
+  --sidebar-primary-foreground: 30 20% 96%;
+  --sidebar-accent: 0 0% 5%;
+  --sidebar-accent-foreground: 30 20% 96%;
+  --sidebar-border: 30 5% 85%;
+  --sidebar-ring: 0 0% 5%;
+  --brand-primary: hsl(0 0% 5%);
+  --brand-accent: hsl(0 0% 5%);
+  --brand-accent-foreground: hsl(30 20% 96%);
+  --brand-tertiary: hsl(0 0% 5%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(30 20% 96%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(30 5% 85%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(30 5% 85%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(30 5% 85%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(30 5% 85%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(30 5% 85%);
+  --neutral-8: color-mix(in oklab, hsl(12 2% 42%) 25%, hsl(30 5% 85%));
+  --neutral-9: color-mix(in oklab, hsl(12 2% 42%) 50%, hsl(30 5% 85%));
+  --neutral-10: color-mix(in oklab, hsl(12 2% 42%) 75%, hsl(30 5% 85%));
+  --neutral-11: hsl(12 2% 42%);
+  --neutral-12: hsl(0 0% 5%);
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 16px;
+  --radius-button: 16px;
+  --radius-buttons: 16px;
+  --radius-md: min(16px, 16px);
+  --radius-card: 16px;
+  --radius-lg: 16px;
+  --radius-badge: 16px;
+  --badge-default-radius: 16px;
+  --radius-inputs: 16px;
+  --input-radius: 16px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 0 0 #0000;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-bg: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
+
+  /* Typography */
+  --font-sans:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-cn:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-heading:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-display:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
+    var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
+  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;
+  --font-weight-heading: 350;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 80ms;
+  --motion-duration-micro: 80ms;
+  --duration-flow: 180ms;
+  --motion-duration-flow: 180ms;
+  --duration-reveal: 180ms;
+  --motion-duration-reveal: 180ms;
+  --duration-cinematic: 320ms;
+  --motion-duration-cinematic: 320ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 1rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.5rem;
+  --space-source-xl: 2rem;
+  --space-source-2xl: 3rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-linen-canvas: #f7f5f3;
+  --brand-category-ink-black: #0d0d0d;
+  --brand-category-paper-white: #ffffff;
+  --brand-category-stone: #6e6a69;
+  --brand-category-pebble: #9a9796;
+}
+
+.dark,
+html.dark[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 5%;
+  --role-canvas-fg: 30 20% 96%;
+  --role-surface: 0 0% 11%;
+  --role-surface-fg: 30 20% 96%;
+  --role-action: 30 20% 96%;
+  --role-action-fg: 0 0% 5%;
+  --role-quiet: 0 0% 14%;
+  --role-quiet-fg: 30 20% 96%;
+  --role-muted: 0 0% 11%;
+  --role-muted-fg: 15 2% 60%;
+  --role-border: 0 1% 18%;
+  --role-input: 0 1% 18%;
+  --role-ring: 30 20% 96%;
+  --role-brand: 30 20% 96%;
+  --role-brand-fg: 0 0% 5%;
+  --brand-mark: 30 20% 96%;
+  --brand-mark-foreground: 0 0% 5%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 5%;
+  --foreground: 30 20% 96%;
+  --card: 0 0% 11%;
+  --card-foreground: 30 20% 96%;
+  --popover: 0 0% 11%;
+  --popover-foreground: 30 20% 96%;
+  --primary: 30 20% 96%;
+  --primary-foreground: 0 0% 5%;
+  --secondary: 0 0% 14%;
+  --secondary-foreground: 30 20% 96%;
+  --muted: 0 0% 11%;
+  --muted-foreground: 15 2% 60%;
+  --accent: 30 20% 96%;
+  --accent-foreground: 0 0% 5%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 1% 18%;
+  --input: 0 1% 18%;
+  --ring: 30 20% 96%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 11%;
+  --sidebar-foreground: 30 20% 96%;
+  --sidebar-primary: 30 20% 96%;
+  --sidebar-primary-foreground: 0 0% 5%;
+  --sidebar-accent: 30 20% 96%;
+  --sidebar-accent-foreground: 0 0% 5%;
+  --sidebar-border: 0 1% 18%;
+  --sidebar-ring: 30 20% 96%;
+  --brand-primary: hsl(30 20% 96%);
+  --brand-accent: hsl(30 20% 96%);
+  --brand-accent-foreground: hsl(0 0% 5%);
+  --brand-tertiary: hsl(30 20% 96%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 5%);
+  --neutral-2: hsl(0 0% 11%);
+  --neutral-3: color-mix(in oklab, hsl(0 1% 18%) 20%, hsl(0 0% 11%));
+  --neutral-4: color-mix(in oklab, hsl(0 1% 18%) 40%, hsl(0 0% 11%));
+  --neutral-5: color-mix(in oklab, hsl(0 1% 18%) 60%, hsl(0 0% 11%));
+  --neutral-6: color-mix(in oklab, hsl(0 1% 18%) 80%, hsl(0 0% 11%));
+  --neutral-7: hsl(0 1% 18%);
+  --neutral-8: color-mix(in oklab, hsl(15 2% 60%) 25%, hsl(0 1% 18%));
+  --neutral-9: color-mix(in oklab, hsl(15 2% 60%) 50%, hsl(0 1% 18%));
+  --neutral-10: color-mix(in oklab, hsl(15 2% 60%) 75%, hsl(0 1% 18%));
+  --neutral-11: hsl(15 2% 60%);
+  --neutral-12: hsl(30 20% 96%);
+}