@nebutra/tokens 0.1.1 → 0.1.3

package/skins/gsap.css

@@ -0,0 +1,159 @@
+/**
+ * Brand carrier skin: GSAP (gsap) v1.0.0
+ * darkDefault=true dualMode=false button=gradient-stroke
+ * fonts=2 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "Mori";
+  src: url("/brand-assets/mori-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Mori";
+  src: url("/brand-assets/mori-semibold.woff2") format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+:root,
+.dark,
+html[data-brand="gsap"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 150 7% 6%;
+  --role-canvas-fg: 54 100% 94%;
+  --role-surface: 0 0% 10%;
+  --role-surface-fg: 54 100% 94%;
+  --role-action: 137 92% 47%;
+  --role-action-fg: 150 7% 6%;
+  --role-quiet: 70 5% 25%;
+  --role-quiet-fg: 54 100% 94%;
+  --role-muted: 0 0% 10%;
+  --role-muted-fg: 60 6% 46%;
+  --role-border: 70 5% 25%;
+  --role-input: 70 5% 25%;
+  --role-ring: 137 92% 47%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 150 7% 6%;
+  --foreground: 54 100% 94%;
+  --card: 0 0% 10%;
+  --card-foreground: 54 100% 94%;
+  --popover: 0 0% 10%;
+  --popover-foreground: 54 100% 94%;
+  --primary: 137 92% 47%;
+  --primary-foreground: 150 7% 6%;
+  --secondary: 70 5% 25%;
+  --secondary-foreground: 54 100% 94%;
+  --muted: 0 0% 10%;
+  --muted-foreground: 60 6% 46%;
+  --accent: 70 5% 25%;
+  --accent-foreground: 54 100% 94%;
+  --destructive: 309 100% 47%;
+  --destructive-foreground: 54 100% 94%;
+  --border: 70 5% 25%;
+  --input: 70 5% 25%;
+  --ring: 137 92% 47%;
+  --success: 137 92% 47%;
+  --success-foreground: 150 7% 6%;
+  --info: 191 100% 44%;
+  --info-foreground: 150 7% 6%;
+  --sidebar: 0 0% 10%;
+  --sidebar-foreground: 54 100% 94%;
+  --sidebar-primary: 137 92% 47%;
+  --sidebar-primary-foreground: 150 7% 6%;
+  --sidebar-accent: 70 5% 25%;
+  --sidebar-accent-foreground: 54 100% 94%;
+  --sidebar-border: 70 5% 25%;
+  --sidebar-ring: 137 92% 47%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 100px;
+  --radius-button: 100px;
+  --radius-buttons: 100px;
+  --radius-md: 100px;
+  --radius-card: 8px;
+  --radius-lg: 8px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 100px;
+  --input-radius: 100px;
+  --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: transparent;
+  --btn-default-fg: hsl(var(--foreground));
+  --btn-default-border-width: 1.5px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
+  --btn-default-hover-bg: hsl(var(--primary) / 0.08);
+  --badge-default-bg: transparent;
+  --badge-default-fg: hsl(var(--foreground));
+  --badge-default-border: #fffce1;
+  --badge-default-hover-bg: hsl(var(--foreground) / 0.06);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
+  --control-font-size-md: 0.8125rem;
+
+  /* Typography */
+  --font-sans: "Mori", "Inter Tight", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-weight-heading: 600;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --motion-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --duration-micro: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 250ms;
+  --motion-duration-flow: 250ms;
+  --duration-reveal: 400ms;
+  --motion-duration-reveal: 400ms;
+  --duration-cinematic: 700ms;
+  --motion-duration-cinematic: 700ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 0.875rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.75rem;
+  --space-source-xl: 2.5rem;
+  --space-source-2xl: 3.5rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-gsap: #0ae448;
+  --brand-category-scroll: #fec5fb;
+  --brand-category-svg: #ff8709;
+  --brand-category-text: #9d95ff;
+  --brand-category-ui: #00bae2;
+  --brand-category-other: #abff84;
+}

package/skins/linear.css

