css-is-awesome 1.1.0

package/scss/themes/sketchbook.scss

@@ -0,0 +1,178 @@
+// ============================================================================
+// THEME — Sketchbook
+// ============================================================================
+// css-is-awesome's brand identity. Warm paper, sumi ink, indigo accent,
+// vermilion seal. Hand-sketched personality with serif display + Caveat script.
+//
+// Light: warm off-paper newsprint. Dark: charcoal-paper studio at night.
+// Fonts, radii, motion are identical across modes — only colors and shadow
+// alphas differ. Pattern B.
+//
+// Selector: :root, :root[data-theme="sketchbook"]
+// Replaces: [data-theme="sketchbook-light"] + [data-theme="sketchbook-dark"]
+// ============================================================================
+@use '../mixins' as m;
+
+@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';
+
+@include m.theme('sketchbook') {
+  /* 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(#726858, #A89E89);
+  --graphite:  light-dark(#3A332B, #E8E0CE);
+  --muted:     light-dark(#948977, #7A715F);
+
+  /* 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-0: 0;          /* flush            */
+  --space-1: 0.5rem;     /* tight inner gap  */
+  --space-2: 0.75rem;    /* control padding  */
+  --space-3: 0.875rem;   /* (no t-shirt)     */
+  --space-4: 1rem;       /* default rhythm   */
+  --space-5: 1.5rem;     /* section gap      */
+  --space-6: 2rem;       /* block gap        */
+  --space-7: 3rem;       /* major gap        */
+  --space-8: 4rem;       /* page section     */
+  --space-9: 6rem;       /* hero rhythm      */
+
+  --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;
+}

package/scss/themes/terminal-dark.scss

@@ -0,0 +1,267 @@
+/* ============================================================
+   THEME — Terminal (VT100 CRT Phosphor)
+   -----------------------------------------------------------
+   This is the ONE FILE users swap to reskin their site.
+   Replace this file with any other theme.css to change the
+   entire look & feel. Tokens only — no component CSS lives here.
+
+   TOKEN CONTRACT
+   -----------------------------------------------------------
+   Every theme MUST declare every variable in this file, even
+   if it sets it to a neutral value (e.g. --blur-md: none;).
+   That's what guarantees a clean one-file swap.
+
+   Slots:
+     Surfaces : --paper, --paper-raised, --paper-sunk, --paper-glass
+     Ink      : --ink, --ink-soft, --ink-faint, --graphite, --muted
+     Lines    : --guide, --guide-soft, --hair, --hair-soft
+     Primary  : --ai, --ai-ink, --ai-wash           (cyan — terminal links)
+     Seal     : --shu, --shu-wash                    (error red)
+     Accent   : --ochre, --ochre-wash                (warning amber)
+     Code     : --code-bg/ink/muted/accent/green/blue
+     Type     : --font-display/script/serif/sans/mono
+     Radius   : --r-sm, --r-md, --r-lg
+     Shadow   : --shadow-sm, --shadow-md, --shadow-lg
+     Blur     : --blur-sm, --blur-md, --blur-lg     (glass only; else 'none')
+     Glow     : --glow-sm, --glow-md, --glow-lg     (emphasis / rim / phosphor)
+     Motion   : --duration-fast, --duration-normal, --duration-slow, --ease
+
+   FONT NOTE
+   -----------------------------------------------------------
+   A terminal has no serif and no handwritten script. To keep
+   the contract intact without breaking the mood, every font
+   slot — display, script, serif, sans, mono — points at
+   --font-mono. The contract survives; the CRT stays pure.
+   ============================================================ */
+
+@use '../mixins' as m;
+
+@import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap';
+
+@include m.theme('terminal-dark', 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:   #2A8B42;
+    --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:  #2A8B42;
+    --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-<key>), var(--radius-<key>),
+       var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
+       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-0: 0;          /* flush            */
+  --space-1: 0.5rem;     /* tight inner gap  */
+  --space-2: 0.75rem;    /* control padding  */
+  --space-3: 0.875rem;   /* (no t-shirt)     */
+  --space-4: 1rem;       /* default rhythm   */
+  --space-5: 1.5rem;     /* section gap      */
+  --space-6: 2rem;       /* block gap        */
+  --space-7: 3rem;       /* major gap        */
+  --space-8: 4rem;       /* page section     */
+  --space-9: 6rem;       /* hero rhythm      */
+
+
+
+
+
+    /* 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);
+}

package/scss/themes/terminal-light.scss

@@ -0,0 +1,175 @@
+// ============================================================================
+// THEME — Terminal Light (Daylight Editor)
+// ============================================================================
+// Daylight companion to Terminal Dark. Light gray paper, near-black mono ink,
+// classic light-syntax accents (blue keywords, green strings, orange numbers).
+// Mono everywhere, zero radii, no glow.
+//
+// Pattern A: explicit color-scheme: light. A separate identity from Terminal,
+// not a "light variant" of it — different selector, different consumer choice.
+//
+// Selector: :root, :root[data-theme="terminal-light"]
+// ============================================================================
+@use '../mixins' as m;
+
+@import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap';
+
+@include m.theme('terminal-light', 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: #666;
+  --graphite:  #0A0A0A;
+  --muted:     #7C7C7C;
+
+  /* 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:  #5B5B5B;
+  --code-accent: #934407;
+  --code-green:  #006A28;
+  --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-0: 0;          /* flush            */
+  --space-1: 0.5rem;     /* tight inner gap  */
+  --space-2: 0.75rem;    /* control padding  */
+  --space-3: 0.875rem;   /* (no t-shirt)     */
+  --space-4: 1rem;       /* default rhythm   */
+  --space-5: 1.5rem;     /* section gap      */
+  --space-6: 2rem;       /* block gap        */
+  --space-7: 3rem;       /* major gap        */
+  --space-8: 4rem;       /* page section     */
+  --space-9: 6rem;       /* hero rhythm      */
+
+  --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;
+}