{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-design-system", "type": "registry:base", "title": "Throughline 1.3.6", "description": "Throughline design tokens, locked by Substrate (version 1.3.6): colour roles in light and dark, type, spacing, radius and motion. Import substrate.css after Tailwind for the utilities and registers.", "config": { "style": "throughline-design-system", "iconLibrary": "lucide", "tailwind": { "baseColor": "neutral" } }, "cssVars": { "theme": { "font-sans": "Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif", "font-display": "'PP Pangaia', 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif", "font-mono": "initial", "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": "#FCF7FF", "color-signal-100": "#F8EDFF", "color-signal-200": "#F1D9FF", "color-signal-300": "#E6BAFF", "color-signal-400": "#CC8DEE", "color-signal-500": "#B061D8", "color-signal-600": "#8E48B1", "color-signal-700": "#6B3487", "color-signal-800": "#4B225F", "color-signal-900": "#2C113A", "color-signal-950": "#12021B", "color-ember-50": "#FEF8F8", "color-ember-100": "#FDEDEF", "color-ember-200": "#FBDADD", "color-ember-300": "#F8BCC2", "color-ember-400": "#F38594", "color-ember-500": "#E24D6C", "color-ember-600": "#B93553", "color-ember-700": "#8D243D", "color-ember-800": "#641628", "color-ember-900": "#3D0915", "color-ember-950": "#1A0205", "color-moss-50": "#F3FDF2", "color-moss-100": "#E4F9E1", "color-moss-200": "#C9F0C4", "color-moss-300": "#A4E19C", "color-moss-400": "#70C267", "color-moss-500": "#36A42C", "color-moss-600": "#238319", "color-moss-700": "#186211", "color-moss-800": "#0E4408", "color-moss-900": "#052803", "color-moss-950": "#010E01", "color-amber-50": "#FCFAEC", "color-amber-100": "#F7F3D6", "color-amber-200": "#EDE5AE", "color-amber-300": "#DDD077", "color-amber-400": "#BEAD34", "color-amber-500": "#998B28", "color-amber-600": "#796E1E", "color-amber-700": "#5B5214", "color-amber-800": "#3E380B", "color-amber-900": "#242004", "color-amber-950": "#0D0A01", "text-display": "96px", "text-display--line-height": "0.95", "text-display--letter-spacing": "-0.03em", "text-display--font-weight": "400", "text-h1": "75px", "text-h1--line-height": "1", "text-h1--letter-spacing": "-0.03em", "text-h1--font-weight": "400", "text-h2": "64px", "text-h2--line-height": "0.95", "text-h2--letter-spacing": "-0.03em", "text-h2--font-weight": "400", "text-h3": "48px", "text-h3--line-height": "1.1", "text-h3--letter-spacing": "0em", "text-h3--font-weight": "400", "text-lead": "20px", "text-lead--line-height": "1.3", "text-lead--letter-spacing": "-0.004em", "text-lead--font-weight": "500", "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.3", "text-small--letter-spacing": "0em", "text-small--font-weight": "500", "text-caption": "12.22px", "text-caption--line-height": "1.45", "text-caption--letter-spacing": "0.0353em", "text-caption--font-weight": "400", "text-micro": "14px", "text-micro--line-height": "1.3", "text-micro--letter-spacing": "0.08em", "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-base-color-lumen": "var(--palette-base-color-lumen)", "color-palette-text-color-text-secondary": "var(--palette-text-color-text-secondary)", "color-palette-text-color-text-primary": "var(--palette-text-color-text-primary)", "color-palette-border-color-border-secondary": "var(--palette-border-color-border-secondary)", "color-palette-base-color-lumen-dark": "var(--palette-base-color-lumen-dark)", "color-palette-background-color-background-primary": "var(--palette-background-color-background-primary)", "color-palette-background-color-background-secondary": "var(--palette-background-color-background-secondary)", "color-palette-background-color-background-tertiary": "var(--palette-background-color-background-tertiary)", "color-palette-base-color-fathom": "var(--palette-base-color-fathom)", "color-palette-base-color-glow": "var(--palette-base-color-glow)", "color-palette-base-color-vast": "var(--palette-base-color-vast)", "color-palette-base-color-dawn": "var(--palette-base-color-dawn)", "color-palette-background-color-background-alternate": "var(--palette-background-color-background-alternate)", "color-palette-base-color-white": "var(--palette-base-color-white)", "color-palette-base-color-flare": "var(--palette-base-color-flare)", "color-palette-text-color-text-tertiary": "var(--palette-text-color-text-tertiary)", "color-palette-base-color-pulse": "var(--palette-base-color-pulse)", "color-palette-base-color-system-success-green": "var(--palette-base-color-system-success-green)", "color-palette-base-color-signal": "var(--palette-base-color-signal)", "color-palette-base-color-system-error-red": "var(--palette-base-color-system-error-red)", "color-palette-text-color-text-alternate": "var(--palette-text-color-text-alternate)", "color-palette-background-color-background-success": "var(--palette-background-color-background-success)", "color-palette-base-color-system-error-red-dark": "var(--palette-base-color-system-error-red-dark)", "color-palette-base-color-neutral-neutral": "var(--palette-base-color-neutral-neutral)", "color-palette-text-color-text-success": "var(--palette-text-color-text-success)", "color-palette-base-color-neutral-white": "var(--palette-base-color-neutral-white)", "color-palette-base-color-system-warning-yellow": "var(--palette-base-color-system-warning-yellow)", "color-palette-link-color-link-primary": "var(--palette-link-color-link-primary)", "color-palette-base-color-neutral-neutral-darkest": "var(--palette-base-color-neutral-neutral-darkest)", "color-palette-background-color-background-error": "var(--palette-background-color-background-error)", "color-palette-text-color-text-error": "var(--palette-text-color-text-error)", "color-palette-background-color-background-warning": "var(--palette-background-color-background-warning)", "color-palette-text-color-text-warning": "var(--palette-text-color-text-warning)", "color-palette-base-color-neutral-neutral-lighter": "var(--palette-base-color-neutral-neutral-lighter)", "color-palette-base-color-neutral-neutral-darker": "var(--palette-base-color-neutral-neutral-darker)", "color-palette-base-color-system-success-green-dark": "var(--palette-base-color-system-success-green-dark)", "color-palette-base-color-system-warning-yellow-dark": "var(--palette-base-color-system-warning-yellow-dark)", "color-palette-base-color-sun": "var(--palette-base-color-sun)", "color-palette-base-color-peach": "var(--palette-base-color-peach)", "color-palette-base-color-marker": "var(--palette-base-color-marker)", "color-ink-heading": "var(--ink-heading)", "color-ink-display": "var(--ink-display)", "color-ink-eyebrow": "var(--ink-eyebrow)", "color-inverse-surface": "var(--inverse-surface)", "color-inverse-foreground": "var(--inverse-foreground)", "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)", "radius-card-small": "var(--r-card-small)", "radius-avatar": "var(--r-avatar)", "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": "#f7f5ee", "foreground": "#1a1a1a", "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": "#ede7dd", "card-foreground": "#1a1a1a", "popover": "#ffffff", "popover-foreground": "var(--color-neutral-900)", "primary": "#f0d7ff", "primary-foreground": "#1a1a1a", "secondary": "#f7f5ee", "secondary-foreground": "#1a1a1a", "muted": "#e4e4d0", "muted-foreground": "#5f5f59", "accent": "#f0d7ff", "accent-foreground": "#1a1a1a", "brand-muted": "var(--color-signal-100)", "brand-base": "#075148", "brand-strong": "#075148", "brand-emphasis": "var(--color-signal-700)", "brand-contrast": "#ffffeb", "interactive": "#1a1a1a", "interactive-foreground": "#ffffeb", "interactive-muted": "var(--color-signal-100)", "ring": "#1a1a1a", "destructive": "#7f1c34", "destructive-foreground": "#ffffff", "destructive-muted": "#f8e4e4", "destructive-solid": "var(--color-ember-600)", "destructive-solid-foreground": "var(--color-neutral-0)", "success": "#114e0b", "success-foreground": "#ffffff", "success-muted": "#cef5ca", "success-solid": "var(--color-moss-600)", "success-solid-foreground": "var(--color-neutral-0)", "warning": "#5e5515", "warning-foreground": "#ffffff", "warning-muted": "#fcf8d8", "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": "#d1d1c1", "input": "#d1d1c1", "divider": "#d1d1c1", "text-secondary": "#5f5f59", "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": "var(--color-signal-500)", "chart-2": "var(--color-ember-500)", "chart-3": "var(--color-moss-500)", "chart-4": "var(--color-amber-500)", "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": "32px", "sp-inset-xl": "37px", "sp-stack-xs": "20px", "sp-stack-sm": "24px", "sp-stack-md": "32px", "sp-stack-lg": "48px", "sp-region": "80px", "sp-section": "100px", "sp-section-lg": "100px", "sp-chapter": "128px", "sp-chapter-lg": "128px", "ms-xs": "34ch", "ms-sm": "48ch", "ms-md": "62ch", "ms-lg": "72ch", "lay-narrow": "48rem", "lay-page": "1240px", "lay-wide": "80rem", "lay-gutter": "40px", "ctl-2xs": "24px", "ctl-xs": "28px", "ctl-sm": "32px", "ctl-md": "44px", "ctl-lg": "52px", "ctl-xl": "62px", "stroke-hairline": "1px", "r-sm": "6px", "r-md": "8px", "r-lg": "10px", "r-xl": "14px", "r-2xl": "18px", "r-controls": "8px", "r-containers": "32px", "r-inline": "12px", "r-chip": "9999px", "r-track": "9999px", "r-card-small": "12px", "r-avatar": "0px", "corner-controls": "superellipse(1)", "corner-containers": "superellipse(1)", "corner-inline": "superellipse(1)", "sh-xs": "none", "sh-sm": "none", "sh-md": "none", "sh-lg": "none", "sh-xl": "none", "palette-base-color-lumen": "#ffffeb", "palette-text-color-text-secondary": "#ffffeb", "palette-text-color-text-primary": "#1a1a1a", "palette-border-color-border-secondary": "#1a1a1a", "palette-base-color-lumen-dark": "#e4e4d0", "palette-background-color-background-primary": "#f7f5ee", "palette-background-color-background-secondary": "#f0d7ff", "palette-background-color-background-tertiary": "#1a1a1a", "palette-base-color-fathom": "#075148", "palette-base-color-glow": "#ffa946", "palette-base-color-vast": "#1a1a1a", "palette-base-color-dawn": "#f0d7ff", "palette-background-color-background-alternate": "#ffffff", "palette-base-color-white": "#ffffff", "palette-base-color-flare": "#ff6c4c", "palette-text-color-text-tertiary": "#f0d7ff", "palette-base-color-pulse": "#7f1c34", "palette-base-color-system-success-green": "#cef5ca", "palette-base-color-signal": "#ffbcf2", "palette-base-color-system-error-red": "#f8e4e4", "palette-text-color-text-alternate": "#ffffff", "palette-background-color-background-success": "#cef5ca", "palette-base-color-system-error-red-dark": "#7f1c34", "palette-base-color-neutral-neutral": "#666666", "palette-text-color-text-success": "#114e0b", "palette-base-color-neutral-white": "#ffffff", "palette-base-color-system-warning-yellow": "#fcf8d8", "palette-link-color-link-primary": "#f0d7ff", "palette-base-color-neutral-neutral-darkest": "#111111", "palette-background-color-background-error": "#f8e4e4", "palette-text-color-text-error": "#7f1c34", "palette-background-color-background-warning": "#fcf8d8", "palette-text-color-text-warning": "#5e5515", "palette-base-color-neutral-neutral-lighter": "#cccccc", "palette-base-color-neutral-neutral-darker": "#222222", "palette-base-color-system-success-green-dark": "#114e0b", "palette-base-color-system-warning-yellow-dark": "#5e5515", "palette-base-color-sun": "#ffd84a", "palette-base-color-peach": "#ffd7bc", "palette-base-color-marker": "#ffd727", "motion-duration-canvas-instant": "240ms", "motion-duration-canvas-quick": "400ms", "motion-duration-canvas-standard": "640ms", "motion-duration-canvas-considered": "1040ms", "motion-duration-canvas-camera": "1400ms", "weight-regular": "400", "weight-medium": "500", "weight-semibold": "600", "weight-bold": "700", "ink-heading": "#1a1a1a", "ink-display": "#1a1a1a", "ink-eyebrow": "#5f5f59", "inverse-surface": "#1a1a1a", "inverse-foreground": "#ffffeb", "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": "var(--color-signal-400)", "chart-2": "var(--color-ember-400)", "chart-3": "var(--color-moss-400)", "chart-4": "var(--color-amber-400)", "chart-5": "var(--color-neutral-400)", "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": "#B8B8B8", "ink-display": "#B8B8B8", "ink-eyebrow": "#85857F", "inverse-surface": "#B8B8B8", "inverse-foreground": "#0a0a0a" } }, "files": [ { "path": "registry/throughline-design-system/substrate.css", "type": "registry:file", "target": "substrate.css", "content": "/* PP Pangaia: free stand-in, https://pangrampangram.com/products/pangaia */\n@font-face { font-family: 'PP Pangaia'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/PPPangaia-Medium.otf') format('opentype'); }\n@font-face { font-family: 'PP Pangaia'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/fonts/PPPangaia-MediumItalic.otf') format('opentype'); }\n@font-face { font-family: 'PP Pangaia'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/PPPangaia-Bold.otf') format('opentype'); }\n@font-face { font-family: 'PP Pangaia'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/PPPangaia-BoldItalic.otf') format('opentype'); }\n/* Figtree: free stand-in, https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap */\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }\n@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }\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: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n --font-display: 'PP Pangaia', 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif;\n --font-mono: initial;\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: #FCF7FF;\n --color-signal-100: #F8EDFF;\n --color-signal-200: #F1D9FF;\n --color-signal-300: #E6BAFF;\n --color-signal-400: #CC8DEE;\n --color-signal-500: #B061D8;\n --color-signal-600: #8E48B1;\n --color-signal-700: #6B3487;\n --color-signal-800: #4B225F;\n --color-signal-900: #2C113A;\n --color-signal-950: #12021B;\n\n --color-ember-50: #FEF8F8;\n --color-ember-100: #FDEDEF;\n --color-ember-200: #FBDADD;\n --color-ember-300: #F8BCC2;\n --color-ember-400: #F38594;\n --color-ember-500: #E24D6C;\n --color-ember-600: #B93553;\n --color-ember-700: #8D243D;\n --color-ember-800: #641628;\n --color-ember-900: #3D0915;\n --color-ember-950: #1A0205;\n\n --color-moss-50: #F3FDF2;\n --color-moss-100: #E4F9E1;\n --color-moss-200: #C9F0C4;\n --color-moss-300: #A4E19C;\n --color-moss-400: #70C267;\n --color-moss-500: #36A42C;\n --color-moss-600: #238319;\n --color-moss-700: #186211;\n --color-moss-800: #0E4408;\n --color-moss-900: #052803;\n --color-moss-950: #010E01;\n\n --color-amber-50: #FCFAEC;\n --color-amber-100: #F7F3D6;\n --color-amber-200: #EDE5AE;\n --color-amber-300: #DDD077;\n --color-amber-400: #BEAD34;\n --color-amber-500: #998B28;\n --color-amber-600: #796E1E;\n --color-amber-700: #5B5214;\n --color-amber-800: #3E380B;\n --color-amber-900: #242004;\n --color-amber-950: #0D0A01;\n\n --text-display: 96px;\n --text-display--line-height: 0.95;\n --text-display--letter-spacing: -0.03em;\n --text-display--font-weight: 400;\n --text-h1: 75px;\n --text-h1--line-height: 1;\n --text-h1--letter-spacing: -0.03em;\n --text-h1--font-weight: 400;\n --text-h2: 64px;\n --text-h2--line-height: 0.95;\n --text-h2--letter-spacing: -0.03em;\n --text-h2--font-weight: 400;\n --text-h3: 48px;\n --text-h3--line-height: 1.1;\n --text-h3--letter-spacing: 0em;\n --text-h3--font-weight: 400;\n --text-lead: 20px;\n --text-lead--line-height: 1.3;\n --text-lead--letter-spacing: -0.004em;\n --text-lead--font-weight: 500;\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.3;\n --text-small--letter-spacing: 0em;\n --text-small--font-weight: 500;\n --text-caption: 12.22px;\n --text-caption--line-height: 1.45;\n --text-caption--letter-spacing: 0.0353em;\n --text-caption--font-weight: 400;\n --text-micro: 14px;\n --text-micro--line-height: 1.3;\n --text-micro--letter-spacing: 0.08em;\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-base-color-lumen: var(--palette-base-color-lumen);\n --color-palette-text-color-text-secondary: var(--palette-text-color-text-secondary);\n --color-palette-text-color-text-primary: var(--palette-text-color-text-primary);\n --color-palette-border-color-border-secondary: var(--palette-border-color-border-secondary);\n --color-palette-base-color-lumen-dark: var(--palette-base-color-lumen-dark);\n --color-palette-background-color-background-primary: var(--palette-background-color-background-primary);\n --color-palette-background-color-background-secondary: var(--palette-background-color-background-secondary);\n --color-palette-background-color-background-tertiary: var(--palette-background-color-background-tertiary);\n --color-palette-base-color-fathom: var(--palette-base-color-fathom);\n --color-palette-base-color-glow: var(--palette-base-color-glow);\n --color-palette-base-color-vast: var(--palette-base-color-vast);\n --color-palette-base-color-dawn: var(--palette-base-color-dawn);\n --color-palette-background-color-background-alternate: var(--palette-background-color-background-alternate);\n --color-palette-base-color-white: var(--palette-base-color-white);\n --color-palette-base-color-flare: var(--palette-base-color-flare);\n --color-palette-text-color-text-tertiary: var(--palette-text-color-text-tertiary);\n --color-palette-base-color-pulse: var(--palette-base-color-pulse);\n --color-palette-base-color-system-success-green: var(--palette-base-color-system-success-green);\n --color-palette-base-color-signal: var(--palette-base-color-signal);\n --color-palette-base-color-system-error-red: var(--palette-base-color-system-error-red);\n --color-palette-text-color-text-alternate: var(--palette-text-color-text-alternate);\n --color-palette-background-color-background-success: var(--palette-background-color-background-success);\n --color-palette-base-color-system-error-red-dark: var(--palette-base-color-system-error-red-dark);\n --color-palette-base-color-neutral-neutral: var(--palette-base-color-neutral-neutral);\n --color-palette-text-color-text-success: var(--palette-text-color-text-success);\n --color-palette-base-color-neutral-white: var(--palette-base-color-neutral-white);\n --color-palette-base-color-system-warning-yellow: var(--palette-base-color-system-warning-yellow);\n --color-palette-link-color-link-primary: var(--palette-link-color-link-primary);\n --color-palette-base-color-neutral-neutral-darkest: var(--palette-base-color-neutral-neutral-darkest);\n --color-palette-background-color-background-error: var(--palette-background-color-background-error);\n --color-palette-text-color-text-error: var(--palette-text-color-text-error);\n --color-palette-background-color-background-warning: var(--palette-background-color-background-warning);\n --color-palette-text-color-text-warning: var(--palette-text-color-text-warning);\n --color-palette-base-color-neutral-neutral-lighter: var(--palette-base-color-neutral-neutral-lighter);\n --color-palette-base-color-neutral-neutral-darker: var(--palette-base-color-neutral-neutral-darker);\n --color-palette-base-color-system-success-green-dark: var(--palette-base-color-system-success-green-dark);\n --color-palette-base-color-system-warning-yellow-dark: var(--palette-base-color-system-warning-yellow-dark);\n --color-palette-base-color-sun: var(--palette-base-color-sun);\n --color-palette-base-color-peach: var(--palette-base-color-peach);\n --color-palette-base-color-marker: var(--palette-base-color-marker);\n --color-ink-heading: var(--ink-heading);\n --color-ink-display: var(--ink-display);\n --color-ink-eyebrow: var(--ink-eyebrow);\n --color-inverse-surface: var(--inverse-surface);\n --color-inverse-foreground: var(--inverse-foreground);\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 --radius-card-small: var(--r-card-small);\n --radius-avatar: var(--r-avatar);\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: #f7f5ee;\n --foreground: #1a1a1a;\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: #ede7dd;\n --card-foreground: #1a1a1a;\n --popover: #ffffff;\n --popover-foreground: var(--color-neutral-900);\n --primary: #f0d7ff;\n --primary-foreground: #1a1a1a;\n --secondary: #f7f5ee;\n --secondary-foreground: #1a1a1a;\n --muted: #e4e4d0;\n --muted-foreground: #5f5f59;\n --accent: #f0d7ff;\n --accent-foreground: #1a1a1a;\n --brand-muted: var(--color-signal-100);\n --brand-base: #075148;\n --brand-strong: #075148;\n --brand-emphasis: var(--color-signal-700);\n --brand-contrast: #ffffeb;\n --interactive: #1a1a1a;\n --interactive-foreground: #ffffeb;\n --interactive-muted: var(--color-signal-100);\n --ring: #1a1a1a;\n --destructive: #7f1c34;\n --destructive-foreground: #ffffff;\n --destructive-muted: #f8e4e4;\n --destructive-solid: var(--color-ember-600);\n --destructive-solid-foreground: var(--color-neutral-0);\n --success: #114e0b;\n --success-foreground: #ffffff;\n --success-muted: #cef5ca;\n --success-solid: var(--color-moss-600);\n --success-solid-foreground: var(--color-neutral-0);\n --warning: #5e5515;\n --warning-foreground: #ffffff;\n --warning-muted: #fcf8d8;\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: #d1d1c1;\n --input: #d1d1c1;\n --divider: #d1d1c1;\n --text-secondary: #5f5f59;\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: var(--color-signal-500);\n --chart-2: var(--color-ember-500);\n --chart-3: var(--color-moss-500);\n --chart-4: var(--color-amber-500);\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: 32px;\n --sp-inset-xl: 37px;\n --sp-stack-xs: 20px;\n --sp-stack-sm: 24px;\n --sp-stack-md: 32px;\n --sp-stack-lg: 48px;\n --sp-region: 80px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 128px;\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: 1240px;\n --lay-wide: 80rem;\n --lay-gutter: 40px;\n --ctl-2xs: 24px;\n --ctl-xs: 28px;\n --ctl-sm: 32px;\n --ctl-md: 44px;\n --ctl-lg: 52px;\n --ctl-xl: 62px;\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: 32px;\n --r-inline: 12px;\n --r-chip: 9999px;\n --r-track: 9999px;\n --r-card-small: 12px;\n --r-avatar: 0px;\n --corner-controls: superellipse(1);\n --corner-containers: superellipse(1);\n --corner-inline: superellipse(1);\n --sh-xs: none;\n --sh-sm: none;\n --sh-md: none;\n --sh-lg: none;\n --sh-xl: none;\n --palette-base-color-lumen: #ffffeb;\n --palette-text-color-text-secondary: #ffffeb;\n --palette-text-color-text-primary: #1a1a1a;\n --palette-border-color-border-secondary: #1a1a1a;\n --palette-base-color-lumen-dark: #e4e4d0;\n --palette-background-color-background-primary: #f7f5ee;\n --palette-background-color-background-secondary: #f0d7ff;\n --palette-background-color-background-tertiary: #1a1a1a;\n --palette-base-color-fathom: #075148;\n --palette-base-color-glow: #ffa946;\n --palette-base-color-vast: #1a1a1a;\n --palette-base-color-dawn: #f0d7ff;\n --palette-background-color-background-alternate: #ffffff;\n --palette-base-color-white: #ffffff;\n --palette-base-color-flare: #ff6c4c;\n --palette-text-color-text-tertiary: #f0d7ff;\n --palette-base-color-pulse: #7f1c34;\n --palette-base-color-system-success-green: #cef5ca;\n --palette-base-color-signal: #ffbcf2;\n --palette-base-color-system-error-red: #f8e4e4;\n --palette-text-color-text-alternate: #ffffff;\n --palette-background-color-background-success: #cef5ca;\n --palette-base-color-system-error-red-dark: #7f1c34;\n --palette-base-color-neutral-neutral: #666666;\n --palette-text-color-text-success: #114e0b;\n --palette-base-color-neutral-white: #ffffff;\n --palette-base-color-system-warning-yellow: #fcf8d8;\n --palette-link-color-link-primary: #f0d7ff;\n --palette-base-color-neutral-neutral-darkest: #111111;\n --palette-background-color-background-error: #f8e4e4;\n --palette-text-color-text-error: #7f1c34;\n --palette-background-color-background-warning: #fcf8d8;\n --palette-text-color-text-warning: #5e5515;\n --palette-base-color-neutral-neutral-lighter: #cccccc;\n --palette-base-color-neutral-neutral-darker: #222222;\n --palette-base-color-system-success-green-dark: #114e0b;\n --palette-base-color-system-warning-yellow-dark: #5e5515;\n --palette-base-color-sun: #ffd84a;\n --palette-base-color-peach: #ffd7bc;\n --palette-base-color-marker: #ffd727;\n --motion-duration-canvas-instant: 240ms;\n --motion-duration-canvas-quick: 400ms;\n --motion-duration-canvas-standard: 640ms;\n --motion-duration-canvas-considered: 1040ms;\n --motion-duration-canvas-camera: 1400ms;\n --weight-regular: 400;\n --weight-medium: 500;\n --weight-semibold: 600;\n --weight-bold: 700;\n --ink-heading: #1a1a1a;\n --ink-display: #1a1a1a;\n --ink-eyebrow: #5f5f59;\n --inverse-surface: #1a1a1a;\n --inverse-foreground: #ffffeb;\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: var(--color-signal-400);\n --chart-2: var(--color-ember-400);\n --chart-3: var(--color-moss-400);\n --chart-4: var(--color-amber-400);\n --chart-5: var(--color-neutral-400);\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: #B8B8B8;\n --ink-display: #B8B8B8;\n --ink-eyebrow: #85857F;\n --inverse-surface: #B8B8B8;\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: 39px;\n --ctl-lg: 47px;\n --ctl-xl: 54px;\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-lg: 172px;\n --ctl-2xs: 28px;\n --ctl-xs: 32px;\n --ctl-sm: 36px;\n --ctl-md: 51px;\n --ctl-lg: 60px;\n --ctl-xl: 72px;\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: 32px;\n --sp-inset-xl: 32px;\n --sp-stack-xs: 20px;\n --sp-stack-sm: 24px;\n --sp-stack-md: 32px;\n --sp-stack-lg: 48px;\n --sp-region: 80px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 128px;\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: 400;\n --text-h1: 111.38px;\n --text-h1--line-height: 1.02;\n --text-h1--letter-spacing: -0.0242em;\n --text-h1--font-weight: 400;\n --text-h2: 74.25px;\n --text-h2--line-height: 1.08;\n --text-h2--letter-spacing: -0.0155em;\n --text-h2--font-weight: 400;\n --text-h3: 49.5px;\n --text-h3--line-height: 1.15;\n --text-h3--letter-spacing: -0.0068em;\n --text-h3--font-weight: 400;\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: 32px;\n --sp-inset-xl: 32px;\n --sp-stack-xs: 20px;\n --sp-stack-sm: 24px;\n --sp-stack-md: 32px;\n --sp-stack-lg: 48px;\n --sp-region: 80px;\n --sp-section: 100px;\n --sp-section-lg: 100px;\n --sp-chapter: 128px;\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.3.6", "tokens": 523 } } }