@@ -0,0 +1,198 @@
+/**
+ * Brand carrier skin: Linear (linear) v1.0.0
+ * darkDefault=true dualMode=true button=solid
+ * fonts=1 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "Inter Variable";
+  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
+    format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root,
+html[data-brand="linear"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 100%;
+  --role-canvas-fg: 210 11% 4%;
+  --role-surface: 0 0% 98%;
+  --role-surface-fg: 210 11% 4%;
+  --role-action: 64 89% 54%;
+  --role-action-fg: 210 11% 4%;
+  --role-quiet: 220 14% 96%;
+  --role-quiet-fg: 210 11% 4%;
+  --role-muted: 220 14% 96%;
+  --role-muted-fg: 218 5% 41%;
+  --role-border: 220 13% 91%;
+  --role-input: 0 0% 100%;
+  --role-ring: 64 89% 54%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 100%;
+  --foreground: 210 11% 4%;
+  --card: 0 0% 98%;
+  --card-foreground: 210 11% 4%;
+  --popover: 0 0% 98%;
+  --popover-foreground: 210 11% 4%;
+  --primary: 64 89% 54%;
+  --primary-foreground: 210 11% 4%;
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 210 11% 4%;
+  --muted: 220 14% 96%;
+  --muted-foreground: 218 5% 41%;
+  --accent: 220 14% 96%;
+  --accent-foreground: 210 11% 4%;
+  --destructive: 0 79% 63%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 91%;
+  --input: 0 0% 100%;
+  --ring: 64 89% 54%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 186 98% 40%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 210 11% 4%;
+  --sidebar-primary: 64 89% 54%;
+  --sidebar-primary-foreground: 210 11% 4%;
+  --sidebar-accent: 220 14% 96%;
+  --sidebar-accent-foreground: 210 11% 4%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 64 89% 54%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 6px;
+  --radius-button: 6px;
+  --radius-buttons: 6px;
+  --radius-md: 6px;
+  --radius-card: 12px;
+  --radius-lg: 12px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 6px;
+  --input-radius: 6px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --elevation-raised: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --elevation-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --elevation-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --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(--primary));
+  --badge-default-fg: hsl(var(--primary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 80%, transparent);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
+  --control-font-size-md: 0.8125rem;
+
+  /* Typography */
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
+  --font-weight-heading: 510;
+
+  /* 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: 140ms;
+  --motion-duration-flow: 140ms;
+  --duration-reveal: 200ms;
+  --motion-duration-reveal: 200ms;
+  --duration-cinematic: 320ms;
+  --motion-duration-cinematic: 320ms;
+
+  /* Spacing */
+  --space-source-xs: 0.375rem;
+  --space-source-sm: 0.5rem;
+  --space-source-md: 0.75rem;
+  --space-source-lg: 1rem;
+  --space-source-xl: 1.5rem;
+  --space-source-2xl: 2rem;
+}
+
+.dark,
+html.dark[data-brand="linear"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 210 11% 4%;
+  --role-canvas-fg: 0 0% 100%;
+  --role-surface: 210 6% 6%;
+  --role-surface-fg: 0 0% 100%;
+  --role-action: 64 89% 54%;
+  --role-action-fg: 210 11% 4%;
+  --role-quiet: 223 9% 15%;
+  --role-quiet-fg: 218 21% 85%;
+  --role-muted: 210 4% 9%;
+  --role-muted-fg: 218 5% 41%;
+  --role-border: 223 9% 15%;
+  --role-input: 223 9% 15%;
+  --role-ring: 64 89% 54%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 210 11% 4%;
+  --foreground: 0 0% 100%;
+  --card: 210 6% 6%;
+  --card-foreground: 0 0% 100%;
+  --popover: 210 6% 6%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 64 89% 54%;
+  --primary-foreground: 210 11% 4%;
+  --secondary: 223 9% 15%;
+  --secondary-foreground: 218 21% 85%;
+  --muted: 210 4% 9%;
+  --muted-foreground: 218 5% 41%;
+  --accent: 223 9% 15%;
+  --accent-foreground: 218 21% 85%;
+  --destructive: 0 79% 63%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 223 9% 15%;
+  --input: 223 9% 15%;
+  --ring: 64 89% 54%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 186 98% 40%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 210 6% 6%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-primary: 64 89% 54%;
+  --sidebar-primary-foreground: 210 11% 4%;
+  --sidebar-accent: 223 9% 15%;
+  --sidebar-accent-foreground: 218 21% 85%;
+  --sidebar-border: 223 9% 15%;
+  --sidebar-ring: 64 89% 54%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+}

