{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ia-collaborative-design-system", "type": "registry:base", "title": "IA Collaborative 1.0.0", "description": "IA Collaborative design tokens, locked by Substrate (version 1.0.0): colour roles in light and dark, type, spacing, radius and motion. Import substrate.css after Tailwind for the utilities and registers.", "config": { "style": "ia-collaborative-design-system", "iconLibrary": "lucide", "tailwind": { "baseColor": "neutral" } }, "cssVars": { "theme": { "font-sans": "'Benton Sans', BentonSans, 'Libre Franklin', system-ui, sans-serif", "font-display": "'Benton Sans', BentonSans, 'Libre Franklin', system-ui, sans-serif", "font-mono": "'JetBrains Mono', monospace", "color-neutral-0": "#FFFFFF", "color-neutral-50": "#F9F9F9", "color-neutral-100": "#F2F2F2", "color-neutral-200": "#E3E3E3", "color-neutral-300": "#CECECE", "color-neutral-400": "#ABABAB", "color-neutral-500": "#8A8A8A", "color-neutral-600": "#6D6D6D", "color-neutral-700": "#515151", "color-neutral-800": "#373737", "color-neutral-900": "#1F1F1F", "color-neutral-950": "#0A0A0A", "color-signal-50": "#F6FAFF", "color-signal-100": "#EBF2FE", "color-signal-200": "#D4E5FD", "color-signal-300": "#B2D0FB", "color-signal-400": "#78ADF9", "color-signal-500": "#3687F7", "color-signal-600": "#2169CC", "color-signal-700": "#144E9C", "color-signal-800": "#09356F", "color-signal-900": "#031E44", "color-signal-950": "#01091E", "color-ember-50": "#FFF7F6", "color-ember-100": "#FFEDEA", "color-ember-200": "#FFD9D3", "color-ember-300": "#FFBAB0", "color-ember-400": "#FB8374", "color-ember-500": "#E45144", "color-ember-600": "#BA392F", "color-ember-700": "#8F2720", "color-ember-800": "#641813", "color-ember-900": "#3D0A07", "color-ember-950": "#1D0000", "color-moss-50": "#F0FDF4", "color-moss-100": "#DEFAE7", "color-moss-200": "#BDF2CF", "color-moss-300": "#8FE4AF", "color-moss-400": "#48C782", "color-moss-500": "#35A167", "color-moss-600": "#288051", "color-moss-700": "#1C603B", "color-moss-800": "#114227", "color-moss-900": "#062615", "color-moss-950": "#010E05", "color-amber-50": "#FFF8F2", "color-amber-100": "#FFEFDF", "color-amber-200": "#FEDDBA", "color-amber-300": "#FDC07D", "color-amber-400": "#E89729", "color-amber-500": "#BD7814", "color-amber-600": "#975F0E", "color-amber-700": "#724608", "color-amber-800": "#4F2F04", "color-amber-900": "#2F1A01", "color-amber-950": "#120700", "text-display": "60px", "text-display--line-height": "1", "text-display--letter-spacing": "-0.015em", "text-display--font-weight": "600", "text-h1": "48px", "text-h1--line-height": "1.15", "text-h1--letter-spacing": "-0.01em", "text-h1--font-weight": "600", "text-h2": "36px", "text-h2--line-height": "1.11", "text-h2--letter-spacing": "-0.02em", "text-h2--font-weight": "500", "text-h3": "30px", "text-h3--line-height": "1.25", "text-h3--letter-spacing": "-0.015em", "text-h3--font-weight": "600", "text-lead": "20px", "text-lead--line-height": "1.625", "text-lead--letter-spacing": "0em", "text-lead--font-weight": "400", "text-body": "16px", "text-body--line-height": "1.5", "text-body--letter-spacing": "0em", "text-body--font-weight": "400", "text-small": "14px", "text-small--line-height": "1.43", "text-small--letter-spacing": "0em", "text-small--font-weight": "400", "text-caption": "12.22px", "text-caption--line-height": "1.45", "text-caption--letter-spacing": "0.0164em", "text-caption--font-weight": "400", "text-micro": "12px", "text-micro--line-height": "1.33", "text-micro--letter-spacing": "0.05em", "text-micro--font-weight": "500", "ease-standard": "cubic-bezier(0.2, 0, 0, 1)", "ease-enter": "cubic-bezier(0, 0, 0, 1)", "ease-exit": "cubic-bezier(0.4, 0, 1, 1)", "color-background": "var(--background)", "color-foreground": "var(--foreground)", "color-canvas": "var(--canvas)", "color-surface": "var(--surface)", "color-surface-raised": "var(--surface-raised)", "color-surface-overlay": "var(--surface-overlay)", "color-surface-sunken": "var(--surface-sunken)", "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-brand-muted": "var(--brand-muted)", "color-brand-base": "var(--brand-base)", "color-brand-strong": "var(--brand-strong)", "color-brand-emphasis": "var(--brand-emphasis)", "color-brand-contrast": "var(--brand-contrast)", "color-interactive": "var(--interactive)", "color-interactive-foreground": "var(--interactive-foreground)", "color-interactive-muted": "var(--interactive-muted)", "color-ring": "var(--ring)", "color-destructive": "var(--destructive)", "color-destructive-foreground": "var(--destructive-foreground)", "color-destructive-muted": "var(--destructive-muted)", "color-destructive-solid": "var(--destructive-solid)", "color-destructive-solid-foreground": "var(--destructive-solid-foreground)", "color-success": "var(--success)", "color-success-foreground": "var(--success-foreground)", "color-success-muted": "var(--success-muted)", "color-success-solid": "var(--success-solid)", "color-success-solid-foreground": "var(--success-solid-foreground)", "color-warning": "var(--warning)", "color-warning-foreground": "var(--warning-foreground)", "color-warning-muted": "var(--warning-muted)", "color-warning-solid": "var(--warning-solid)", "color-warning-solid-foreground": "var(--warning-solid-foreground)", "color-info": "var(--info)", "color-info-foreground": "var(--info-foreground)", "color-info-muted": "var(--info-muted)", "color-info-solid": "var(--info-solid)", "color-info-solid-foreground": "var(--info-solid-foreground)", "color-border": "var(--border)", "color-input": "var(--input)", "color-divider": "var(--divider)", "color-text-secondary": "var(--text-secondary)", "color-text-tertiary": "var(--text-tertiary)", "color-prompt-bar": "var(--prompt-bar)", "color-prompt-bar-foreground": "var(--prompt-bar-foreground)", "color-prompt-bar-line": "var(--prompt-bar-line)", "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-sidebar": "var(--sidebar)", "color-sidebar-foreground": "var(--sidebar-foreground)", "color-sidebar-primary": "var(--sidebar-primary)", "color-sidebar-primary-foreground": "var(--sidebar-primary-foreground)", "color-sidebar-accent": "var(--sidebar-accent)", "color-sidebar-accent-foreground": "var(--sidebar-accent-foreground)", "color-sidebar-border": "var(--sidebar-border)", "color-sidebar-ring": "var(--sidebar-ring)", "color-palette-neutral-900": "var(--palette-neutral-900)", "color-palette-zinc-800": "var(--palette-zinc-800)", "color-palette-neutral-600": "var(--palette-neutral-600)", "color-palette-gray-100": "var(--palette-gray-100)", "color-palette-gray-200": "var(--palette-gray-200)", "color-palette-neutral-400": "var(--palette-neutral-400)", "color-palette-primary": "var(--palette-primary)", "color-palette-gray-500": "var(--palette-gray-500)", "color-palette-neutral-700": "var(--palette-neutral-700)", "color-palette-black": "var(--palette-black)", "color-palette-white": "var(--palette-white)", "color-palette-light-gray": "var(--palette-light-gray)", "color-palette-dark-gray": "var(--palette-dark-gray)", "color-ink-heading": "var(--ink-heading)", "color-ink-display": "var(--ink-display)", "color-primary-hover": "var(--primary-hover)", "color-inverse-surface": "var(--inverse-surface)", "color-inverse-foreground": "var(--inverse-foreground)", "color-ink-eyebrow": "var(--ink-eyebrow)", "radius-sm": "var(--r-sm)", "radius-md": "var(--r-md)", "radius-lg": "var(--r-lg)", "radius-xl": "var(--r-xl)", "radius-2xl": "var(--r-2xl)", "radius-controls": "var(--r-controls)", "radius-containers": "var(--r-containers)", "radius-inline": "var(--r-inline)", "radius-chip": "var(--r-chip)", "radius-track": "var(--r-track)", "shadow-xs": "var(--sh-xs)", "shadow-sm": "var(--sh-sm)", "shadow-md": "var(--sh-md)", "shadow-lg": "var(--sh-lg)", "shadow-xl": "var(--sh-xl)", "spacing-hairline": "var(--sp-hairline)", "spacing-optical": "var(--sp-optical)", "spacing-inset-2xs": "var(--sp-inset-2xs)", "spacing-inset-xs": "var(--sp-inset-xs)", "spacing-inset-sm": "var(--sp-inset-sm)", "spacing-inset-md": "var(--sp-inset-md)", "spacing-inset-lg": "var(--sp-inset-lg)", "spacing-inset-xl": "var(--sp-inset-xl)", "spacing-stack-xs": "var(--sp-stack-xs)", "spacing-stack-sm": "var(--sp-stack-sm)", "spacing-stack-md": "var(--sp-stack-md)", "spacing-stack-lg": "var(--sp-stack-lg)", "spacing-region": "var(--sp-region)", "spacing-section": "var(--sp-section)", "spacing-section-lg": "var(--sp-section-lg)", "spacing-chapter": "var(--sp-chapter)", "spacing-chapter-lg": "var(--sp-chapter-lg)", "spacing-control-2xs": "var(--ctl-2xs)", "spacing-control-xs": "var(--ctl-xs)", "spacing-control-sm": "var(--ctl-sm)", "spacing-control-md": "var(--ctl-md)", "spacing-control-lg": "var(--ctl-lg)", "spacing-control-xl": "var(--ctl-xl)", "container-measure-xs": "var(--ms-xs)", "container-measure-sm": "var(--ms-sm)", "container-measure-md": "var(--ms-md)", "container-measure-lg": "var(--ms-lg)", "container-layout-narrow": "var(--lay-narrow)", "container-layout-page": "var(--lay-page)", "container-layout-wide": "var(--lay-wide)", "container-layout-gutter": "var(--lay-gutter)", "spacing-frame-pad": "var(--deck-frame-pad)", "spacing-frame-gutter": "var(--deck-frame-gutter)", "spacing-frame-2xl": "var(--deck-gap-2xl)", "spacing-frame-xl": "var(--deck-gap-xl)", "spacing-frame-lg": "var(--deck-gap-lg)", "spacing-frame-md": "var(--deck-gap-md)", "spacing-frame-sm": "var(--deck-gap-sm)", "spacing-frame-xs": "var(--deck-gap-xs)" }, "light": { "case-heading": "none", "case-eyebrow": "uppercase", "tracking-eyebrow": "0.08em", "weight-eyebrow": "500", "duration-instant": "120ms", "duration-quick": "200ms", "duration-standard": "320ms", "duration-considered": "520ms", "background": "#ffffff", "foreground": "#000000", "canvas": "var(--color-neutral-50)", "surface": "var(--color-neutral-0)", "surface-raised": "var(--color-neutral-0)", "surface-overlay": "var(--color-neutral-0)", "surface-sunken": "var(--color-neutral-100)", "card": "#f3f4f6", "card-foreground": "#000000", "popover": "var(--color-neutral-0)", "popover-foreground": "var(--color-neutral-900)", "primary": "#176cd9", "primary-foreground": "#ffffff", "secondary": "#ffffff", "secondary-foreground": "#000000", "muted": "var(--color-neutral-100)", "muted-foreground": "var(--color-neutral-700)", "accent": "var(--color-neutral-100)", "accent-foreground": "var(--color-neutral-900)", "brand-muted": "var(--color-signal-100)", "brand-base": "#176cd9", "brand-strong": "#176cd9", "brand-emphasis": "var(--color-signal-700)", "brand-contrast": "#ffffff", "interactive": "#176cd9", "interactive-foreground": "var(--color-neutral-0)", "interactive-muted": "var(--color-signal-100)", "ring": "#176cd9", "destructive": "#e7000b", "destructive-foreground": "#ffffff", "destructive-muted": "var(--color-ember-100)", "destructive-solid": "var(--color-ember-600)", "destructive-solid-foreground": "var(--color-neutral-0)", "success": "var(--color-moss-700)", "success-foreground": "var(--color-neutral-0)", "success-muted": "var(--color-moss-100)", "success-solid": "var(--color-moss-600)", "success-solid-foreground": "var(--color-neutral-0)", "warning": "var(--color-amber-700)", "warning-foreground": "var(--color-neutral-0)", "warning-muted": "var(--color-amber-100)", "warning-solid": "var(--color-amber-600)", "warning-solid-foreground": "var(--color-neutral-0)", "info": "var(--color-signal-700)", "info-foreground": "var(--color-neutral-0)", "info-muted": "var(--color-signal-100)", "info-solid": "var(--color-signal-600)", "info-solid-foreground": "var(--color-neutral-0)", "border": "#e5e7eb", "input": "#d7d7d7", "divider": "var(--color-neutral-200)", "text-secondary": "#525252", "text-tertiary": "var(--color-neutral-600)", "prompt-bar": "var(--color-neutral-900)", "prompt-bar-foreground": "var(--color-neutral-0)", "prompt-bar-line": "var(--color-neutral-700)", "chart-1": "#176cd9", "chart-2": "#000000", "chart-3": "#6a7282", "chart-4": "#144e9c", "chart-5": "var(--color-neutral-500)", "sidebar": "var(--color-neutral-0)", "sidebar-foreground": "var(--color-neutral-900)", "sidebar-primary": "var(--color-signal-600)", "sidebar-primary-foreground": "var(--color-neutral-0)", "sidebar-accent": "var(--color-neutral-100)", "sidebar-accent-foreground": "var(--color-neutral-900)", "sidebar-border": "var(--color-neutral-200)", "sidebar-ring": "var(--color-signal-700)", "sp-hairline": "2px", "sp-optical": "4px", "sp-inset-2xs": "6px", "sp-inset-xs": "8px", "sp-inset-sm": "10px", "sp-inset-md": "12px", "sp-inset-lg": "24px", "sp-inset-xl": "27px", "sp-stack-xs": "20px", "sp-stack-sm": "24px", "sp-stack-md": "24px", "sp-stack-lg": "40px", "sp-region": "48px", "sp-section": "100px", "sp-section-lg": "100px", "sp-chapter": "120px", "sp-chapter-lg": "128px", "ms-xs": "34ch", "ms-sm": "48ch", "ms-md": "62ch", "ms-lg": "72ch", "lay-narrow": "48rem", "lay-page": "1400px", "lay-wide": "80rem", "lay-gutter": "32px", "ctl-2xs": "24px", "ctl-xs": "28px", "ctl-sm": "32px", "ctl-md": "48px", "ctl-lg": "48px", "ctl-xl": "48px", "stroke-hairline": "1px", "r-sm": "6px", "r-md": "8px", "r-lg": "10px", "r-xl": "14px", "r-2xl": "18px", "r-controls": "8px", "r-containers": "14px", "r-inline": "6px", "r-chip": "9999px", "r-track": "9999px", "corner-controls": "superellipse(1)", "corner-containers": "superellipse(1)", "corner-inline": "superellipse(1)", "sh-xs": "0 1px 2px 0 rgb(23 23 23 / 0.05)", "sh-sm": "0 1px 3px 0 rgb(23 23 23 / 0.08), 0 1px 2px -1px rgb(23 23 23 / 0.04)", "sh-md": "0 2px 6px -1px rgb(23 23 23 / 0.07), 0 8px 24px -4px rgb(23 23 23 / 0.05)", "sh-lg": "0 4px 12px -2px rgb(23 23 23 / 0.08), 0 16px 40px -8px rgb(23 23 23 / 0.06)", "sh-xl": "0 8px 24px -4px rgb(23 23 23 / 0.10), 0 24px 64px -12px rgb(23 23 23 / 0.08)", "palette-neutral-900": "#171717", "palette-zinc-800": "#27272a", "palette-neutral-600": "#525252", "palette-gray-100": "#f3f4f6", "palette-gray-200": "#e5e7eb", "palette-neutral-400": "#a1a1a1", "palette-primary": "#176cd9", "palette-gray-500": "#6a7282", "palette-neutral-700": "#404040", "palette-black": "#000000", "palette-white": "#ffffff", "palette-light-gray": "#d7d7d7", "palette-dark-gray": "#aeaeae", "motion-duration-tw-animation-delay": "0s", "motion-ease-out": "cubic-bezier(0,0,.2,1)", "motion-default-transition-timing-function": "cubic-bezier(.4,0,.2,1)", "ink-heading": "#000000", "ink-display": "#000000", "primary-hover": "#1977ef", "inverse-surface": "#000000", "inverse-foreground": "#ffffff", "ink-eyebrow": "#aeaeae", "cap-track": "round" }, "dark": { "background": "var(--color-neutral-950)", "foreground": "var(--color-neutral-50)", "canvas": "var(--color-neutral-950)", "surface": "var(--color-neutral-900)", "surface-raised": "var(--color-neutral-800)", "surface-overlay": "var(--color-neutral-800)", "surface-sunken": "var(--color-neutral-950)", "card": "var(--color-neutral-900)", "card-foreground": "var(--color-neutral-50)", "popover": "var(--color-neutral-900)", "popover-foreground": "var(--color-neutral-50)", "primary": "var(--color-signal-600)", "primary-foreground": "var(--color-neutral-0)", "secondary": "var(--color-neutral-800)", "secondary-foreground": "var(--color-neutral-50)", "muted": "var(--color-neutral-800)", "muted-foreground": "var(--color-neutral-400)", "accent": "var(--color-neutral-800)", "accent-foreground": "var(--color-neutral-50)", "brand-muted": "var(--color-signal-900)", "brand-base": "var(--color-signal-600)", "brand-strong": "var(--color-signal-600)", "brand-contrast": "var(--color-neutral-0)", "interactive": "var(--color-signal-400)", "interactive-foreground": "var(--color-neutral-950)", "interactive-muted": "var(--color-signal-900)", "ring": "var(--color-signal-400)", "destructive": "var(--color-ember-400)", "destructive-foreground": "var(--color-neutral-950)", "destructive-muted": "var(--color-ember-900)", "destructive-solid": "var(--color-ember-500)", "destructive-solid-foreground": "var(--color-neutral-950)", "success": "var(--color-moss-400)", "success-foreground": "var(--color-neutral-950)", "success-muted": "var(--color-moss-900)", "success-solid": "var(--color-moss-400)", "success-solid-foreground": "var(--color-neutral-950)", "warning": "var(--color-amber-500)", "warning-foreground": "var(--color-neutral-950)", "warning-muted": "var(--color-amber-900)", "warning-solid": "var(--color-amber-500)", "warning-solid-foreground": "var(--color-neutral-950)", "info": "var(--color-signal-400)", "info-foreground": "var(--color-neutral-950)", "info-muted": "var(--color-signal-900)", "info-solid": "var(--color-signal-400)", "info-solid-foreground": "var(--color-neutral-950)", "border": "var(--color-neutral-800)", "input": "var(--color-neutral-700)", "divider": "var(--color-neutral-800)", "text-secondary": "var(--color-neutral-300)", "text-tertiary": "var(--color-neutral-400)", "prompt-bar": "var(--color-neutral-50)", "prompt-bar-foreground": "var(--color-neutral-900)", "prompt-bar-line": "var(--color-neutral-300)", "chart-1": "#78adf9", "chart-2": "#f9f9f9", "chart-3": "#ababab", "chart-4": "#2169cc", "chart-5": "#8a8a8a", "sidebar": "var(--color-neutral-900)", "sidebar-foreground": "var(--color-neutral-50)", "sidebar-accent": "var(--color-neutral-800)", "sidebar-accent-foreground": "var(--color-neutral-50)", "sidebar-border": "var(--color-neutral-800)", "sidebar-ring": "var(--color-signal-400)", "ink-heading": "#f9f9f9", "ink-display": "#f9f9f9", "primary-hover": "#2474e0", "inverse-surface": "#f9f9f9", "inverse-foreground": "#0a0a0a" } }, "files": [ { "path": "registry/ia-collaborative-design-system/substrate.css", "type": "registry:file", "target": "substrate.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');\n/* GENERATED by @substrate/tokens/build.mjs — DO NOT EDIT.\n * Source of truth: packages/tokens/src/*.tokens.json (DTCG).\n * Tier 1: primitives (@theme) → Tier 2: semantic contract (:root / skins)\n * → Tier 3: utility bridge (@theme inline). Style ONLY with semantic utilities. */\n\n@custom-variant dark (&:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *));\n\n/* ── BASE — default border color ─────────────────────────────────────────── */\n/* Tailwind v4 dropped v3's `border-color: gray-200` preflight; a bare\n * `border` / `border-b` now paints in `currentColor`, i.e. near-black ink.\n * Every unqualified border in the system silently rendered as a hard rule.\n * Re-point the default at the semantic border token so `border-b` means the\n * hairline it reads as, and a skin can still move it. */\n@layer base {\n *,\n ::before,\n ::after,\n ::backdrop {\n border-color: var(--border);\n }\n}\n\n/* ── TIER 1 — primitives ─────────────────────────────────────────────────── */\n/* `static` is required, not stylistic: plain @theme tree-shakes any custom\n * property no utility or semantic token references, so unreferenced ramp steps\n * (ember-200, signal-700, …) silently resolve to transparent wherever they're\n * read through var() — e.g. the foundations ramp specimens. A token package\n * must emit its whole palette. */\n@theme static {\n --font-sans: 'Benton Sans', BentonSans, 'Libre Franklin', system-ui, sans-serif;\n --font-display: 'Benton Sans', BentonSans, 'Libre Franklin', system-ui, sans-serif;\n --font-mono: 'JetBrains Mono', monospace;\n\n\n --color-neutral-0: #FFFFFF;\n --color-neutral-50: #F9F9F9;\n --color-neutral-100: #F2F2F2;\n --color-neutral-200: #E3E3E3;\n --color-neutral-300: #CECECE;\n --color-neutral-400: #ABABAB;\n --color-neutral-500: #8A8A8A;\n --color-neutral-600: #6D6D6D;\n --color-neutral-700: #515151;\n --color-neutral-800: #373737;\n --color-neutral-900: #1F1F1F;\n --color-neutral-950: #0A0A0A;\n\n --color-signal-50: #F6FAFF;\n --color-signal-100: #EBF2FE;\n --color-signal-200: #D4E5FD;\n --color-signal-300: #B2D0FB;\n --color-signal-400: #78ADF9;\n --color-signal-500: #3687F7;\n --color-signal-600: #2169CC;\n --color-signal-700: #144E9C;\n --color-signal-800: #09356F;\n --color-signal-900: #031E44;\n --color-signal-950: #01091E;\n\n --color-ember-50: #FFF7F6;\n --color-ember-100: #FFEDEA;\n --color-ember-200: #FFD9D3;\n --color-ember-300: #FFBAB0;\n --color-ember-400: #FB8374;\n --color-ember-500: #E45144;\n --color-ember-600: #BA392F;\n --color-ember-700: #8F2720;\n --color-ember-800: #641813;\n --color-ember-900: #3D0A07;\n --color-ember-950: #1D0000;\n\n --color-moss-50: #F0FDF4;\n --color-moss-100: #DEFAE7;\n --color-moss-200: #BDF2CF;\n --color-moss-300: #8FE4AF;\n --color-moss-400: #48C782;\n --color-moss-500: #35A167;\n --color-moss-600: #288051;\n --color-moss-700: #1C603B;\n --color-moss-800: #114227;\n --color-moss-900: #062615;\n --color-moss-950: #010E05;\n\n --color-amber-50: #FFF8F2;\n --color-amber-100: #FFEFDF;\n --color-amber-200: #FEDDBA;\n --color-amber-300: #FDC07D;\n --color-amber-400: #E89729;\n --color-amber-500: #BD7814;\n --color-amber-600: #975F0E;\n --color-amber-700: #724608;\n --color-amber-800: #4F2F04;\n --color-amber-900: #2F1A01;\n --color-amber-950: #120700;\n\n --text-display: 60px;\n --text-display--line-height: 1;\n --text-display--letter-spacing: -0.015em;\n --text-display--font-weight: 600;\n --text-h1: 48px;\n --text-h1--line-height: 1.15;\n --text-h1--letter-spacing: -0.01em;\n --text-h1--font-weight: 600;\n --text-h2: 36px;\n --text-h2--line-height: 1.11;\n --text-h2--letter-spacing: -0.02em;\n --text-h2--font-weight: 500;\n --text-h3: 30px;\n --text-h3--line-height: 1.25;\n --text-h3--letter-spacing: -0.015em;\n --text-h3--font-weight: 600;\n --text-lead: 20px;\n --text-lead--line-height: 1.625;\n --text-lead--letter-spacing: 0em;\n --text-lead--font-weight: 400;\n --text-body: 16px;\n --text-body--line-height: 1.5;\n --text-body--letter-spacing: 0em;\n --text-body--font-weight: 400;\n --text-small: 14px;\n --text-small--line-height: 1.43;\n --text-small--letter-spacing: 0em;\n --text-small--font-weight: 400;\n --text-caption: 12.22px;\n --text-caption--line-height: 1.45;\n --text-caption--letter-spacing: 0.0164em;\n --text-caption--font-weight: 400;\n --text-micro: 12px;\n --text-micro--line-height: 1.33;\n --text-micro--letter-spacing: 0.05em;\n --text-micro--font-weight: 500;\n\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --ease-enter: cubic-bezier(0, 0, 0, 1);\n --ease-exit: cubic-bezier(0.4, 0, 1, 1);\n}\n\n/* ── TYPE TREATMENT — weight, tracking and case ───────────────────────────── */\n/* Weight and tracking ride the --text-* tokens above; CASE cannot (Tailwind's\n * type namespace has no text-transform key), so it lives here with the utilities\n * that read it. `type-eyebrow` is the whole label treatment as one token —\n * before it existed the library re-spelled it 17 times at three different\n * tracking values, which is what an un-named token looks like. */\n:root {\n --case-heading: none;\n --case-eyebrow: uppercase;\n --tracking-eyebrow: 0.08em;\n --weight-eyebrow: 500;\n}\n\n@utility type-eyebrow {\n font-size: var(--text-micro);\n line-height: var(--text-micro--line-height);\n letter-spacing: var(--tracking-eyebrow);\n font-weight: var(--weight-eyebrow);\n text-transform: var(--case-eyebrow);\n}\n\n@utility case-heading {\n text-transform: var(--case-heading);\n}\n\n/* ── THE DISPLAY FAMILY'S CONSUMER (FR-06) ────────────────────────────────── */\n/* `--font-display` was emitted for months and NOTHING read it. Every heading in\n * the library inherited `font-sans`, so the two-family packs moved a real token\n * and changed nothing on the canvas — a knob that lies, and the system's own\n * documented counter-example.\n *\n * `:where()` is the whole design of the fix. It carries ZERO specificity, so\n * any font utility a component sets wins without `!important` and without a\n * cascade puzzle — opting a heading back into the text face is `font-sans` and\n * nothing else. Matching ELEMENTS rather than `.text-h1` keeps the token layer\n * from depending on utility class names, and it deliberately stops at h1–h3:\n * CardTitle is a
, table column heads are , and a display face has no\n * business in either.\n *\n * With a one-family pack --font-display IS --font-sans and this rule is a no-op,\n * which is why it can ship on by default. The one-family rule is still the\n * house answer; it is now a choice rather than a limitation. */\n@layer base {\n :where(h1, h2, h3) {\n font-family: var(--font-display);\n }\n}\n\n/* ── FORM — the hairline's weight (FR-12) ─────────────────────────────────── */\n/* `border` compiles to a literal `border-width: 1px`, so a border-weight token\n * with no way into that utility is a token nobody spends. Re-declaring the\n * family here is what gives it ~660 consumers instead of zero.\n *\n * The mechanism is the same one the border-COLOR rule above already relies on:\n * this file is imported after `tailwindcss`, so within `@layer utilities` these\n * rules land second and win on the one property they name. Everything else\n * Tailwind's own `.border` sets — `border-style`, the `--tw-border-style`\n * plumbing — is untouched, because two rules with the same selector both apply\n * and only conflicting declarations resolve by order.\n *\n * Explicit widths are deliberately NOT re-declared: `border-2` still means 2px.\n * A system where a named number silently meant something else would be worse\n * than one with no weight parameter at all. */\n@layer utilities {\n .border { border-width: var(--stroke-hairline); }\n .border-t { border-top-width: var(--stroke-hairline); }\n .border-r { border-right-width: var(--stroke-hairline); }\n .border-b { border-bottom-width: var(--stroke-hairline); }\n .border-l { border-left-width: var(--stroke-hairline); }\n .border-x { border-inline-width: var(--stroke-hairline); }\n .border-y { border-block-width: var(--stroke-hairline); }\n}\n\n/* ── FORM — corner curvature by role (FR-21) ──────────────────────────────── */\n/* `corner-shape` is a separate property from `border-radius`: it decides whether\n * the corner `rounded-{role}` already sized is a circular arc or a superellipse.\n * Binding it here, on the same three role classes the by-role radius produces,\n * is what makes every surface that already spends `rounded-controls` /\n * `rounded-containers` / `rounded-inline` pick up the smoothing with no per-site\n * change — the same \"re-declare the utility to read a semantic var, land second\n * in @layer utilities and win on the one property named\" mechanism the border\n * weights above rely on. Tailwind's generated `.rounded-{role}` sets\n * `border-radius`; this sets `corner-shape`; both apply.\n *\n * The default value is `superellipse(1)`, a circular arc the engine renders\n * identically to no `corner-shape` at all — so this block is inert until\n * cornerSmoothing is rolled, and a browser without `corner-shape` support\n * ignores it and keeps the arc. Zero per-frame cost: it is a paint-time property\n * like `border-radius`, not a runtime. */\n@layer utilities {\n .rounded-controls { corner-shape: var(--corner-controls); }\n .rounded-containers { corner-shape: var(--corner-containers); }\n .rounded-inline { corner-shape: var(--corner-inline); }\n /* Track strokework (D17): SVG line ends follow the track family — round on a\n * capsule track, butt on a rect one. `--cap-track` is derived from\n * `--r-track` at generate time, never authored. */\n .cap-track { stroke-linecap: var(--cap-track, round); }\n}\n\n/* ── TIER 3 — utility bridge (semantic vars → Tailwind utilities) ─────────── */\n@theme inline {\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-canvas: var(--canvas);\n --color-surface: var(--surface);\n --color-surface-raised: var(--surface-raised);\n --color-surface-overlay: var(--surface-overlay);\n --color-surface-sunken: var(--surface-sunken);\n --color-card: var(--card);\n --color-card-foreground: var(--card-foreground);\n --color-popover: var(--popover);\n --color-popover-foreground: var(--popover-foreground);\n --color-primary: var(--primary);\n --color-primary-foreground: var(--primary-foreground);\n --color-secondary: var(--secondary);\n --color-secondary-foreground: var(--secondary-foreground);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-accent: var(--accent);\n --color-accent-foreground: var(--accent-foreground);\n --color-brand-muted: var(--brand-muted);\n --color-brand-base: var(--brand-base);\n --color-brand-strong: var(--brand-strong);\n --color-brand-emphasis: var(--brand-emphasis);\n --color-brand-contrast: var(--brand-contrast);\n --color-interactive: var(--interactive);\n --color-interactive-foreground: var(--interactive-foreground);\n --color-interactive-muted: var(--interactive-muted);\n --color-ring: var(--ring);\n --color-destructive: var(--destructive);\n --color-destructive-foreground: var(--destructive-foreground);\n --color-destructive-muted: var(--destructive-muted);\n --color-destructive-solid: var(--destructive-solid);\n --color-destructive-solid-foreground: var(--destructive-solid-foreground);\n --color-success: var(--success);\n --color-success-foreground: var(--success-foreground);\n --color-success-muted: var(--success-muted);\n --color-success-solid: var(--success-solid);\n --color-success-solid-foreground: var(--success-solid-foreground);\n --color-warning: var(--warning);\n --color-warning-foreground: var(--warning-foreground);\n --color-warning-muted: var(--warning-muted);\n --color-warning-solid: var(--warning-solid);\n --color-warning-solid-foreground: var(--warning-solid-foreground);\n --color-info: var(--info);\n --color-info-foreground: var(--info-foreground);\n --color-info-muted: var(--info-muted);\n --color-info-solid: var(--info-solid);\n --color-info-solid-foreground: var(--info-solid-foreground);\n --color-border: var(--border);\n --color-input: var(--input);\n --color-divider: var(--divider);\n --color-text-secondary: var(--text-secondary);\n --color-text-tertiary: var(--text-tertiary);\n --color-prompt-bar: var(--prompt-bar);\n --color-prompt-bar-foreground: var(--prompt-bar-foreground);\n --color-prompt-bar-line: var(--prompt-bar-line);\n --color-chart-1: var(--chart-1);\n --color-chart-2: var(--chart-2);\n --color-chart-3: var(--chart-3);\n --color-chart-4: var(--chart-4);\n --color-chart-5: var(--chart-5);\n --color-sidebar: var(--sidebar);\n --color-sidebar-foreground: var(--sidebar-foreground);\n --color-sidebar-primary: var(--sidebar-primary);\n --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n --color-sidebar-accent: var(--sidebar-accent);\n --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n --color-sidebar-border: var(--sidebar-border);\n --color-sidebar-ring: var(--sidebar-ring);\n --color-palette-neutral-900: var(--palette-neutral-900);\n --color-palette-zinc-800: var(--palette-zinc-800);\n --color-palette-neutral-600: var(--palette-neutral-600);\n --color-palette-gray-100: var(--palette-gray-100);\n --color-palette-gray-200: var(--palette-gray-200);\n --color-palette-neutral-400: var(--palette-neutral-400);\n --color-palette-primary: var(--palette-primary);\n --color-palette-gray-500: var(--palette-gray-500);\n --color-palette-neutral-700: var(--palette-neutral-700);\n --color-palette-black: var(--palette-black);\n --color-palette-white: var(--palette-white);\n --color-palette-light-gray: var(--palette-light-gray);\n --color-palette-dark-gray: var(--palette-dark-gray);\n --color-ink-heading: var(--ink-heading);\n --color-ink-display: var(--ink-display);\n --color-primary-hover: var(--primary-hover);\n --color-inverse-surface: var(--inverse-surface);\n --color-inverse-foreground: var(--inverse-foreground);\n --color-ink-eyebrow: var(--ink-eyebrow);\n --radius-sm: var(--r-sm);\n --radius-md: var(--r-md);\n --radius-lg: var(--r-lg);\n --radius-xl: var(--r-xl);\n --radius-2xl: var(--r-2xl);\n --radius-controls: var(--r-controls);\n --radius-containers: var(--r-containers);\n --radius-inline: var(--r-inline);\n --radius-chip: var(--r-chip);\n --radius-track: var(--r-track);\n --shadow-xs: var(--sh-xs);\n --shadow-sm: var(--sh-sm);\n --shadow-md: var(--sh-md);\n --shadow-lg: var(--sh-lg);\n --shadow-xl: var(--sh-xl);\n --spacing-hairline: var(--sp-hairline);\n --spacing-optical: var(--sp-optical);\n --spacing-inset-2xs: var(--sp-inset-2xs);\n --spacing-inset-xs: var(--sp-inset-xs);\n --spacing-inset-sm: var(--sp-inset-sm);\n --spacing-inset-md: var(--sp-inset-md);\n --spacing-inset-lg: var(--sp-inset-lg);\n --spacing-inset-xl: var(--sp-inset-xl);\n --spacing-stack-xs: var(--sp-stack-xs);\n --spacing-stack-sm: var(--sp-stack-sm);\n --spacing-stack-md: var(--sp-stack-md);\n --spacing-stack-lg: var(--sp-stack-lg);\n --spacing-region: var(--sp-region);\n --spacing-section: var(--sp-section);\n --spacing-section-lg: var(--sp-section-lg);\n --spacing-chapter: var(--sp-chapter);\n --spacing-chapter-lg: var(--sp-chapter-lg);\n --spacing-control-2xs: var(--ctl-2xs);\n --spacing-control-xs: var(--ctl-xs);\n --spacing-control-sm: var(--ctl-sm);\n --spacing-control-md: var(--ctl-md);\n --spacing-control-lg: var(--ctl-lg);\n --spacing-control-xl: var(--ctl-xl);\n --container-measure-xs: var(--ms-xs);\n --container-measure-sm: var(--ms-sm);\n --container-measure-md: var(--ms-md);\n --container-measure-lg: var(--ms-lg);\n --container-layout-narrow: var(--lay-narrow);\n --container-layout-page: var(--lay-page);\n --container-layout-wide: var(--lay-wide);\n --container-layout-gutter: var(--lay-gutter);\n --spacing-frame-pad: var(--deck-frame-pad);\n --spacing-frame-gutter: var(--deck-frame-gutter);\n --spacing-frame-2xl: var(--deck-gap-2xl);\n --spacing-frame-xl: var(--deck-gap-xl);\n --spacing-frame-lg: var(--deck-gap-lg);\n --spacing-frame-md: var(--deck-gap-md);\n --spacing-frame-sm: var(--deck-gap-sm);\n --spacing-frame-xs: var(--deck-gap-xs);\n}\n\n/* ── TIER 2 — semantic contract (vanilla · light) ─────────────────────────── */\n:root {\n color-scheme: light;\n --duration-instant: 120ms;\n --duration-quick: 200ms;\n --duration-standard: 320ms;\n --duration-considered: 520ms;\n --background: #ffffff;\n --foreground: #000000;\n --canvas: var(--color-neutral-50);\n --surface: var(--color-neutral-0);\n --surface-raised: var(--color-neutral-0);\n --surface-overlay: var(--color-neutral-0);\n --surface-sunken: var(--color-neutral-100);\n --card: #f3f4f6;\n --card-foreground: #000000;\n --popover: var(--color-neutral-0);\n --popover-foreground: var(--color-neutral-900);\n --primary: #176cd9;\n --primary-foreground: #ffffff;\n --secondary: #ffffff;\n --secondary-foreground: #000000;\n --muted: var(--color-neutral-100);\n --muted-foreground: var(--color-neutral-700);\n --accent: var(--color-neutral-100);\n --accent-foreground: var(--color-neutral-900);\n --brand-muted: var(--color-signal-100);\n --brand-base: #176cd9;\n --brand-strong: #176cd9;\n --brand-emphasis: var(--color-signal-700);\n --brand-contrast: #ffffff;\n --interactive: #176cd9;\n --interactive-foreground: var(--color-neutral-0);\n --interactive-muted: var(--color-signal-100);\n --ring: #176cd9;\n --destructive: #e7000b;\n --destructive-foreground: #ffffff;\n --destructive-muted: var(--color-ember-100);\n --destructive-solid: var(--color-ember-600);\n --destructive-solid-foreground: var(--color-neutral-0);\n --success: var(--color-moss-700);\n --success-foreground: var(--color-neutral-0);\n --success-muted: var(--color-moss-100);\n --success-solid: var(--color-moss-600);\n --success-solid-foreground: var(--color-neutral-0);\n --warning: var(--color-amber-700);\n --warning-foreground: var(--color-neutral-0);\n --warning-muted: var(--color-amber-100);\n --warning-solid: var(--color-amber-600);\n --warning-solid-foreground: var(--color-neutral-0);\n --info: var(--color-signal-700);\n --info-foreground: var(--color-neutral-0);\n --info-muted: var(--color-signal-100);\n --info-solid: var(--color-signal-600);\n --info-solid-foreground: var(--color-neutral-0);\n --border: #e5e7eb;\n --input: #d7d7d7;\n --divider: var(--color-neutral-200);\n --text-secondary: #525252;\n --text-tertiary: var(--color-neutral-600);\n --prompt-bar: var(--color-neutral-900);\n --prompt-bar-foreground: var(--color-neutral-0);\n --prompt-bar-line: var(--color-neutral-700);\n --chart-1: #176cd9;\n --chart-2: #000000;\n --chart-3: #6a7282;\n --chart-4: #144e9c;\n --chart-5: var(--color-neutral-500);\n --sidebar: var(--color-neutral-0);\n --sidebar-foreground: var(--color-neutral-900);\n --sidebar-primary: var(--color-signal-600);\n --sidebar-primary-foreground: var(--color-neutral-0);\n --sidebar-accent: var(--color-neutral-100);\n --sidebar-accent-foreground: var(--color-neutral-900);\n --sidebar-border: var(--color-neutral-200);\n --sidebar-ring: var(--color-signal-700);\n --sp-hairline: 2px;\n --sp-optical: 4px;\n --sp-inset-2xs: 6px;\n --sp-inset-xs: 8px;\n --sp-inset-sm: 10px;\n --sp-inset-md: 12px;\n --sp-inset-lg: 24px;\n --sp-inset-xl: 27px;\n --sp-stack-xs: 20px;\n --sp-stack-sm: 24px;\n --sp-stack-md: 24px;\n --sp-stack-lg: 40px;\n --sp-region: 48px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 120px;\n --sp-chapter-lg: 128px;\n --ms-xs: 34ch;\n --ms-sm: 48ch;\n --ms-md: 62ch;\n --ms-lg: 72ch;\n --lay-narrow: 48rem;\n --lay-page: 1400px;\n --lay-wide: 80rem;\n --lay-gutter: 32px;\n --ctl-2xs: 24px;\n --ctl-xs: 28px;\n --ctl-sm: 32px;\n --ctl-md: 48px;\n --ctl-lg: 48px;\n --ctl-xl: 48px;\n --stroke-hairline: 1px;\n --r-sm: 6px;\n --r-md: 8px;\n --r-lg: 10px;\n --r-xl: 14px;\n --r-2xl: 18px;\n --r-controls: 8px;\n --r-containers: 14px;\n --r-inline: 6px;\n --r-chip: 9999px;\n --r-track: 9999px;\n --corner-controls: superellipse(1);\n --corner-containers: superellipse(1);\n --corner-inline: superellipse(1);\n --sh-xs: 0 1px 2px 0 rgb(23 23 23 / 0.05);\n --sh-sm: 0 1px 3px 0 rgb(23 23 23 / 0.08), 0 1px 2px -1px rgb(23 23 23 / 0.04);\n --sh-md: 0 2px 6px -1px rgb(23 23 23 / 0.07), 0 8px 24px -4px rgb(23 23 23 / 0.05);\n --sh-lg: 0 4px 12px -2px rgb(23 23 23 / 0.08), 0 16px 40px -8px rgb(23 23 23 / 0.06);\n --sh-xl: 0 8px 24px -4px rgb(23 23 23 / 0.10), 0 24px 64px -12px rgb(23 23 23 / 0.08);\n --palette-neutral-900: #171717;\n --palette-zinc-800: #27272a;\n --palette-neutral-600: #525252;\n --palette-gray-100: #f3f4f6;\n --palette-gray-200: #e5e7eb;\n --palette-neutral-400: #a1a1a1;\n --palette-primary: #176cd9;\n --palette-gray-500: #6a7282;\n --palette-neutral-700: #404040;\n --palette-black: #000000;\n --palette-white: #ffffff;\n --palette-light-gray: #d7d7d7;\n --palette-dark-gray: #aeaeae;\n --motion-duration-tw-animation-delay: 0s;\n --motion-ease-out: cubic-bezier(0,0,.2,1);\n --motion-default-transition-timing-function: cubic-bezier(.4,0,.2,1);\n --ink-heading: #000000;\n --ink-display: #000000;\n --primary-hover: #1977ef;\n --inverse-surface: #000000;\n --inverse-foreground: #ffffff;\n --ink-eyebrow: #aeaeae;\n --cap-track: round;\n}\n\n/* vanilla · dark */\n.dark, [data-theme='dark'] {\n color-scheme: dark;\n --background: var(--color-neutral-950);\n --foreground: var(--color-neutral-50);\n --canvas: var(--color-neutral-950);\n --surface: var(--color-neutral-900);\n --surface-raised: var(--color-neutral-800);\n --surface-overlay: var(--color-neutral-800);\n --surface-sunken: var(--color-neutral-950);\n --card: var(--color-neutral-900);\n --card-foreground: var(--color-neutral-50);\n --popover: var(--color-neutral-900);\n --popover-foreground: var(--color-neutral-50);\n --primary: var(--color-signal-600);\n --primary-foreground: var(--color-neutral-0);\n --secondary: var(--color-neutral-800);\n --secondary-foreground: var(--color-neutral-50);\n --muted: var(--color-neutral-800);\n --muted-foreground: var(--color-neutral-400);\n --accent: var(--color-neutral-800);\n --accent-foreground: var(--color-neutral-50);\n --brand-muted: var(--color-signal-900);\n --brand-base: var(--color-signal-600);\n --brand-strong: var(--color-signal-600);\n --brand-contrast: var(--color-neutral-0);\n --interactive: var(--color-signal-400);\n --interactive-foreground: var(--color-neutral-950);\n --interactive-muted: var(--color-signal-900);\n --ring: var(--color-signal-400);\n --destructive: var(--color-ember-400);\n --destructive-foreground: var(--color-neutral-950);\n --destructive-muted: var(--color-ember-900);\n --destructive-solid: var(--color-ember-500);\n --destructive-solid-foreground: var(--color-neutral-950);\n --success: var(--color-moss-400);\n --success-foreground: var(--color-neutral-950);\n --success-muted: var(--color-moss-900);\n --success-solid: var(--color-moss-400);\n --success-solid-foreground: var(--color-neutral-950);\n --warning: var(--color-amber-500);\n --warning-foreground: var(--color-neutral-950);\n --warning-muted: var(--color-amber-900);\n --warning-solid: var(--color-amber-500);\n --warning-solid-foreground: var(--color-neutral-950);\n --info: var(--color-signal-400);\n --info-foreground: var(--color-neutral-950);\n --info-muted: var(--color-signal-900);\n --info-solid: var(--color-signal-400);\n --info-solid-foreground: var(--color-neutral-950);\n --border: var(--color-neutral-800);\n --input: var(--color-neutral-700);\n --divider: var(--color-neutral-800);\n --text-secondary: var(--color-neutral-300);\n --text-tertiary: var(--color-neutral-400);\n --prompt-bar: var(--color-neutral-50);\n --prompt-bar-foreground: var(--color-neutral-900);\n --prompt-bar-line: var(--color-neutral-300);\n --chart-1: #78adf9;\n --chart-2: #f9f9f9;\n --chart-3: #ababab;\n --chart-4: #2169cc;\n --chart-5: #8a8a8a;\n --sidebar: var(--color-neutral-900);\n --sidebar-foreground: var(--color-neutral-50);\n --sidebar-accent: var(--color-neutral-800);\n --sidebar-accent-foreground: var(--color-neutral-50);\n --sidebar-border: var(--color-neutral-800);\n --sidebar-ring: var(--color-signal-400);\n --ink-heading: #f9f9f9;\n --ink-display: #f9f9f9;\n --primary-hover: #2474e0;\n --inverse-surface: #f9f9f9;\n --inverse-foreground: #0a0a0a;\n}\n\n\n/* ── DENSITY — an axis of its own ─────────────────────────────────────────────\n * Touches only --sp-*, so it multiplies with brand and theme instead of\n * matrixing against them. The optical band (hairline, optical) is deliberately\n * absent from both blocks: those gaps answer to stroke weight, not to layout,\n * and scaling them is what makes a \"compact mode\" read as a blurry zoom. */\n[data-density='compact'] {\n --sp-inset-xs: 6px;\n --sp-inset-sm: 8px;\n --sp-inset-md: 10px;\n --sp-inset-lg: 12px;\n --sp-inset-xl: 12px;\n --sp-stack-xs: 14px;\n --sp-stack-sm: 16px;\n --sp-stack-md: 22px;\n --sp-stack-lg: 28px;\n --sp-region: 32px;\n --sp-section: 36px;\n --sp-section-lg: 52px;\n --sp-chapter: 62px;\n --sp-chapter-lg: 84px;\n --ctl-2xs: 22px;\n --ctl-xs: 24px;\n --ctl-sm: 28px;\n --ctl-md: 32px;\n --ctl-lg: 36px;\n --ctl-xl: 42px;\n}\n\n[data-density='relaxed'] {\n --sp-inset-2xs: 8px;\n --sp-inset-xs: 10px;\n --sp-inset-sm: 12px;\n --sp-inset-md: 16px;\n --sp-inset-lg: 18px;\n --sp-inset-xl: 20px;\n --sp-stack-xs: 26px;\n --sp-stack-sm: 32px;\n --sp-stack-md: 42px;\n --sp-stack-lg: 52px;\n --sp-region: 64px;\n --sp-section: 76px;\n --sp-section-lg: 108px;\n --sp-chapter: 128px;\n --sp-chapter-lg: 172px;\n --ctl-2xs: 28px;\n --ctl-xs: 32px;\n --ctl-sm: 36px;\n --ctl-md: 42px;\n --ctl-lg: 46px;\n --ctl-xl: 56px;\n}\n\n[data-deck] {\n --sp-hairline: 4px;\n --sp-optical: 8px;\n --sp-inset-2xs: 12px;\n --sp-inset-xs: 16px;\n --sp-inset-sm: 20px;\n --sp-inset-md: 24px;\n --sp-inset-lg: 24px;\n --sp-inset-xl: 32px;\n --sp-stack-xs: 15px;\n --sp-stack-sm: 18px;\n --sp-stack-md: 24px;\n --sp-stack-lg: 40px;\n --sp-region: 96px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 192px;\n --sp-chapter-lg: 256px;\n --text-display: 160px;\n --text-display--line-height: 0.98;\n --text-display--letter-spacing: -0.032em;\n --text-display--font-weight: 700;\n --text-h1: 111.38px;\n --text-h1--line-height: 1.02;\n --text-h1--letter-spacing: -0.0242em;\n --text-h1--font-weight: 700;\n --text-h2: 74.25px;\n --text-h2--line-height: 1.08;\n --text-h2--letter-spacing: -0.0155em;\n --text-h2--font-weight: 700;\n --text-h3: 49.5px;\n --text-h3--line-height: 1.15;\n --text-h3--letter-spacing: -0.0068em;\n --text-h3--font-weight: 600;\n --text-body: 36px;\n --text-body--line-height: 1.35;\n --text-body--letter-spacing: -0.005em;\n --text-body--font-weight: 400;\n --text-caption: 24px;\n --text-caption--line-height: 1.4;\n --text-caption--letter-spacing: 0em;\n --text-caption--font-weight: 400;\n --deck-frame-width: 1920px;\n --deck-frame-height: 1080px;\n --deck-frame-aspect: 1.7778;\n --deck-frame-aspect-pct: 56.25%;\n --deck-frame-pad: 8.3333cqw;\n --deck-frame-gutter: 1.25cqw;\n --deck-gap-2xl: 8.3333cqw;\n --deck-gap-xl: 5.5cqw;\n --deck-gap-lg: 3.6667cqw;\n --deck-gap-md: 2.5cqw;\n --deck-gap-sm: 1.6667cqw;\n --deck-gap-xs: 1.0833cqw;\n}\n\n[data-deck][data-deck-envelope='studio'] {\n --sp-hairline: 4px;\n --sp-optical: 8px;\n --sp-inset-2xs: 12px;\n --sp-inset-xs: 16px;\n --sp-inset-sm: 20px;\n --sp-inset-md: 24px;\n --sp-inset-lg: 24px;\n --sp-inset-xl: 32px;\n --sp-stack-xs: 15px;\n --sp-stack-sm: 18px;\n --sp-stack-md: 24px;\n --sp-stack-lg: 40px;\n --sp-region: 96px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 192px;\n --sp-chapter-lg: 256px;\n}\n\n[data-deck][data-deck-envelope='brief'] {\n --sp-hairline: 4px;\n --sp-optical: 8px;\n --sp-inset-2xs: 6px;\n --sp-inset-xs: 13px;\n --sp-inset-sm: 16px;\n --sp-inset-md: 19px;\n --sp-inset-lg: 12px;\n --sp-inset-xl: 12px;\n --sp-stack-xs: 28px;\n --sp-stack-sm: 16px;\n --sp-stack-md: 45px;\n --sp-stack-lg: 56px;\n --sp-region: 32px;\n --sp-section: 73px;\n --sp-section-lg: 104px;\n --sp-chapter: 125px;\n --sp-chapter-lg: 84px;\n}\n" } ], "meta": { "substrate": { "version": "1.0.0", "tokens": 461 } } }