/* ============================================================ THEME — Consolidated (css-is-awesome) ----------------------------------------------------------- GENERATED FILE — do not edit by hand. Source: scss/themes/*.scss -> public/themes//theme.css Rebuild: npm run build:css:themes One stylesheet carrying every theme. Switch with the data-theme attribute: To ship a SINGLE theme instead, use that theme's standalone file (public/themes//theme.css). Those emit a bare :root as well, so dropping one in as theme.css restyles the page with no markup change at all. 24 themes: boilerplate, boilerplate-dark, boilerplate-light, cupertino, cupertino-dark, cupertino-light, glass, glass-dark, glass-light, graphite, graphite-dark, graphite-light, press, press-dark, press-light, prism, prism-dark, prism-light, sketchbook, sketchbook-dark, sketchbook-light, terminal, terminal-dark, terminal-light ============================================================ */ @import 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@400;500;600;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Caveat:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap'; :root[data-theme=boilerplate] { color-scheme: light dark; /* Surfaces */ --paper: light-dark(#fff, #0f172a); --paper-raised: light-dark(#f2f2f2, #1e293b); --paper-sunk: light-dark(#f8fafc, #020617); --paper-glass: light-dark(rgba(255, 255, 255, 0.85), rgba(15, 23, 42, 0.85)); /* Ink — slate neutral ramp */ --ink: light-dark(#0f172a, #f8fafc); --ink-soft: light-dark(#1e293b, #e2e8f0); --ink-faint: light-dark(#475569, #94a3b8); --graphite: light-dark(#0f172a, #f1f5f9); --muted: light-dark(#718299, #64748b); /* Lines */ --guide: light-dark(#cbd5e1, #334155); --guide-soft: light-dark(#e2e8f0, #1e293b); --hair: light-dark(#e2e8f0, #1e293b); --hair-soft: light-dark(#f1f5f9, #0f172a); /* Primary accent */ --ai: light-dark(#2563eb, #3d85f9); --ai-ink: light-dark(#1d4ed8, #60a5fa); --ai-wash: light-dark(#eff6ff, #1e3a8a); /* Seal — red */ --shu: light-dark(#dc2626, #ef4444); --shu-wash: light-dark(#fef2f2, #450a0a); /* Tertiary — amber */ --ochre: light-dark(#d97706, #f59e0b); --ochre-wash: light-dark(#fffbeb, #422006); /* Code surface */ --code-bg: light-dark(#f8fafc, #020617); --code-ink: light-dark(#0f172a, #e2e8f0); --code-muted: light-dark(#5E6D83, #6F8098); --code-accent: light-dark(#c0400b, #fb923c); --code-green: light-dark(#147C3B, #4ade80); --code-blue: light-dark(#2361ea, #60a5fa); /* Typography — system stacks, no @import, identical */ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Radius — identical */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — subtle, neutral slate / heavier on dark */ --shadow-sm: 0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30)); --shadow-md: 0 1px 3px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40)), 0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30)); --shadow-lg: 0 4px 12px -2px light-dark(rgba(15, 23, 42, 0.08), rgba(0, 0, 0, 0.55)), 0 2px 4px -2px light-dark(rgba(15, 23, 42, 0.05), rgba(0, 0, 0, 0.30)); --shadow-xl: 0 12px 24px -8px light-dark(rgba(15, 23, 42, 0.10), rgba(0, 0, 0, 0.65)), 0 4px 8px -4px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40)); --shadow-2xl: 0 24px 48px -12px light-dark(rgba(15, 23, 42, 0.15), rgba(0, 0, 0, 0.75)); /* Blur / glow — none */ --blur-sm: none; --blur-md: none; --blur-lg: none; --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — identical */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --ease: cubic-bezier(.4, 0, .2, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: light-dark(var(--paper), var(--paper-raised)); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: light-dark(var(--paper-sunk), var(--paper-raised)); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(15, 23, 42, 0.04), rgba(248, 250, 252, 0.05)); --interactive-active: light-dark(rgba(15, 23, 42, 0.08), rgba(248, 250, 252, 0.10)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: light-dark(#16a34a, #22c55e); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: light-dark(var(--ai-ink), #85BFFF); --success-default: light-dark(#16a34a, #22c55e); --success-subtle: light-dark(#f0fdf4, #14532d); --success-text: light-dark(#0e7c3a, #4ade80); --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: light-dark(#b15003, #fbbf24); --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: light-dark(#b91c1c, #fca5a5); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. --space-2xs is not here: space-scale() derives it from --space-unit like every other step, and a literal would override the calc() and pin this theme at 4px while the rest rescale. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#f2f6fe, #121e36); --page-hero-ink: light-dark(#0f172a, #f8fafc); --page-band-bg: light-dark(#f7fafe, #111b31); --page-band-ink: light-dark(#0f172a, #f8fafc); } :root[data-theme=boilerplate-dark] { color-scheme: dark; /* Surfaces — slate dark ramp */ --paper: #0f172a; --paper-raised: #1e293b; --paper-sunk: #020617; --paper-glass: rgba(15, 23, 42, 0.85); /* Ink — inverted slate */ --ink: #f8fafc; --ink-soft: #e2e8f0; --ink-faint: #94a3b8; --graphite: #f1f5f9; --muted: #718299; /* Lines — dark slate borders */ --guide: #334155; --guide-soft: #1e293b; --hair: #1e293b; --hair-soft: #0f172a; /* Primary accent — brighter blue for dark surfaces */ --ai: #3d85f9; --ai-ink: #60a5fa; --ai-wash: #1e3a8a; /* Seal — red */ --shu: #ef4444; --shu-wash: #450a0a; /* Tertiary — amber */ --ochre: #f59e0b; --ochre-wash: #422006; /* Code — neutral dark syntax surface */ --code-bg: #020617; --code-ink: #e2e8f0; --code-muted: #708198; --code-accent: #fb923c; --code-green: #4ade80; --code-blue: #60a5fa; /* Typography — system stacks only (no @import) */ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Radius */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — heavier on dark, neutral black */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow-md: 0 2px 4px rgba(0, 0, 0, .40); --shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, .55); --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, .65); --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, .75); /* Blur */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --ease: cubic-bezier(.4, 0, .2, 1); /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces (semantic) */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); /* Interactive overlays — light wash on dark */ --interactive-hover: rgba(248, 250, 252, 0.05); --interactive-active: rgba(248, 250, 252, 0.10); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: #22c55e; --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: #85BFFF; /* Status — success */ --success-default: #22c55e; --success-subtle: #14532d; --success-text: #4ade80; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #fbbf24; /* Status — error */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #fca5a5; /* Space scale */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #121e36; --page-hero-ink: #f8fafc; --page-band-bg: #111b31; --page-band-ink: #f8fafc; } :root[data-theme=boilerplate-light] { color-scheme: light; /* Surfaces — off-white paper, light gray sunk */ --paper: #fff; --paper-raised: #f2f2f2; --paper-sunk: #f8fafc; --paper-glass: rgba(255, 255, 255, 0.85); /* Ink — slate neutral ramp */ --ink: #0f172a; --ink-soft: #1e293b; --ink-faint: #475569; --graphite: #0f172a; --muted: #64748b; /* Lines — light slate borders */ --guide: #cbd5e1; --guide-soft: #e2e8f0; --hair: #e2e8f0; --hair-soft: #f1f5f9; /* Primary accent — clean, recognizable blue */ --ai: #2563eb; --ai-ink: #1d4ed8; --ai-wash: #eff6ff; /* Seal — red (used for error / secondary action) */ --shu: #dc2626; --shu-wash: #fef2f2; /* Tertiary — amber (used for warning) */ --ochre: #d97706; --ochre-wash: #fffbeb; /* Code — neutral light syntax surface */ --code-bg: #f8fafc; --code-ink: #0f172a; --code-muted: #5e6d84; --code-accent: #c04009; --code-green: #0e7c3a; --code-blue: #2461e9; /* Typography — system stacks only (no @import) */ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Radius — standard, unsurprising */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — subtle, neutral slate */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --shadow-lg: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05); --shadow-xl: 0 12px 24px -8px rgba(15, 23, 42, .10), 0 4px 8px -4px rgba(15, 23, 42, .06); --shadow-2xl: 0 24px 48px -12px rgba(15, 23, 42, .15); /* Blur — Boilerplate doesn't use frosted surfaces */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — Boilerplate doesn't use glow effects */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — moderate, not flashy */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --ease: cubic-bezier(.4, 0, .2, 1); /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper); /* Surfaces (semantic) */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-sunk); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); /* Interactive overlays */ --interactive-hover: rgba(15, 23, 42, 0.04); --interactive-active: rgba(15, 23, 42, 0.08); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: #16a34a; --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success */ --success-default: #16a34a; --success-subtle: #f0fdf4; --success-text: #0e7c3a; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #b15003; /* Status — error */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #b91c1c; /* Space scale */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #f2f6fe; --page-hero-ink: #0f172a; --page-band-bg: #f7fafe; --page-band-ink: #0f172a; } :root[data-theme=cupertino] { color-scheme: light dark; /* Surfaces — AppKit panels */ --paper: light-dark(#F5F5F7, #1E1E1E); --paper-raised: light-dark(#FFF, #2A2A2A); --paper-sunk: light-dark(#E9E9EC, #141414); --paper-glass: light-dark(rgba(255, 255, 255, 0.72), rgba(42, 42, 42, 0.72)); /* Ink — warm black / warm white, never pure */ --ink: light-dark(#1D1D1F, #F5F5F7); --ink-soft: light-dark(#3A3A3C, #C7C7CC); --ink-faint: light-dark(#66666B, #98989D); --graphite: light-dark(#2C2C2E, #AEAEB2); --muted: light-dark(#84858a, #6E6E73); /* Hairlines — solid in light, translucent white in dark */ --guide: light-dark(#D2D2D7, rgba(255, 255, 255, 0.16)); --guide-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.08)); --hair: light-dark(#D2D2D7, rgba(255, 255, 255, 0.12)); --hair-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.06)); /* Primary accent — Apple system blue (dark variant brighter) */ --ai: light-dark(#005EBB, #1e8eff); --ai-ink: light-dark(#0058B0, #409CFF); --ai-wash: light-dark(#E5F0FB, rgba(10, 132, 255, 0.16)); /* Seal — Apple system red */ --shu: light-dark(#f73229, #FF453A); --shu-wash: light-dark(#FFEAE8, rgba(255, 69, 58, 0.16)); /* Accent — Apple system orange */ --ochre: light-dark(#FF9F0A, #FF9F0A); --ochre-wash: light-dark(#FFF4E0, rgba(255, 159, 10, 0.16)); /* Code surface — Xcode dark in both modes (intentional editorial) */ --code-bg: light-dark(#1C1C1E, #0F0F0F); --code-ink: light-dark(#F2F2F7, #F2F2F7); --code-muted: #8E8E93; --code-accent: #FF9F0A; --code-green: #30D158; --code-blue: #64D2FF; /* Typography — SF system stack, identical */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace; /* Radius — AppKit corners, identical */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; /* Shadows — small, diffuse, lifted, deeper on dark */ --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30)), 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30)); --shadow-md: 0 4px 14px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.40)), 0 1px 3px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30)); --shadow-lg: 0 12px 40px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.50)), 0 2px 6px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.30)); --shadow-xl: 0 20px 50px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.60)), 0 4px 10px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.32)); --shadow-2xl: 0 28px 70px light-dark(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.72)), 0 6px 14px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36)); /* Blur — vibrancy signature, identical */ --blur-sm: blur(20px) saturate(180%); --blur-md: blur(30px) saturate(180%); --blur-lg: blur(40px) saturate(180%); /* Glow — Cupertino doesn't glow, it lifts */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — Apple-snappy, identical */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 320ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.06)); --interactive-active: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.10)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); --success-default: light-dark(var(--code-green), #30D158); --success-subtle: light-dark(rgba(48, 209, 88, 0.12), rgba(48, 209, 88, 0.16)); --success-text: light-dark(#0F6E22, #5FE37F); --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: light-dark(#985000, #FFB340); --error-default: var(--shu); --error-subtle: light-dark(rgba(255, 59, 48, 0.12), rgba(255, 69, 58, 0.16)); --error-text: light-dark(#A8281F, #FF6961); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Component overrides — AppKit identity */ --btn-radius: var(--r-md); --card-radius: var(--r-lg); --card-shadow: var(--shadow-sm); --input-radius: var(--r-sm); --modal-radius: var(--r-lg); --tooltip-radius: var(--r-sm); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#e6ecf3, #1e252c); --page-hero-ink: light-dark(#1d1d1f, #f5f5f7); --page-band-bg: light-dark(#ecf0f5, #1e2226); --page-band-ink: light-dark(#1d1d1f, #f5f5f7); } :root[data-theme=cupertino-dark] { color-scheme: dark; /* Surfaces — AppKit dark panels */ --paper: #1E1E1E; --paper-raised: #2A2A2A; --paper-sunk: #141414; --paper-glass: rgba(42, 42, 42, 0.72); /* Ink — warm white, never pure */ --ink: #F5F5F7; --ink-soft: #C7C7CC; --ink-faint: #98989D; --graphite: #AEAEB2; --muted: #84858a; /* Hairlines / guides — translucent white */ --guide: rgba(255, 255, 255, 0.16); --guide-soft: rgba(255, 255, 255, 0.08); --hair: rgba(255, 255, 255, 0.12); --hair-soft: rgba(255, 255, 255, 0.06); /* Primary accent — Apple system blue (dark variant) */ --ai: #1e8eff; --ai-ink: #409CFF; --ai-wash: rgba(10, 132, 255, 0.16); /* Seal — Apple system red (dark variant) */ --shu: #FF453A; --shu-wash: rgba(255, 69, 58, 0.16); /* Accent — Apple system orange (dark variant) */ --ochre: #FF9F0A; --ochre-wash: rgba(255, 159, 10, 0.16); /* Code surface — AppKit dark code panel */ --code-bg: #0F0F0F; --code-ink: #F2F2F7; --code-muted: #8E8E93; --code-accent: #FF9F0A; --code-green: #30D158; --code-blue: #64D2FF; /* Typography — match Cupertino (SF system stack) */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace; /* Radius — match Cupertino (AppKit corners) */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; /* Shadows — small, diffuse, lifted (deeper for dark) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 0.5px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.60), 0 4px 10px rgba(0, 0, 0, 0.32); --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.72), 0 6px 14px rgba(0, 0, 0, 0.36); /* Blur — vibrancy (Cupertino's signature, match light) */ --blur-sm: blur(20px) saturate(180%); --blur-md: blur(30px) saturate(180%); --blur-lg: blur(40px) saturate(180%); /* Glow — Cupertino doesn't glow, it lifts */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — Apple-snappy, match Cupertino */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 320ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive — translucent white on dark (macOS Dark convention) */ --interactive-hover: rgba(255, 255, 255, 0.06); --interactive-active: rgba(255, 255, 255, 0.10); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success (macOS dark green) */ --success-default: #30D158; --success-subtle: rgba(48, 209, 88, 0.16); --success-text: #5FE37F; /* Status — warning (macOS dark orange) */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #FFB340; /* Status — error (macOS dark red) */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #FF6961; /* ---------------------------------------------------------- LIBRARY SCALES ---------------------------------------------------------- */ /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES — match Cupertino ---------------------------------------------------------- */ --btn-radius: var(--r-md); /* 10px — AppKit control */ --card-radius: var(--r-lg); /* 14px — panel corner */ --card-shadow: var(--shadow-sm); /* diffuse, lifted */ --input-radius: var(--r-sm); /* 8px — text field */ --modal-radius: var(--r-lg); /* matches panel */ --tooltip-radius: var(--r-sm); /* bezel tooltip */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #1e252c; --page-hero-ink: #f5f5f7; --page-band-bg: #1e2226; --page-band-ink: #f5f5f7; } :root[data-theme=cupertino-light] { color-scheme: light; /* Surfaces — AppKit panels */ --paper: #F5F5F7; --paper-raised: #FFF; --paper-sunk: #E9E9EC; --paper-glass: rgba(255, 255, 255, 0.72); /* Ink — warm black, never pure */ --ink: #1D1D1F; --ink-soft: #3A3A3C; --ink-faint: #66666B; --graphite: #2C2C2E; --muted: #6E6E73; /* Hairlines / guides */ --guide: #D2D2D7; --guide-soft: #E5E5EA; --hair: #D2D2D7; --hair-soft: #E5E5EA; /* Primary accent — system blue */ --ai: #005EBB; --ai-ink: #0058B0; --ai-wash: #E5F0FB; /* Seal — system red */ --shu: #f73229; --shu-wash: #FFEAE8; /* Accent — system orange / amber */ --ochre: #FF9F0A; --ochre-wash: #FFF4E0; /* Code surface — native Xcode dark */ --code-bg: #1C1C1E; --code-ink: #F2F2F7; --code-muted: #8E8E93; --code-accent: #FF9F0A; --code-green: #30D158; --code-blue: #64D2FF; /* Typography — SF system stack */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', Consolas, monospace; /* Radius — AppKit corners */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; /* Shadows — small, diffuse, lifted */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04); /* Blur — vibrancy (Cupertino's signature) */ --blur-sm: blur(20px) saturate(180%); --blur-md: blur(30px) saturate(180%); --blur-lg: blur(40px) saturate(180%); /* Glow — Cupertino doesn't glow, it lifts */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — Apple-snappy */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 320ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — macOS faint ink overlay */ --interactive-hover: rgba(0, 0, 0, 0.04); --interactive-active: rgba(0, 0, 0, 0.08); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success (macOS system green) */ --success-default: var(--code-green); --success-subtle: rgba(48, 209, 88, 0.12); --success-text: #0F6E22; /* Status — warning (macOS system orange) */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #985000; /* Status — error (macOS system red) */ --error-default: var(--shu); --error-subtle: rgba(255, 59, 48, 0.12); --error-text: #A8281F; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Shadow — higher-elevation slots (AppKit floating surfaces) */ --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05); --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.20), 0 6px 14px rgba(0, 0, 0, 0.06); /* Typography — base body font + key scale slots (SF Pro stack) */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES (Feature 1.3) ----------------------------------------------------------- Cupertino expresses AppKit UI: softly rounded controls, diffuse card lift, larger panel radii. Overrides are intentionally sparse — pick the ones that carry the identity of the OS, leave the rest on library defaults. ---------------------------------------------------------- */ --btn-radius: var(--r-md); /* 10px — AppKit control */ --card-radius: var(--r-lg); /* 14px — panel corner */ --card-shadow: var(--shadow-sm); /* diffuse, lifted */ --input-radius: var(--r-sm); /* 8px — text field */ --modal-radius: var(--r-lg); /* matches panel */ --tooltip-radius: var(--r-sm); /* bezel tooltip */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #e6ecf3; --page-hero-ink: #1d1d1f; --page-band-bg: #ecf0f5; --page-band-ink: #1d1d1f; } :root[data-theme=glass] { color-scheme: light dark; /* Surfaces — frosted translucent / blue-black void */ --paper: light-dark(#F4EEFF, #0A0F1A); --paper-raised: light-dark(#FFF, #141E32); --paper-sunk: light-dark(#E8E0F5, #050810); --paper-glass: light-dark(rgba(255, 255, 255, 0.55), rgba(20, 30, 50, 0.60)); /* Ink — warm near-black / cool near-white */ --ink: light-dark(#1D1D1F, #F0F4FF); --ink-soft: light-dark(#3A3A3C, #C8CFE0); --ink-faint: light-dark(#65656A, #8A92A8); --graphite: light-dark(#2C2C2E, #DCE2F0); --muted: light-dark(#6E6E73, #727b93); /* Construction lines — translucent */ --guide: light-dark(rgba(29, 29, 31, 0.14), rgba(240, 244, 255, 0.16)); --guide-soft: light-dark(rgba(29, 29, 31, 0.10), rgba(240, 244, 255, 0.08)); --hair: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.12)); --hair-soft: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.06)); /* Primary accent — iOS indigo / vibrant dark blue */ --ai: light-dark(#5653de, #6FA9FF); --ai-ink: light-dark(#3634A3, #93C2FF); --ai-wash: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16)); /* Seal — iOS system pink */ --shu: light-dark(#f32856, #FF6B8A); --shu-wash: light-dark(rgba(255, 55, 95, 0.12), rgba(255, 107, 138, 0.16)); /* Draft / marginalia — iOS orange */ --ochre: light-dark(#FF9500, #FFC56B); --ochre-wash: light-dark(rgba(255, 149, 0, 0.14), rgba(255, 197, 107, 0.16)); /* Code surface */ --code-bg: light-dark(rgba(29, 29, 31, 0.82), rgba(5, 8, 16, 0.82)); --code-ink: light-dark(#F5F5F7, #F0F4FF); --code-muted: light-dark(#BCBCC0, #8A92A8); --code-accent: #FFD60A; --code-green: light-dark(#3ad85e, #5FE37F); --code-blue: light-dark(#64D2FF, #93C2FF); /* Typography — SF stack, identical */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; /* Radius — soft and large, identical */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; /* Shadows — floaty with cool-blue undertone / deep dark drops */ --shadow-sm: 0 2px 10px light-dark(rgba(31, 38, 135, 0.06), rgba(0, 0, 0, 0.30)); --shadow-md: 0 8px 32px light-dark(rgba(31, 38, 135, 0.10), rgba(0, 0, 0, 0.42)); --shadow-lg: 0 24px 60px light-dark(rgba(31, 38, 135, 0.14), rgba(0, 0, 0, 0.55)); --shadow-xl: 0 40px 80px light-dark(rgba(31, 38, 135, 0.18), rgba(0, 0, 0, 0.65)); --shadow-2xl: 0 56px 112px light-dark(rgba(31, 38, 135, 0.24), rgba(0, 0, 0, 0.75)); /* Blur — LIGHT defaults; dark overrides below via nested @media */ --blur-sm: blur(14px) saturate(160%); --blur-md: blur(22px) saturate(170%); --blur-lg: blur(30px) saturate(180%); /* Glow — dual-inset rim highlight (LIGHT defaults; dark overrides below) */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20), inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(255, 255, 255, 0.20); --glow-lg: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(255, 255, 255, 0.25), inset 2px 0 0 rgba(255, 255, 255, 0.45), inset -2px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 40px rgba(255, 255, 255, 0.15); /* Motion — identical */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---- Pattern C: dark-mode overrides for NON-COLOR tokens ---- * stylelint can't trace through @include m.theme() to know the * parent selector is :root[data-theme="glass"]; the declarations * below are valid in compiled output (Sass hoists @media + scopes * the vars under the parent selector). */ /* stylelint-disable no-invalid-position-declaration -- see comment above */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#ebe5fd, #101828); --page-hero-ink: light-dark(#1d1d1f, #f0f4ff); --page-band-bg: light-dark(#eee9fe, #0e1422); --page-band-ink: light-dark(#1d1d1f, #f0f4ff); } @media (prefers-color-scheme: dark) { :root[data-theme=glass] { --blur-sm: blur(12px) saturate(160%); --blur-md: blur(18px) saturate(180%); --blur-lg: blur(20px) saturate(200%); --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.16); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.06); --glow-lg: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(255, 255, 255, 0.08), inset 2px 0 0 rgba(255, 255, 255, 0.14), inset -2px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 40px rgba(111, 169, 255, 0.08); } } :root[data-theme=glass] { /* stylelint-enable no-invalid-position-declaration */ /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.05)); --interactive-active: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.10)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16)); --info-text: var(--ai-ink); --success-default: light-dark(#34C759, #30D158); --success-subtle: light-dark(rgba(52, 199, 89, 0.12), rgba(48, 209, 88, 0.16)); --success-text: light-dark(#0F6A22, #5FE37F); --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: light-dark(#985000, #FFD79A); --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: light-dark(#A3193A, #FF93AB); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } :root[data-theme=glass-dark] { color-scheme: dark; /* Surfaces — frosted translucent over deep blue-black */ --paper: #0A0F1A; --paper-raised: #141E32; --paper-sunk: #050810; --paper-glass: rgba(20, 30, 50, 0.60); /* Ink — cool near-white, glassy */ --ink: #F0F4FF; --ink-soft: #C8CFE0; --ink-faint: #8A92A8; --graphite: #DCE2F0; --muted: #727b93; /* Construction lines — translucent white hairlines */ --guide: rgba(240, 244, 255, 0.16); --guide-soft: rgba(240, 244, 255, 0.08); --hair: rgba(240, 244, 255, 0.12); --hair-soft: rgba(240, 244, 255, 0.06); /* Primary accent — vibrant iOS dark indigo/blue */ --ai: #6FA9FF; --ai-ink: #93C2FF; --ai-wash: rgba(111, 169, 255, 0.16); /* Seal — vibrant iOS dark pink */ --shu: #FF6B8A; --shu-wash: rgba(255, 107, 138, 0.16); /* Draft / marginalia — vibrant iOS dark orange */ --ochre: #FFC56B; --ochre-wash: rgba(255, 197, 107, 0.16); /* Code surface — translucent over deep paper */ --code-bg: rgba(5, 8, 16, 0.82); --code-ink: #F0F4FF; --code-muted: #8A92A8; --code-accent: #FFD60A; --code-green: #5FE37F; --code-blue: #93C2FF; /* Typography — match Glass (SF system stack) */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; /* Radius — match Glass (soft and large, iOS-style) */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; /* Shadows — floaty with deep undertone (dark needs heavier drops) */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.42); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.65); --shadow-2xl: 0 56px 112px rgba(0, 0, 0, 0.75); /* Blur — THE star token; tuned for dark-glass depth */ --blur-sm: blur(12px) saturate(160%); --blur-md: blur(18px) saturate(180%); --blur-lg: blur(20px) saturate(200%); /* Glow — dual-inset rim highlight (visionOS dark catches less but still rims) */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.16); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.10), inset -1px 0 0 rgba(255, 255, 255, 0.06); --glow-lg: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(255, 255, 255, 0.08), inset 2px 0 0 rgba(255, 255, 255, 0.14), inset -2px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 40px rgba(111, 169, 255, 0.08); /* Motion — match Glass */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive — kept very subtle so glass translucency reads through */ --interactive-hover: rgba(240, 244, 255, 0.05); --interactive-active: rgba(240, 244, 255, 0.10); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: rgba(111, 169, 255, 0.16); --info-text: var(--ai-ink); /* Status — success (iOS dark green) */ --success-default: #30D158; --success-subtle: rgba(48, 209, 88, 0.16); --success-text: #5FE37F; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: rgba(255, 197, 107, 0.16); --warning-text: #FFD79A; /* Status — error */ --error-default: var(--shu); --error-subtle: rgba(255, 107, 138, 0.16); --error-text: #FF93AB; /* ---------------------------------------------------------- LIBRARY SCALES ---------------------------------------------------------- */ /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #101828; --page-hero-ink: #f0f4ff; --page-band-bg: #0e1422; --page-band-ink: #f0f4ff; } :root[data-theme=glass-light] { color-scheme: light; /* Surfaces — frosted translucent over a lavender-tint base */ --paper: #F4EEFF; --paper-raised: #FFF; --paper-sunk: #E8E0F5; --paper-glass: rgba(255, 255, 255, 0.55); /* Ink — warm near-black, Apple style */ --ink: #1D1D1F; --ink-soft: #3A3A3C; --ink-faint: #65656A; --graphite: #2C2C2E; --muted: #6E6E73; /* Construction lines — glass doesn't like hard edges */ --guide: rgba(29, 29, 31, 0.14); --guide-soft: rgba(29, 29, 31, 0.10); --hair: rgba(29, 29, 31, 0.08); --hair-soft: rgba(29, 29, 31, 0.04); /* Primary accent — iOS indigo */ --ai: #5653de; --ai-ink: #3634A3; --ai-wash: rgba(89, 87, 226, 0.12); /* Seal — iOS system pink (draft / emphasis) */ --shu: #f32856; --shu-wash: rgba(255, 55, 95, 0.12); /* Draft / marginalia — iOS orange */ --ochre: #FF9500; --ochre-wash: rgba(255, 149, 0, 0.14); /* Code surface */ --code-bg: rgba(29, 29, 31, 0.82); --code-ink: #F5F5F7; --code-muted: #BABABE; --code-accent: #FFD60A; --code-green: #3ad85e; --code-blue: #64D2FF; /* Typography — SF system stack */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; /* Radius — soft and large, iOS-style */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; /* Shadows — floaty with a cool-blue undertone */ --shadow-sm: 0 2px 10px rgba(31, 38, 135, 0.06); --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.10); --shadow-lg: 0 24px 60px rgba(31, 38, 135, 0.14); --shadow-xl: 0 40px 80px rgba(31, 38, 135, 0.18); --shadow-2xl: 0 56px 112px rgba(31, 38, 135, 0.24); /* Blur — the star of this theme; pair with --paper-glass */ --blur-sm: blur(14px) saturate(160%); --blur-md: blur(22px) saturate(170%); --blur-lg: blur(30px) saturate(180%); /* Glow — dual-inset rim highlight (catches light like visionOS) */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.70); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20), inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(255, 255, 255, 0.20); --glow-lg: inset 0 2px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(255, 255, 255, 0.25), inset 2px 0 0 rgba(255, 255, 255, 0.45), inset -2px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 40px rgba(255, 255, 255, 0.15); /* Motion */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) Kept subtle so glass translucency reads through. */ --interactive-hover: rgba(29, 29, 31, 0.04); --interactive-active: rgba(29, 29, 31, 0.08); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) */ --info-default: var(--ai); --info-subtle: rgba(89, 87, 226, 0.12); --info-text: var(--ai-ink); /* Status — success (iOS system green) */ --success-default: #34C759; --success-subtle: rgba(52, 199, 89, 0.12); --success-text: #0F6A22; /* Status — warning (iOS system orange) */ --warning-default: var(--ochre); --warning-subtle: rgba(255, 149, 0, 0.12); --warning-text: #985000; /* Status — error (iOS system pink) */ --error-default: var(--shu); --error-subtle: rgba(255, 55, 95, 0.12); --error-text: #A3193A; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography — base body font + key scale slots */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #ebe5fd; --page-hero-ink: #1d1d1f; --page-band-bg: #eee9fe; --page-band-ink: #1d1d1f; } :root[data-theme=graphite] { color-scheme: light dark; /* Surfaces — silver (light) / dark aluminum (dark) */ --paper: light-dark(#F2F4F6, #1A1A1C); --paper-raised: light-dark(#FFF, #242426); --paper-sunk: light-dark(#E2E5E8, #141416); --paper-glass: light-dark(rgba(255, 255, 255, 0.72), rgba(36, 36, 38, 0.72)); /* Ink — cool near-black / warm white */ --ink: light-dark(#1A1F26, #F5F5F7); --ink-soft: light-dark(#3A4048, #C7C7CC); --ink-faint: light-dark(#5E646D, #98989D); --graphite: light-dark(#2A2F36, #AEAEB2); --muted: light-dark(#6a7078, #6A6A6E); /* Construction lines — translucent ink (light) / translucent white (dark) */ --guide: light-dark(rgba(26, 31, 38, 0.16), rgba(255, 255, 255, 0.16)); --guide-soft: light-dark(rgba(26, 31, 38, 0.08), rgba(255, 255, 255, 0.08)); --hair: light-dark(rgba(26, 31, 38, 0.12), rgba(255, 255, 255, 0.12)); --hair-soft: light-dark(rgba(26, 31, 38, 0.06), rgba(255, 255, 255, 0.06)); /* Primary accent — cool blue-gray (light) / Apple dark blue (dark) */ --ai: light-dark(#4A6585, #178aff); --ai-ink: light-dark(#2F4866, #409CFF); --ai-wash: light-dark(rgba(74, 101, 133, 0.10), rgba(10, 132, 255, 0.14)); /* Seal */ --shu: light-dark(#C24D40, #FF453A); --shu-wash: light-dark(rgba(194, 77, 64, 0.10), rgba(255, 69, 58, 0.14)); /* Draft / marginalia */ --ochre: light-dark(#B5873A, #FF9F0A); --ochre-wash: light-dark(rgba(181, 135, 58, 0.10), rgba(255, 159, 10, 0.12)); /* Code surface */ --code-bg: light-dark(#F6F7F9, #0D0D0F); --code-ink: light-dark(#1A1F26, #E8E8ED); --code-muted: light-dark(#666B73, #818186); --code-accent: light-dark(#86642a, #FFB86C); --code-green: light-dark(#3d7646, #A8E6A1); --code-blue: light-dark(#4A6585, #9AD4F7); /* Typography — SF stack, identical */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; /* Radius — identical */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* Shadows — restrained / deep drop on dark */ --shadow-sm: 0 1px 2px light-dark(rgba(26, 31, 38, 0.05), rgba(0, 0, 0, 0.35)); --shadow-md: 0 4px 14px light-dark(rgba(26, 31, 38, 0.07), rgba(0, 0, 0, 0.45)); --shadow-lg: 0 12px 32px light-dark(rgba(26, 31, 38, 0.10), rgba(0, 0, 0, 0.55)); --shadow-xl: 0 20px 50px light-dark(rgba(26, 31, 38, 0.13), rgba(0, 0, 0, 0.65)); --shadow-2xl: 0 28px 70px light-dark(rgba(26, 31, 38, 0.17), rgba(0, 0, 0, 0.75)); /* Blur — graphite doesn't use it */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — inset rim-highlight that sells milled metal in BOTH modes */ --glow-sm: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.06)); --glow-md: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.08)), 0 1px 3px light-dark(rgba(26, 31, 38, 0.06), rgba(0, 0, 0, 0.35)); --glow-lg: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.10)), 0 12px 32px light-dark(rgba(26, 31, 38, 0.10), rgba(0, 0, 0, 0.55)); /* Motion — Apple-snappy, identical */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 340ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(26, 31, 38, 0.04), rgba(255, 255, 255, 0.06)); --interactive-active: light-dark(rgba(26, 31, 38, 0.08), rgba(255, 255, 255, 0.10)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: light-dark(rgba(74, 101, 133, 0.10), rgba(10, 132, 255, 0.14)); --info-text: light-dark(var(--ai-ink), #409CFF); --success-default: light-dark(#28A745, #30D158); --success-subtle: light-dark(rgba(40, 167, 69, 0.10), rgba(48, 209, 88, 0.14)); --success-text: light-dark(#1b7530, #5FE37F); --warning-default: var(--ochre); --warning-subtle: light-dark(rgba(181, 135, 58, 0.10), rgba(255, 159, 10, 0.14)); --warning-text: light-dark(#7A5A22, #FFB340); --error-default: var(--shu); --error-subtle: light-dark(rgba(194, 77, 64, 0.10), rgba(255, 69, 58, 0.14)); --error-text: light-dark(#8A2F25, #FF6961); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#e8ebef, #1a212a); --page-hero-ink: light-dark(#1a1f26, #f5f5f7); --page-band-bg: light-dark(#eceff2, #1a1e24); --page-band-ink: light-dark(#1a1f26, #f5f5f7); } :root[data-theme=graphite-dark] { color-scheme: dark; /* Surfaces — milled aluminum chassis (dark) */ --paper: #1A1A1C; --paper-raised: #242426; --paper-sunk: #141416; --paper-glass: rgba(36, 36, 38, 0.72); /* Ink — warm whites on dark */ --ink: #F5F5F7; --ink-soft: #C7C7CC; --ink-faint: #98989D; --graphite: #AEAEB2; --muted: #818286; /* Construction lines — translucent white hairlines */ --guide: rgba(255, 255, 255, 0.16); --guide-soft: rgba(255, 255, 255, 0.08); --hair: rgba(255, 255, 255, 0.12); --hair-soft: rgba(255, 255, 255, 0.06); /* Primary accent — Apple dark-mode system blue */ --ai: #178aff; --ai-ink: #409CFF; --ai-wash: rgba(10, 132, 255, 0.14); /* Seal — Apple dark-mode red (reserve for emphasis) */ --shu: #FF453A; --shu-wash: rgba(255, 69, 58, 0.14); /* Draft / marginalia — Apple amber */ --ochre: #FF9F0A; --ochre-wash: rgba(255, 159, 10, 0.12); /* Code surface — Xcode deep */ --code-bg: #0D0D0F; --code-ink: #E8E8ED; --code-muted: #828287; --code-accent: #FFB86C; --code-green: #A8E6A1; --code-blue: #9AD4F7; /* Typography — SF system stack */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; /* Radius — Apple UI standard */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* Shadows — deep drop on black */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.65); --shadow-2xl: 0 28px 70px rgba(0, 0, 0, 0.75); /* Blur — graphite doesn't use it; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — inset rim-highlight that sells milled aluminum */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.06); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.35); --glow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, 0.55); /* Motion — Apple-snappy */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 340ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — translucent WHITE on dark */ --interactive-hover: rgba(255, 255, 255, 0.06); --interactive-active: rgba(255, 255, 255, 0.10); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) */ --info-default: var(--ai); --info-subtle: rgba(10, 132, 255, 0.14); --info-text: #409CFF; /* Status — success (Apple dark-mode green) */ --success-default: #30D158; --success-subtle: rgba(48, 209, 88, 0.14); --success-text: #5FE37F; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: rgba(255, 159, 10, 0.14); --warning-text: #FFB340; /* Status — error */ --error-default: var(--shu); --error-subtle: rgba(255, 69, 58, 0.14); --error-text: #FF6961; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography — base body font + key scale slots */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #1a212a; --page-hero-ink: #f5f5f7; --page-band-bg: #1a1e24; --page-band-ink: #f5f5f7; } :root[data-theme=graphite-light] { color-scheme: light; /* Surfaces — brushed silver chassis (light) */ --paper: #F2F4F6; --paper-raised: #FFF; --paper-sunk: #E2E5E8; --paper-glass: rgba(255, 255, 255, 0.72); /* Ink — cool near-black */ --ink: #1A1F26; --ink-soft: #3A4048; --ink-faint: #5E646D; --graphite: #2A2F36; --muted: #6a7078; /* Construction lines — translucent ink hairlines */ --guide: rgba(26, 31, 38, 0.16); --guide-soft: rgba(26, 31, 38, 0.08); --hair: rgba(26, 31, 38, 0.12); --hair-soft: rgba(26, 31, 38, 0.06); /* Primary accent — cool blue-gray (Apple system blue, light) */ --ai: #4A6585; --ai-ink: #2F4866; --ai-wash: rgba(74, 101, 133, 0.10); /* Seal — restrained warm red */ --shu: #C24D40; --shu-wash: rgba(194, 77, 64, 0.10); /* Draft / marginalia — warm gold */ --ochre: #B5873A; --ochre-wash: rgba(181, 135, 58, 0.10); /* Code surface — light Xcode */ --code-bg: #F6F7F9; --code-ink: #1A1F26; --code-muted: #656A72; --code-accent: #86642B; --code-green: #3c7645; --code-blue: #4A6585; /* Typography — match Graphite (SF system stack) */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'New York', 'Iowan Old Style', 'Cormorant Garamond', Georgia, serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; /* Radius — match Graphite (Apple UI standard) */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* Shadows — restrained, lifted (machined precision) */ --shadow-sm: 0 1px 2px rgba(26, 31, 38, 0.05); --shadow-md: 0 4px 14px rgba(26, 31, 38, 0.07); --shadow-lg: 0 12px 32px rgba(26, 31, 38, 0.10); --shadow-xl: 0 20px 50px rgba(26, 31, 38, 0.13); --shadow-2xl: 0 28px 70px rgba(26, 31, 38, 0.17); /* Blur — graphite doesn't use it */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — inset rim-highlight (sells brushed metal even in light) */ --glow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.50); --glow-md: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 3px rgba(26, 31, 38, 0.06); --glow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 12px 32px rgba(26, 31, 38, 0.10); /* Motion — Apple-snappy, match Graphite */ --duration-fast: 160ms; --duration-normal: 220ms; --duration-slow: 340ms; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive — translucent ink wash on light silver */ --interactive-hover: rgba(26, 31, 38, 0.04); --interactive-active: rgba(26, 31, 38, 0.08); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: rgba(74, 101, 133, 0.10); --info-text: var(--ai-ink); /* Status — success (Apple light-mode green) */ --success-default: #28A745; --success-subtle: rgba(40, 167, 69, 0.10); --success-text: #1b7530; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: rgba(181, 135, 58, 0.10); --warning-text: #7A5A22; /* Status — error */ --error-default: var(--shu); --error-subtle: rgba(194, 77, 64, 0.10); --error-text: #8A2F25; /* ---------------------------------------------------------- LIBRARY SCALES ---------------------------------------------------------- */ /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #e8ebef; --page-hero-ink: #1a1f26; --page-band-bg: #eceff2; --page-band-ink: #1a1f26; } :root[data-theme=press] { color-scheme: light dark; /* ---------------------------------------------------------------- Surfaces — light: warm newsprint / dark: near-ink newsroom ---------------------------------------------------------------- */ --paper: light-dark(#FAFAF7, #0E0E0E); --paper-raised: light-dark(#FFF, #1A1A1A); --paper-sunk: light-dark(#F2F1EC, #060606); --paper-glass: light-dark(rgba(255, 255, 255, 0.80), rgba(26, 26, 26, 0.82)); /* ---------------------------------------------------------------- Ink — light: warm near-black / dark: warm off-white ---------------------------------------------------------------- */ --ink: light-dark(#0A0A0A, #FAFAF7); --ink-soft: light-dark(#555, #C8C6C0); --ink-faint: light-dark(#6e6c66, #8A8A86); --graphite: light-dark(#1A1A1A, #ECEAE4); --muted: light-dark(#75736e, #6B6963); /* Rules / hairlines */ --guide: light-dark(#1A1A1A, #ECEAE4); --guide-soft: light-dark(#D9D7D1, #2A2A2A); --hair: light-dark(#1A1A1A, #2A2A2A); --hair-soft: light-dark(#ECEAE4, #1A1A1A); /* Primary accent — near-ink editorial link */ --ai: light-dark(#1A1A1A, #A8A8A8); --ai-ink: light-dark(#0A0A0A, #ECEAE4); --ai-wash: light-dark(#ECEAE4, #1F1F1F); /* Seal — press red */ --shu: light-dark(#D93025, #FF4538); --shu-wash: light-dark(#FBEAE8, rgba(255, 69, 56, 0.14)); /* Pull-quote / marginalia — warm gold */ --ochre: light-dark(#B5873A, #E8B96E); --ochre-wash: light-dark(#F4EBD6, rgba(232, 185, 110, 0.12)); /* Code surface */ --code-bg: light-dark(#0A0A0A, #060606); --code-ink: #FAFAF7; --code-muted: #8A8A86; --code-accent: #E8B96E; --code-green: #B8C57A; --code-blue: #94AFC9; /* ---------------------------------------------------------------- Typography — identical across modes ---------------------------------------------------------------- */ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace; /* ---------------------------------------------------------------- Radius — identical, editorial = always tight ---------------------------------------------------------------- */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; /* ---------------------------------------------------------------- Shadows — same shape, different alpha per mode (rgba is ) ---------------------------------------------------------------- */ --shadow-sm: 0 1px 2px light-dark(rgba(10, 10, 10, 0.05), rgba(0, 0, 0, 0.35)); --shadow-md: 0 6px 24px light-dark(rgba(10, 10, 10, 0.06), rgba(0, 0, 0, 0.45)); --shadow-lg: 0 18px 48px light-dark(rgba(10, 10, 10, 0.09), rgba(0, 0, 0, 0.55)); --shadow-xl: 0 28px 64px light-dark(rgba(10, 10, 10, 0.12), rgba(0, 0, 0, 0.65)); --shadow-2xl: 0 40px 96px light-dark(rgba(10, 10, 10, 0.18), rgba(0, 0, 0, 0.75)); /* Blur / glow — editorial doesn't use these */ --blur-sm: none; --blur-md: none; --blur-lg: none; --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* ---------------------------------------------------------------- Motion — editorial pace, identical across modes ---------------------------------------------------------------- */ --duration-fast: 200ms; --duration-normal: 280ms; --duration-slow: 420ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------------- SEMANTIC ALIASES — bridge library expected names to Press palette ---------------------------------------------------------------- */ /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: light-dark(var(--ai), var(--ink)); --text-link-hover: light-dark(var(--ai-ink), var(--shu)); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: light-dark(var(--ai), var(--shu)); /* Interactive (hover / active wash) */ --interactive-hover: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 247, 0.05)); --interactive-active: light-dark(rgba(10, 10, 10, 0.10), rgba(250, 250, 247, 0.10)); /* Brand */ --brand-primary: light-dark(var(--ai), var(--ink)); --brand-primary-hover: light-dark(var(--ai-ink), var(--shu)); /* Action — three groups */ --action-primary-default: light-dark(var(--ai), var(--ink)); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success (restrained editorial green) */ --success-default: light-dark(#2F7A3A, #6FA85A); --success-subtle: light-dark(#E3EEDF, rgba(111, 168, 90, 0.14)); --success-text: light-dark(#1F5228, #95C97F); /* Status — warning (warm editorial ochre) */ --warning-default: light-dark(#A86A1A, var(--ochre)); --warning-subtle: var(--ochre-wash); --warning-text: light-dark(#6B4512, #F0CC8E); /* Status — error (press red IS the error color) */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: light-dark(#8A1D15, #FF7A70); /* ---------------------------------------------------------------- LIBRARY SCALES — identical across modes ---------------------------------------------------------------- */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 6px; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------------- COMPONENT OVERRIDES — identical across modes ---------------------------------------------------------------- */ --btn-radius: var(--r-sm); /* 2px — near-square */ --card-radius: var(--r-sm); /* 2px — boxed */ --card-shadow: none; /* editorial is flat */ --card-border: 1px solid var(--hair); /* thin rule instead */ --input-radius: var(--r-sm); /* 2px */ --modal-radius: var(--r-md); /* 3px */ /* ---------------------------------------------------------------- PRINT — Press's own paper identity (opt-in per-theme override). Sass hoists this @media out of the theme selector, so it emits as `@media print { :root, :root[data-theme="press"] { … } }` and overrides print-base's default palette on paper only. Newsprint: a faint warm stock, warm near-black ink, press-red masthead rules. Every other theme inherits print-base's plain ink-on-white. ---------------------------------------------------------------- */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#ededea, #1c1c1c); --page-hero-ink: light-dark(#0a0a0a, #fafaf7); --page-band-bg: light-dark(#f2f2ef, #161616); --page-band-ink: light-dark(#0a0a0a, #fafaf7); } @media print { :root[data-theme=press] { /* stylelint-disable no-invalid-position-declaration -- these are custom-property overrides scoped to the theme selector m.theme() supplies; the position is valid once the mixin wraps them (emits `@media print { :root, :root[data-theme=press] }`), but stylelint can't see the mixin's parent selector statically. */ --print-paper: #FBFAF6; /* faint warm newsprint stock */ --print-ink: #0A0A0A; /* warm near-black */ --print-line: #D93025; /* press red — the masthead rule */ --print-muted: #6B6963; /* warm editorial gray */ /* stylelint-enable no-invalid-position-declaration */ } } :root[data-theme=press-dark] { color-scheme: dark; /* Surfaces — near-ink newsroom */ --paper: #0E0E0E; --paper-raised: #1A1A1A; --paper-sunk: #060606; --paper-glass: rgba(26, 26, 26, 0.82); /* Ink — warm off-white headline */ --ink: #FAFAF7; --ink-soft: #C8C6C0; --ink-faint: #8A8A86; --graphite: #ECEAE4; --muted: #7d7b74; /* Rules / hairlines — thin editorial rules on dark */ --guide: #ECEAE4; --guide-soft: #2A2A2A; --hair: #2A2A2A; --hair-soft: #1A1A1A; /* Primary accent — cool ink, near-mono editorial link */ --ai: #A8A8A8; --ai-ink: #ECEAE4; --ai-wash: #1F1F1F; /* Seal — press red (kept hot) */ --shu: #FF4538; --shu-wash: rgba(255, 69, 56, 0.14); /* Pull-quote / marginalia — warm gold */ --ochre: #E8B96E; --ochre-wash: rgba(232, 185, 110, 0.12); /* Code surface — keep ink-slab, lifted slightly above paper */ --code-bg: #060606; --code-ink: #FAFAF7; --code-muted: #8A8A86; --code-accent: #E8B96E; --code-green: #B8C57A; --code-blue: #94AFC9; /* Typography — match Press */ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace; /* Radius — match Press, very square */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; /* Shadows — minimal, deeper for dark */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 6px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55); --shadow-xl: 0 28px 64px rgba(0, 0, 0, .65); --shadow-2xl: 0 40px 96px rgba(0, 0, 0, .75); /* Blur — editorial doesn't use it */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — editorial doesn't use it */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — editorial pace, match Press */ --duration-fast: 200ms; --duration-normal: 280ms; --duration-slow: 420ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ink); --text-link-hover: var(--shu); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--shu); /* Interactive (hover / active wash) — light wash on dark */ --interactive-hover: rgba(250, 250, 247, 0.05); --interactive-active: rgba(250, 250, 247, 0.10); /* Brand */ --brand-primary: var(--ink); --brand-primary-hover: var(--shu); /* Action triplets */ --action-primary-default: var(--ink); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (near-mono editorial) */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success (restrained editorial green, lifted) */ --success-default: #6FA85A; --success-subtle: rgba(111, 168, 90, 0.14); --success-text: #95C97F; /* Status — warning (warm editorial ochre) */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #F0CC8E; /* Status — error — press red IS the error color */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #FF7A70; /* ---------------------------------------------------------- LIBRARY SCALES ---------------------------------------------------------- */ /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — Press is editorial, xl stays tight (6px) */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 6px; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES — match Press exactly ---------------------------------------------------------- */ --btn-radius: var(--r-sm); /* 2px — near-square */ --card-radius: var(--r-sm); /* 2px — boxed */ --card-shadow: none; /* editorial is flat */ --card-border: 1px solid var(--hair); /* thin rule instead */ --input-radius: var(--r-sm); /* 2px */ --modal-radius: var(--r-md); /* 3px */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #1c1c1c; --page-hero-ink: #fafaf7; --page-band-bg: #161616; --page-band-ink: #fafaf7; } @media print { :root[data-theme=press-dark] { --print-paper: #FBFAF6; --print-ink: #0A0A0A; --print-line: #D93025; --print-muted: #6B6963; } } :root[data-theme=press-light] { color-scheme: light; /* Surfaces — warm newsprint */ --paper: #FAFAF7; --paper-raised: #FFF; --paper-sunk: #F2F1EC; --paper-glass: rgba(255, 255, 255, 0.80); /* Ink — warm near-black */ --ink: #0A0A0A; --ink-soft: #555; --ink-faint: #6e6c66; --graphite: #1A1A1A; --muted: #75736e; /* Rules / hairlines — thin editorial rules */ --guide: #1A1A1A; --guide-soft: #D9D7D1; --hair: #1A1A1A; --hair-soft: #ECEAE4; /* Primary accent — near-ink editorial link (not a bright hue) */ --ai: #1A1A1A; --ai-ink: #0A0A0A; --ai-wash: #ECEAE4; /* Seal — press red (the single editorial accent) */ --shu: #D93025; --shu-wash: #FBEAE8; /* Pull-quote / marginalia — warm gold */ --ochre: #B5873A; --ochre-wash: #F4EBD6; /* Code surface — keep editorial (ink slab) */ --code-bg: #0A0A0A; --code-ink: #FAFAF7; --code-muted: #8A8A86; --code-accent: #E8B96E; --code-green: #B8C57A; --code-blue: #94AFC9; /* Typography */ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace; /* Radius — editorial is tight, very square */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; /* Shadows — minimal, single-layer, editorial flat */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, .05); --shadow-md: 0 6px 24px rgba(10, 10, 10, .06); --shadow-lg: 0 18px 48px rgba(10, 10, 10, .09); --shadow-xl: 0 28px 64px rgba(10, 10, 10, .12); --shadow-2xl: 0 40px 96px rgba(10, 10, 10, .18); /* Blur — editorial doesn't use it; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — editorial doesn't use it; declared transparent */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — editorial reads slower than digital */ --duration-fast: 200ms; --duration-normal: 280ms; --duration-slow: 420ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — ink overlays on paper */ --interactive-hover: rgba(10, 10, 10, 0.05); --interactive-active: rgba(10, 10, 10, 0.10); /* Brand (identity — action-primary references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text). Press has no indigo; --ai is a near-ink editorial tone. */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success. Restrained editorial green (desaturated). */ --success-default: #2F7A3A; --success-subtle: #E3EEDF; --success-text: #1F5228; /* Status — warning. Warm editorial ochre. */ --warning-default: #A86A1A; --warning-subtle: var(--ochre-wash); --warning-text: #6B4512; /* Status — error. Press red IS the error color. */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #8A1D15; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. Numeric scales mirror Sketchbook so rhythm is consistent. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. Press is editorial and angular: xl stays tight (4px). */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 6px; --radius-full: 9999px; /* Typography — base body font + key scale slots. Press body is Inter (--font-sans). */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES (Feature 1.3) ----------------------------------------------------------- Press is editorial newsprint: very tight radii (2–4px), shadowless cards (rules, not lifts), flat panels. Overrides are sparse — only the choices that define the editorial voice, defaults carry the rest. ---------------------------------------------------------- */ --btn-radius: var(--r-sm); /* 2px — near-square control */ --card-radius: var(--r-sm); /* 2px — boxed layout */ --card-shadow: none; /* editorial is flat */ --card-border: 1px solid var(--hair); /* thin ink rule instead */ --input-radius: var(--r-sm); /* 2px — text field */ --modal-radius: var(--r-md); /* 3px — still tight */ /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #ededea; --page-hero-ink: #0a0a0a; --page-band-bg: #f2f2ef; --page-band-ink: #0a0a0a; } @media print { :root[data-theme=press-light] { --print-paper: #FBFAF6; --print-ink: #0A0A0A; --print-line: #D93025; --print-muted: #6B6963; } } :root[data-theme=prism] { color-scheme: light dark; /* Surfaces */ --paper: light-dark(#fff, #09090b); --paper-raised: light-dark(#fff, #18181b); --paper-sunk: light-dark(#f4f4f5, #27272a); --paper-glass: light-dark(rgba(255, 255, 255, 0.80), rgba(24, 24, 27, 0.80)); /* Ink — zinc neutral ramp */ --ink: light-dark(#09090b, #fafafa); --ink-soft: light-dark(#27272a, #e4e4e7); --ink-faint: light-dark(#52525b, #a1a1aa); --graphite: light-dark(#18181b, #f4f4f5); --muted: light-dark(#71717a, #71717a); /* Lines */ --guide: light-dark(#d4d4d8, #3f3f46); --guide-soft: light-dark(#e4e4e7, #27272a); --hair: light-dark(#e4e4e7, #27272a); --hair-soft: light-dark(#f4f4f5, #18181b); /* Primary accent — refined blue (brighter for dark) */ --ai: light-dark(#2563eb, #3b82f6); --ai-ink: light-dark(#1d4ed8, #60a5fa); --ai-wash: light-dark(#eff6ff, #1e3a8a); /* Seal — red */ --shu: light-dark(#dc2626, #ef4444); --shu-wash: light-dark(#fef2f2, #450a0a); /* Tertiary — amber */ --ochre: light-dark(#ca8a04, #eab308); --ochre-wash: light-dark(#fefce8, #422006); /* Code surface */ --code-bg: light-dark(#fafafa, #0a0a0a); --code-ink: light-dark(#18181b, #e4e4e7); --code-muted: light-dark(#6B6B73, #808089); --code-accent: light-dark(#c0410b, #fb923c); --code-green: light-dark(#117D39, #4ade80); --code-blue: light-dark(#2462EB, #60a5fa); /* Typography — identical across modes */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: 'Inter', cursive; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace; /* Radius — identical */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — extremely subtle, heavier on dark */ --shadow-sm: 0 1px 1px light-dark(rgba(9, 9, 11, 0.03), rgba(0, 0, 0, 0.30)); --shadow-md: 0 1px 2px light-dark(rgba(9, 9, 11, 0.05), rgba(0, 0, 0, 0.40)); --shadow-lg: 0 4px 12px -4px light-dark(rgba(9, 9, 11, 0.08), rgba(0, 0, 0, 0.60)); --shadow-xl: 0 16px 32px -16px light-dark(rgba(9, 9, 11, 0.15), rgba(0, 0, 0, 0.70)); --shadow-2xl: 0 0 0 1px light-dark(#e4e4e7, #27272a), 0 8px 24px -8px light-dark(rgba(9, 9, 11, 0.12), rgba(0, 0, 0, 0.60)); /* Blur / glow — Prism uses neither */ --blur-sm: none; --blur-md: none; --blur-lg: none; --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — fast + crisp, identical */ --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms; --ease: cubic-bezier(.32, .72, 0, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(9, 9, 11, 0.05), rgba(255, 255, 255, 0.05)); --interactive-active: light-dark(rgba(9, 9, 11, 0.10), rgba(255, 255, 255, 0.10)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: light-dark(#16a34a, #22c55e); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: light-dark(var(--ai-ink), #85BFFF); --success-default: light-dark(#16a34a, #22c55e); --success-subtle: light-dark(#f0fdf4, #14532d); --success-text: light-dark(#0e7c3a, #4ade80); --warning-default: light-dark(#ca8a04, #eab308); --warning-subtle: light-dark(#fefce8, #422006); --warning-text: light-dark(#854d0e, #fde047); --error-default: light-dark(#dc2626, #ef4444); --error-subtle: light-dark(#fef2f2, #450a0a); --error-text: light-dark(#b91c1c, #fca5a5); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Component overrides — border-driven, tight radii */ --btn-radius: var(--r-md); --card-radius: var(--r-md); --card-shadow: var(--shadow-sm); --card-border: 1px solid var(--hair); --input-radius: var(--r-md); --modal-radius: var(--r-lg); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#f2f6fe, #0c1019); --page-hero-ink: light-dark(#09090b, #fafafa); --page-band-bg: light-dark(#f7fafe, #0b0d13); --page-band-ink: light-dark(#09090b, #fafafa); } :root[data-theme=prism-dark] { color-scheme: dark; /* Surfaces — Zinc dark ramp */ --paper: #09090b; --paper-raised: #18181b; --paper-sunk: #27272a; --paper-glass: rgba(24, 24, 27, 0.80); /* Ink — inverted neutrals */ --ink: #fafafa; --ink-soft: #e4e4e7; --ink-faint: #a1a1aa; --graphite: #f4f4f5; --muted: #71717a; /* Lines — dark borders */ --guide: #3f3f46; --guide-soft: #27272a; --hair: #27272a; --hair-soft: #18181b; /* Primary accent — brighter blue for dark surfaces */ --ai: #3b82f6; --ai-ink: #60a5fa; --ai-wash: #1e3a8a; /* Seal — red */ --shu: #ef4444; --shu-wash: #450a0a; /* Tertiary — amber */ --ochre: #eab308; --ochre-wash: #422006; /* Code — dark syntax surface */ --code-bg: #0a0a0a; --code-ink: #e4e4e7; --code-muted: #808089; --code-accent: #fb923c; --code-green: #4ade80; --code-blue: #60a5fa; /* Typography */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: 'Inter', cursive; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace; /* Radius */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — heavier for dark backgrounds */ --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3); --shadow-md: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 4px 12px -4px rgba(0, 0, 0, .6); --shadow-xl: 0 16px 32px -16px rgba(0, 0, 0, .7); --shadow-2xl: 0 0 0 1px #27272a, 0 8px 24px -8px rgba(0, 0, 0, .6); /* Blur */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion */ --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms; --ease: cubic-bezier(.32, .72, 0, 1); /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces (semantic) */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); /* Interactive overlays — light wash on dark */ --interactive-hover: rgba(255, 255, 255, 0.05); --interactive-active: rgba(255, 255, 255, 0.10); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: #22c55e; --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: #85BFFF; /* Status — success */ --success-default: #22c55e; --success-subtle: #14532d; --success-text: #4ade80; /* Status — warning */ --warning-default: #eab308; --warning-subtle: #422006; --warning-text: #fde047; /* Status — error */ --error-default: #ef4444; --error-subtle: #450a0a; --error-text: #fca5a5; /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Component overrides */ --btn-radius: var(--r-md); --card-radius: var(--r-md); --card-shadow: var(--shadow-sm); --card-border: 1px solid var(--hair); --input-radius: var(--r-md); --modal-radius: var(--r-lg); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #0c1019; --page-hero-ink: #fafafa; --page-band-bg: #0b0d13; --page-band-ink: #fafafa; } :root[data-theme=prism-light] { color-scheme: light; /* Surfaces */ --paper: #fff; --paper-raised: #fff; --paper-sunk: #f4f4f5; --paper-glass: rgba(255, 255, 255, 0.80); /* Ink — Zinc neutral ramp */ --ink: #09090b; --ink-soft: #27272a; --ink-faint: #52525b; --graphite: #18181b; --muted: #71717a; /* Lines */ --guide: #d4d4d8; --guide-soft: #e4e4e7; --hair: #e4e4e7; --hair-soft: #f4f4f5; /* Primary accent — refined blue */ --ai: #2563eb; --ai-ink: #1d4ed8; --ai-wash: #eff6ff; /* Seal — red (used for error / secondary) */ --shu: #dc2626; --shu-wash: #fef2f2; /* Tertiary — amber (used for warning) */ --ochre: #ca8a04; --ochre-wash: #fefce8; /* Code — light syntax surface */ --code-bg: #fafafa; --code-ink: #18181b; --code-muted: #6c6b74; --code-accent: #c1400b; --code-green: #117C38; --code-blue: #2462e9; /* Typography */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-script: 'Inter', cursive; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace; /* Radius */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; /* Shadow — extremely subtle */ --shadow-sm: 0 1px 1px rgba(9, 9, 11, .03); --shadow-md: 0 1px 2px rgba(9, 9, 11, .05); --shadow-lg: 0 4px 12px -4px rgba(9, 9, 11, .08); --shadow-xl: 0 16px 32px -16px rgba(9, 9, 11, .15); --shadow-2xl: 0 0 0 1px #e4e4e7, 0 8px 24px -8px rgba(9, 9, 11, .12); /* Blur — Prism doesn't use frosted surfaces */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — Prism doesn't use glow effects */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — fast and crisp */ --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms; --ease: cubic-bezier(.32, .72, 0, 1); /* Backgrounds */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces (semantic) */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); /* Interactive overlays */ --interactive-hover: rgba(9, 9, 11, 0.05); --interactive-active: rgba(9, 9, 11, 0.10); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: #16a34a; --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success */ --success-default: #16a34a; --success-subtle: #f0fdf4; --success-text: #0e7c3a; /* Status — warning */ --warning-default: #ca8a04; --warning-subtle: #fefce8; --warning-text: #854d0e; /* Status — error */ --error-default: #dc2626; --error-subtle: #fef2f2; --error-text: #b91c1c; /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 12px; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Component overrides — Prism is border-driven and tightly rounded */ --btn-radius: var(--r-md); --card-radius: var(--r-md); --card-shadow: var(--shadow-sm); --card-border: 1px solid var(--hair); --input-radius: var(--r-md); --modal-radius: var(--r-lg); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #f2f6fe; --page-hero-ink: #09090b; --page-band-bg: #f7fafe; --page-band-ink: #09090b; } :root[data-theme=sketchbook] { color-scheme: light dark; /* Surfaces — warm paper / warm charcoal paper */ --paper: light-dark(#F7F3EA, #1A1815); --paper-raised: light-dark(#FDFAF2, #2A2520); --paper-sunk: light-dark(#ECE5D3, #11100E); --paper-glass: light-dark(rgba(253, 250, 242, 0.75), rgba(42, 37, 32, 0.78)); /* Ink — warm pencil + sumi / warm cream */ --ink: light-dark(#2A241E, #F4EFE2); --ink-soft: light-dark(#4A4037, #D8D0BE); --ink-faint: light-dark(#706757, #A89E89); --graphite: light-dark(#3A332B, #E8E0CE); --muted: light-dark(#786e5d, #89806d); /* Construction lines */ --guide: light-dark(#C9BDA5, #4A4239); --guide-soft: light-dark(#DDD4C0, #382F27); --hair: light-dark(#D4CCBB, #3F362C); --hair-soft: light-dark(#E8E2D4, #2A241E); /* Primary accent — indigo (lifted for dark paper) */ --ai: light-dark(#1F3A5F, #6E8FBF); --ai-ink: light-dark(#14263F, #8DA8D1); --ai-wash: light-dark(#E5EBF1, #1F2B3F); /* Seal — vermilion (warm, brightens slightly on dark) */ --shu: light-dark(#C1272D, #E36148); --shu-wash: light-dark(#F6E3E1, #3A1A14); /* Draft / marginalia — warm gold */ --ochre: light-dark(#A37B30, #D4A04B); --ochre-wash: light-dark(#F0E5CC, #382B14); /* Code surface — inverts intentionally */ --code-bg: light-dark(#2B2420, #F7F3EA); --code-ink: light-dark(#F7F3EA, #2B2420); --code-muted: light-dark(#A39787, #6B5E50); --code-accent: light-dark(#E5B660, #836327); --code-green: light-dark(#A8B86C, #537136); --code-blue: light-dark(#94AFC9, #1F3A5F); /* Typography — identical across modes */ --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace; /* Radius — identical */ --r-sm: 2px; --r-md: 3px; --r-lg: 6px; /* Shadows — ink bleeding through paper / deep drop on charcoal */ --shadow-sm: 0 1px 2px light-dark(rgba(42, 36, 30, 0.06), rgba(0, 0, 0, 0.35)); --shadow-md: 0 4px 18px light-dark(rgba(42, 36, 30, 0.08), rgba(0, 0, 0, 0.45)); --shadow-lg: 0 12px 40px light-dark(rgba(42, 36, 30, 0.12), rgba(0, 0, 0, 0.55)); --shadow-xl: 0 20px 50px light-dark(rgba(42, 36, 30, 0.16), rgba(0, 0, 0, 0.65)); --shadow-2xl: 0 28px 70px light-dark(rgba(42, 36, 30, 0.22), rgba(0, 0, 0, 0.75)); /* Blur / glow — paper themes don't use either */ --blur-sm: none; --blur-md: none; --blur-lg: none; --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — editorial pace, identical */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: light-dark(var(--ink), var(--guide)); --border-focus: var(--ai); --interactive-hover: light-dark(rgba(42, 36, 30, 0.06), rgba(244, 239, 226, 0.06)); --interactive-active: light-dark(rgba(42, 36, 30, 0.12), rgba(244, 239, 226, 0.12)); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); --success-default: light-dark(#5A7A3A, #8DA86A); --success-subtle: light-dark(#EAEFDC, #1F2B14); --success-text: light-dark(#3F5627, #B8CC8E); --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: light-dark(#6B4E1E, #E8BF6E); --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: light-dark(#7A1A1F, #F08A72); /* Library scales — identical */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: light-dark(#eae8e2, #1f1f1f); --page-hero-ink: light-dark(#2a241e, #f4efe2); --page-band-bg: light-dark(#efede5, #1d1c1b); --page-band-ink: light-dark(#2a241e, #f4efe2); } :root[data-theme=sketchbook-dark] { color-scheme: dark; /* Surfaces — warm charcoal paper */ --paper: #1A1815; --paper-raised: #2A2520; --paper-sunk: #11100E; --paper-glass: rgba(42, 37, 32, 0.78); /* Ink — warm cream pencil */ --ink: #F4EFE2; --ink-soft: #D8D0BE; --ink-faint: #A89E89; --graphite: #E8E0CE; --muted: #89806d; /* Construction lines — warm dark hairlines */ --guide: #4A4239; --guide-soft: #382F27; --hair: #3F362C; --hair-soft: #2A241E; /* Primary accent — lifted indigo for dark paper */ --ai: #6E8FBF; --ai-ink: #8DA8D1; --ai-wash: #1F2B3F; /* Seal — vermilion (stays warm, brightened slightly) */ --shu: #E36148; --shu-wash: #3A1A14; /* Draft / marginalia — warm gold */ --ochre: #D4A04B; --ochre-wash: #382B14; /* Code surface — invert: warm cream slab */ --code-bg: #F7F3EA; --code-ink: #2B2420; --code-muted: #6B5E50; --code-accent: #826226; --code-green: #537035; --code-blue: #1F3A5F; /* Typography — match Sketchbook */ --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace; /* Radius — match Sketchbook */ --r-sm: 2px; --r-md: 3px; --r-lg: 6px; /* Shadows — heavier on dark, ink bleeding behind paper */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55); --shadow-xl: 0 20px 50px rgba(0, 0, 0, .65); --shadow-2xl: 0 28px 70px rgba(0, 0, 0, .75); /* Blur — paper themes don't use it; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — faint warm rim (charcoal paper, not phosphor) */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — match Sketchbook (editorial pace) */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--guide); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — warm cream on charcoal */ --interactive-hover: rgba(244, 239, 226, 0.06); --interactive-active: rgba(244, 239, 226, 0.12); /* Brand */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action triplets */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success (lifted moss-green for dark paper) */ --success-default: #8DA86A; --success-subtle: #1F2B14; --success-text: #B8CC8E; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #E8BF6E; /* Status — error */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #F08A72; /* ---------------------------------------------------------- LIBRARY SCALES ---------------------------------------------------------- */ /* Space scale */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #1f1f1f; --page-hero-ink: #f4efe2; --page-band-bg: #1d1c1b; --page-band-ink: #f4efe2; } :root[data-theme=sketchbook-light] { color-scheme: light; /* Surfaces — warm paper */ --paper: #F7F3EA; --paper-raised: #FDFAF2; --paper-sunk: #ECE5D3; --paper-glass: rgba(253, 250, 242, 0.75); /* Ink — warm pencil + sumi */ --ink: #2A241E; --ink-soft: #4A4037; --ink-faint: #706757; --graphite: #3A332B; --muted: #786e5d; /* Construction lines */ --guide: #C9BDA5; --guide-soft: #DDD4C0; --hair: #D4CCBB; --hair-soft: #E8E2D4; /* Primary accent — indigo */ --ai: #1F3A5F; --ai-ink: #14263F; --ai-wash: #E5EBF1; /* Seal — vermilion (reserve for emphasis) */ --shu: #C1272D; --shu-wash: #F6E3E1; /* Draft / marginalia — warm gold */ --ochre: #A37B30; --ochre-wash: #F0E5CC; /* Code surface */ --code-bg: #2B2420; --code-ink: #F7F3EA; --code-muted: #A39787; --code-accent: #E5B660; --code-green: #A8B86C; --code-blue: #94AFC9; /* Typography */ --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-script: 'Caveat', 'Shadows Into Light', cursive; --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace; /* Radius */ --r-sm: 2px; --r-md: 3px; --r-lg: 6px; /* Shadows — ink bleeding through paper */ --shadow-sm: 0 1px 2px rgba(42, 36, 30, .06); --shadow-md: 0 4px 18px rgba(42, 36, 30, .08); --shadow-lg: 0 12px 40px rgba(42, 36, 30, .12); --shadow-xl: 0 20px 50px rgba(42, 36, 30, .16); --shadow-2xl: 0 28px 70px rgba(42, 36, 30, .22); /* Blur — paper themes don't use it; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — faint ink bleed, not phosphor */ --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion */ --duration-fast: 180ms; --duration-normal: 240ms; --duration-slow: 380ms; --ease: cubic-bezier(0.33, 0.66, 0.33, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) */ --interactive-hover: rgba(42, 36, 30, 0.06); --interactive-active: rgba(42, 36, 30, 0.12); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) */ --info-default: var(--ai); --info-subtle: var(--ai-wash); --info-text: var(--ai-ink); /* Status — success */ --success-default: #5A7A3A; --success-subtle: #EAEFDC; --success-text: #3F5627; /* Status — warning */ --warning-default: var(--ochre); --warning-subtle: var(--ochre-wash); --warning-text: #6B4E1E; /* Status — error */ --error-default: var(--shu); --error-subtle: var(--shu-wash); --error-text: #7A1A1F; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. Override any of these to change the whole system's rhythm. ---------------------------------------------------------- */ /* Space scale (rem for accessibility) */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — mirrors --r-* with standard names so `m.radius(size)` in the library finds --radius-. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 0.75rem; --radius-full: 9999px; /* Typography — base body font + key scale slots */ --font-primary: var(--font-sans); --font-size-base: 1rem; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #eae8e2; --page-hero-ink: #2a241e; --page-band-bg: #efede5; --page-band-ink: #2a241e; } :root[data-theme=terminal] { color-scheme: dark; /* Surfaces — deep warm black + phosphor haze */ --paper: #0A0E0A; --paper-raised: #0F140F; --paper-sunk: #070A07; --paper-glass: rgba(79, 224, 120, 0.06); /* Ink — phosphor green on the tube */ --ink: #4FE078; --ink-soft: #34944a; --ink-faint: #3DAF4F; --graphite: #1A3D22; --muted: #2A8B42; /* Scanlines / rule lines */ --guide: #1E5E2F; --guide-soft: #143618; --hair: #2A8B42; --hair-soft: #1E5E2F; /* Primary accent — cyan (terminal links) */ --ai: #7FDBFF; --ai-ink: #5AB3D4; --ai-wash: rgba(127, 219, 255, 0.10); /* Seal — error red */ --shu: #FF5A5A; --shu-wash: rgba(255, 90, 90, 0.10); /* Accent — warning amber */ --ochre: #F0A030; --ochre-wash: rgba(240, 160, 48, 0.10); /* Code surface */ --code-bg: #070A07; --code-ink: #4FE078; --code-muted: #2C9245; --code-accent: #F0A030; --code-green: #8FFCA8; --code-blue: #7FDBFF; /* Typography — mono everywhere */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace; --font-sans: var(--font-mono); --font-serif: var(--font-mono); --font-display: var(--font-mono); --font-script: var(--font-mono); /* Radius — CRT pixel corners */ --r-sm: 0; --r-md: 0; --r-lg: 0; /* Shadows — phosphor rings */ --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20); --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15); --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25); --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30); --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40); /* Blur — terminal has no frosted glass */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — phosphor halo */ --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25); --glow-md: 0 0 8px rgba(79, 224, 120, 0.35); --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45); /* Motion — instant */ --duration-fast: 100ms; --duration-normal: 140ms; --duration-slow: 220ms; --ease: cubic-bezier(0.2, 0.0, 0.2, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); --interactive-hover: rgba(79, 224, 120, 0.08); --interactive-active: rgba(79, 224, 120, 0.15); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: rgba(127, 219, 255, 0.12); --info-text: #7FDBFF; --success-default: #8FFCA8; --success-subtle: rgba(143, 252, 168, 0.12); --success-text: #8FFCA8; --warning-default: var(--ochre); --warning-subtle: rgba(240, 160, 48, 0.12); --warning-text: var(--ochre); --error-default: var(--shu); --error-subtle: rgba(255, 90, 90, 0.12); --error-text: #FF7A7A; /* Library scales */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; --font-primary: var(--font-mono); --font-size-base: 15px; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Component overrides */ --btn-radius: 0; --card-radius: 0; --input-radius: 0; --card-shadow: var(--glow-sm); --card-border: 1px solid var(--ink-faint); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #111a19; --page-hero-ink: #4fe078; --page-band-bg: #0e1513; --page-band-ink: #4fe078; } :root[data-theme=terminal-dark] { color-scheme: dark; /* Surfaces — deep warm black chassis + phosphor haze */ --paper: #0A0E0A; --paper-raised: #0F140F; --paper-sunk: #070A07; --paper-glass: rgba(79, 224, 120, 0.06); /* Ink — phosphor green on the tube */ --ink: #4FE078; --ink-soft: #34944a; --ink-faint: #3DAF4F; --graphite: #1A3D22; --muted: #2A8B42; /* Scanlines / rule lines */ --guide: #1E5E2F; --guide-soft: #143618; --hair: #2A8B42; --hair-soft: #1E5E2F; /* Primary accent — cyan (interactive links in a terminal) */ --ai: #7FDBFF; --ai-ink: #5AB3D4; --ai-wash: rgba(127, 219, 255, 0.10); /* Seal — error red */ --shu: #FF5A5A; --shu-wash: rgba(255, 90, 90, 0.10); /* Accent — warning amber */ --ochre: #F0A030; --ochre-wash: rgba(240, 160, 48, 0.10); /* Code surface */ --code-bg: #070A07; --code-ink: #4FE078; --code-muted: #329248; --code-accent: #F0A030; --code-green: #8FFCA8; --code-blue: #7FDBFF; /* Typography — mono everywhere (see FONT NOTE in header) */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace; --font-sans: var(--font-mono); --font-serif: var(--font-mono); --font-display: var(--font-mono); --font-script: var(--font-mono); /* Radius — a CRT has hard pixel corners */ --r-sm: 0; --r-md: 0; --r-lg: 0; /* Shadows — a CRT doesn't cast, it emits. Keep subtle. */ --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20); --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15); --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25); --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30); --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40); /* Blur — terminal has no frosted glass; declared so swap stays lossless */ --blur-sm: none; --blur-md: none; --blur-lg: none; /* Glow — phosphor halo (this is where the theme sings) */ --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25); --glow-md: 0 0 8px rgba(79, 224, 120, 0.35); --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45); /* Motion — terminals are instant */ --duration-fast: 100ms; --duration-normal: 140ms; --duration-slow: 220ms; --ease: cubic-bezier(0.2, 0.0, 0.2, 1); /* ---------------------------------------------------------- SEMANTIC ALIASES ----------------------------------------------------------- Bridge the library's expected names to this theme's native palette. Components can now write m.color(surface-default) or var(--surface-default) and reskin with the theme automatically. ---------------------------------------------------------- */ /* Backgrounds (page-level) */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); /* Surfaces */ --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); /* Borders */ --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); /* Interactive (hover / active wash layers) — phosphor-green translucent overlays */ --interactive-hover: rgba(79, 224, 120, 0.08); --interactive-active: rgba(79, 224, 120, 0.15); /* Brand (identity — action-primary usually references these) */ --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); /* Action (primary / secondary / tertiary) */ --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); /* Feedback / status (high-level semantic) */ --feedback-info: var(--ai); --feedback-success: var(--code-green); --feedback-warning: var(--ochre); --feedback-error: var(--shu); /* Status — info (three-part: default / subtle / text) — cyan */ --info-default: var(--ai); --info-subtle: rgba(127, 219, 255, 0.12); --info-text: #7FDBFF; /* Status — success — bright phosphor */ --success-default: #8FFCA8; --success-subtle: rgba(143, 252, 168, 0.12); --success-text: #8FFCA8; /* Status — warning — amber */ --warning-default: var(--ochre); --warning-subtle: rgba(240, 160, 48, 0.12); --warning-text: var(--ochre); /* Status — error — red */ --error-default: var(--shu); --error-subtle: rgba(255, 90, 90, 0.12); --error-text: #FF7A7A; /* ---------------------------------------------------------- LIBRARY SCALES (space / radius / type / motion / z) ----------------------------------------------------------- The library mixins emit var(--space-), var(--radius-), var(--font-primary), var(--font-size-), var(--z-), … Themes declare the slots so those mixins always resolve. ---------------------------------------------------------- */ /* Space scale (rem for accessibility — natural scale, same as Sketchbook) */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); /* Radius alias — CRT has hard pixel corners, so every slot is 0 */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; /* Typography — mono body + key scale slots (15px matches CRT body setting) */ --font-primary: var(--font-mono); --font-size-base: 15px; --line-height-normal: 1.5; --font-weight-medium: 500; /* Z-index layers (layering is universal) */ --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ---------------------------------------------------------- OPTIONAL COMPONENT OVERRIDES (Feature 1.3) ----------------------------------------------------------- Terminal-specific component expressions: zero radii on buttons/cards/inputs and a subtle phosphor glow on cards instead of a drop shadow. ---------------------------------------------------------- */ --btn-radius: 0; --card-radius: 0; --input-radius: 0; --card-shadow: var(--glow-sm); --card-border: 1px solid var(--ink-faint); /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #111a19; --page-hero-ink: #4fe078; --page-band-bg: #0e1513; --page-band-ink: #4fe078; } :root[data-theme=terminal-light] { color-scheme: light; /* Surfaces — clear light gray paper */ --paper: #E8E8E8; --paper-raised: #F5F5F5; --paper-sunk: #D8D8D8; --paper-glass: rgba(232, 232, 232, 0.85); /* Ink — near-black mono */ --ink: #1A1A1A; --ink-soft: #404040; --ink-faint: #626161; --graphite: #0A0A0A; --muted: #696868; /* Hairlines — medium gray */ --guide: #B8B8B8; --guide-soft: #C8C8C8; --hair: #C0C0C0; --hair-soft: #D8D8D8; /* Primary accent — VS Code keyword blue */ --ai: #0451A5; --ai-ink: #023268; --ai-wash: rgba(4, 81, 165, 0.10); /* Seal — error red */ --shu: #B91C1C; --shu-wash: rgba(185, 28, 28, 0.10); /* Accent — warning amber */ --ochre: #B45309; --ochre-wash: rgba(180, 83, 9, 0.10); /* Code surface */ --code-bg: #DDD; --code-ink: #1A1A1A; --code-muted: #5b5a5a; --code-accent: #934407; --code-green: #006928; --code-blue: #0451A5; /* Typography — mono everywhere */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace; --font-sans: var(--font-mono); --font-serif: var(--font-mono); --font-display: var(--font-mono); --font-script: var(--font-mono); /* Radius — terminals are square */ --r-sm: 0; --r-md: 0; --r-lg: 0; /* Shadows — hairline rings */ --shadow-sm: 0 0 0 1px rgba(26, 26, 26, 0.08); --shadow-md: 0 0 0 1px rgba(26, 26, 26, 0.10), 0 1px 2px rgba(26, 26, 26, 0.06); --shadow-lg: 0 0 0 1px rgba(26, 26, 26, 0.12), 0 2px 4px rgba(26, 26, 26, 0.08); --shadow-xl: 0 0 0 1px rgba(26, 26, 26, 0.14), 0 4px 8px rgba(26, 26, 26, 0.10); --shadow-2xl: 0 0 0 1px rgba(26, 26, 26, 0.16), 0 8px 16px rgba(26, 26, 26, 0.12); /* Blur / glow — daylight, no emission */ --blur-sm: none; --blur-md: none; --blur-lg: none; --glow-sm: 0 0 0 transparent; --glow-md: 0 0 0 transparent; --glow-lg: 0 0 0 transparent; /* Motion — instant */ --duration-fast: 100ms; --duration-normal: 140ms; --duration-slow: 220ms; --ease: cubic-bezier(0.2, 0.0, 0.2, 1); /* Semantic aliases */ --background-default: var(--paper); --background-subtle: var(--paper-sunk); --background-navbar: var(--paper-raised); --surface-default: var(--paper); --surface-raised: var(--paper-raised); --surface-sunk: var(--paper-sunk); --surface-muted: var(--paper-sunk); --surface-subtle: var(--paper-raised); --surface-emphasis: var(--ink); --surface-glass: var(--paper-glass); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --text-tertiary: var(--muted); --text-inverse: var(--paper); --text-link: var(--ai); --text-link-hover: var(--ai-ink); --border-default: var(--hair); --border-subtle: var(--hair-soft); --border-emphasis: var(--ink); --border-focus: var(--ai); --interactive-hover: rgba(26, 26, 26, 0.05); --interactive-active: rgba(26, 26, 26, 0.10); --brand-primary: var(--ai); --brand-primary-hover: var(--ai-ink); --action-primary-default: var(--ai); --action-primary-hover: var(--ai-ink); --action-primary-active: var(--ai-ink); --action-primary-wash: var(--ai-wash); --action-secondary-default: var(--shu); --action-secondary-hover: var(--shu); --action-secondary-active: var(--shu); --action-secondary-wash: var(--shu-wash); --action-tertiary-default: var(--ochre); --action-tertiary-hover: var(--ochre); --action-tertiary-active: var(--ochre); --action-tertiary-wash: var(--ochre-wash); --feedback-info: var(--ai); --feedback-success: #083; --feedback-warning: var(--ochre); --feedback-error: var(--shu); --info-default: var(--ai); --info-subtle: rgba(4, 81, 165, 0.10); --info-text: var(--ai-ink); --success-default: #083; --success-subtle: rgba(0, 136, 51, 0.10); --success-text: #062; --warning-default: var(--ochre); --warning-subtle: rgba(180, 83, 9, 0.10); --warning-text: #92400E; --error-default: var(--shu); --error-subtle: rgba(185, 28, 28, 0.10); --error-text: #7F1D1D; /* Library scales */ /* Spacing rhythm — THE knob for how dense or airy this theme feels. The numbered scale is the source of truth: every component reads var(--space-N), and the t-shirt aliases (--space-md, --space-lg …) are emitted by the library as references to these, so they follow automatically. Change a value here and the whole page re-proportions. Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */ --space-unit: 0.125rem; --space-0: 0; --space-1: calc(var(--space-unit) * 4); --space-2: calc(var(--space-unit) * 6); --space-3: calc(var(--space-unit) * 7); --space-4: calc(var(--space-unit) * 8); --space-5: calc(var(--space-unit) * 12); --space-6: calc(var(--space-unit) * 16); --space-7: calc(var(--space-unit) * 24); --space-8: calc(var(--space-unit) * 32); --space-9: calc(var(--space-unit) * 48); --space-2xs: calc(var(--space-unit) * 2); /* T-shirt aliases - var() references into this theme's numbered scale, so re-tuning a numbered step re-tunes its alias automatically. */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-5); --space-xl: var(--space-6); --space-2xl: var(--space-7); --space-3xl: var(--space-8); --space-4xl: var(--space-9); --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; /* Component overrides — terminals are square, and that has to be true on all three files of the family. `terminal` and `terminal-dark` both declared these; this one did not, so a button on terminal-light took the library fallback and rounded. Found by check-theme-parity. */ --btn-radius: 0; --card-radius: 0; --input-radius: 0; --font-primary: var(--font-mono); --font-size-base: 15px; --line-height-normal: 1.5; --font-weight-medium: 500; --z-sticky: 1020; --z-dropdown: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */ --page-hero-bg: #dadfe4; --page-hero-ink: #1a1a1a; --page-band-bg: #e0e3e6; --page-band-ink: #1a1a1a; }