package/skins/notion.css

@@ -0,0 +1,158 @@
+/**
+ * Brand carrier skin: Notion (notion) v1.0.0
+ * darkDefault=false dualMode=false button=solid
+ * fonts=2 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "NotionInter";
+  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
+    format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lyon Text";
+  src: url("/brand-assets/lyon-text-regular.woff2") format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}
+
+:root,
+html[data-brand="notion"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 30 10% 96%;
+  --role-canvas-fg: 0 0% 0%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 0 0% 0%;
+  --role-action: 208 100% 44%;
+  --role-action-fg: 0 0% 100%;
+  --role-quiet: 208 92% 95%;
+  --role-quiet-fg: 208 100% 44%;
+  --role-muted: 208 92% 95%;
+  --role-muted-fg: 0 0% 46%;
+  --role-border: 30 5% 88%;
+  --role-input: 0 0% 100%;
+  --role-ring: 208 100% 44%;
+  --role-brand: 0 0% 0%;
+  --role-brand-fg: 0 0% 100%;
+  --brand-mark: 0 0% 0%;
+  --brand-mark-foreground: 0 0% 100%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 30 10% 96%;
+  --foreground: 0 0% 0%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 0%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 0%;
+  --primary: 208 100% 44%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 208 92% 95%;
+  --secondary-foreground: 208 100% 44%;
+  --muted: 208 92% 95%;
+  --muted-foreground: 0 0% 46%;
+  --accent: 0 0% 0%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 7 92% 58%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 30 5% 88%;
+  --input: 0 0% 100%;
+  --ring: 208 100% 44%;
+  --warning: 40 100% 53%;
+  --warning-foreground: 0 0% 0%;
+  --info: 208 93% 47%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 0%;
+  --sidebar-primary: 208 100% 44%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 0%;
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 30 5% 88%;
+  --sidebar-ring: 208 100% 44%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 8px;
+  --radius-button: 8px;
+  --radius-buttons: 8px;
+  --radius-md: 8px;
+  --radius-card: 12px;
+  --radius-lg: 12px;
+  --radius-badge: 9999px;
+  --badge-default-radius: 9999px;
+  --radius-inputs: 8px;
+  --input-radius: 8px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
+  --elevation-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
+  --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: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-weight-heading: 700;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --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: 120ms;
+  --motion-duration-micro: 120ms;
+  --duration-flow: 200ms;
+  --motion-duration-flow: 200ms;
+  --duration-reveal: 280ms;
+  --motion-duration-reveal: 280ms;
+  --duration-cinematic: 460ms;
+  --motion-duration-cinematic: 460ms;
+
+  /* Spacing */
+  --space-source-xs: 0.625rem;
+  --space-source-sm: 1rem;
+  --space-source-md: 1.5rem;
+  --space-source-lg: 2rem;
+  --space-source-xl: 2.75rem;
+  --space-source-2xl: 3.75rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-brand: #000000;
+  --brand-category-action: #0075de;
+  --brand-category-ghost: #e6f3fe;
+  --brand-category-marigold: #ffb110;
+  --brand-category-coral: #f64932;
+  --brand-category-midnight: #02093a;
+  --brand-category-charcoal: #111111;
+  --brand-category-graphite: #615d59;
+  --brand-decorative-marigold: #ffb110;
+  --brand-decorative-coral: #f64932;
+  --brand-decorative-saffron: #e89d01;
+  --brand-decorative-sky-wash: #62aef0;
+  --brand-decorative-midnight: #02093a;
+}

package/skins/raycast.css

@@ -0,0 +1,185 @@
+/**
+ * Brand carrier skin: Raycast (raycast) v1.0.0
+ * darkDefault=true dualMode=false button=solid
+ * fonts=1 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+/* Brand font faces */
+@font-face {
+  font-family: "Inter";
+  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
+    format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root,
+.dark,
+html[data-brand="raycast"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 210 20% 2%;
+  --role-canvas-fg: 0 0% 100%;
+  --role-surface: 220 18% 3%;
+  --role-surface-fg: 0 0% 100%;
+  --role-action: 0 0% 90%;
+  --role-action-fg: 210 1% 27%;
+  --role-quiet: 220 5% 11%;
+  --role-quiet-fg: 0 0% 100%;
+  --role-muted: 220 8% 7%;
+  --role-muted-fg: 210 1% 42%;
+  --role-border: 210 2% 19%;
+  --role-input: 220 8% 7%;
+  --role-ring: 240 1% 61%;
+  --role-brand: 0 100% 69%;
+  --role-brand-fg: 210 1% 27%;
+  --brand-mark: 0 100% 69%;
+  --brand-mark-foreground: 210 1% 27%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 210 20% 2%;
+  --foreground: 0 0% 100%;
+  --card: 220 18% 3%;
+  --card-foreground: 0 0% 100%;
+  --popover: 220 18% 3%;
+  --popover-foreground: 0 0% 100%;
+  --primary: 0 0% 90%;
+  --primary-foreground: 210 1% 27%;
+  --secondary: 220 5% 11%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 220 8% 7%;
+  --muted-foreground: 210 1% 42%;
+  --accent: 0 100% 69%;
+  --accent-foreground: 210 1% 27%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 210 2% 19%;
+  --input: 220 8% 7%;
+  --ring: 240 1% 61%;
+  --success: 151 59% 59%;
+  --success-foreground: 210 20% 2%;
+  --info: 202 100% 67%;
+  --info-foreground: 210 20% 2%;
+  --sidebar: 220 18% 3%;
+  --sidebar-foreground: 0 0% 100%;
+  --sidebar-primary: 0 0% 90%;
+  --sidebar-primary-foreground: 210 1% 27%;
+  --sidebar-accent: 0 100% 69%;
+  --sidebar-accent-foreground: 210 1% 27%;
+  --sidebar-border: 210 2% 19%;
+  --sidebar-ring: 240 1% 61%;
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 8px;
+  --radius-button: 8px;
+  --radius-buttons: 8px;
+  --radius-md: 8px;
+  --radius-card: 16px;
+  --radius-lg: 16px;
+  --radius-badge: 6px;
+  --badge-default-radius: 6px;
+  --radius-inputs: 8px;
+  --input-radius: 8px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card:
+    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
+      0,
+      0,
+      0,
+      0.2
+    ) 0px -1px 0px 0px inset;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised:
+    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
+      0,
+      0,
+      0,
+      0.2
+    ) 0px -1px 0px 0px inset;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm:
+    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
+      0,
+      0,
+      0,
+      0.2
+    ) 0px -1px 0px 0px inset;
+  --elevation-md:
+    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
+      0,
+      0,
+      0,
+      0.2
+    ) 0px -1px 0px 0px inset;
+  --elevation-lg:
+    rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
+      0,
+      0,
+      0,
+      0.2
+    ) 0px -1px 0px 0px inset;
+  --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);
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 0.875rem;
+  --control-height-tiny: 1.25rem;
+  --control-height-sm: 1.75rem;
+  --control-height-md: 2rem;
+  --control-height-lg: 2.5rem;
+  --control-height-icon-sm: 1.5rem;
+  --control-height-icon-md: 1.75rem;
+  --control-height-icon-lg: 2rem;
+  --control-font-size-md: 0.8125rem;
+
+  /* Typography */
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
+  --font-weight-heading: 400;
+
+  /* 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);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration-micro: 90ms;
+  --motion-duration-micro: 90ms;
+  --duration-flow: 160ms;
+  --motion-duration-flow: 160ms;
+  --duration-reveal: 220ms;
+  --motion-duration-reveal: 220ms;
+  --duration-cinematic: 340ms;
+  --motion-duration-cinematic: 340ms;
+
+  /* Spacing */
+  --space-source-xs: 0.375rem;
+  --space-source-sm: 0.5rem;
+  --space-source-md: 0.75rem;
+  --space-source-lg: 1rem;
+  --space-source-xl: 1.375rem;
+  --space-source-2xl: 2rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-brand: #ff6363;
+  --brand-category-ember: #452324;
+  --brand-category-sky: #63a1ff;
+}