css-is-awesome 1.1.0

package/public/themes/prism/theme.css

@@ -0,0 +1,159 @@
+@charset "UTF-8";
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
+:root, :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(#C1410C, #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(#15803d, #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-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: 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);
+}

package/public/themes/prism-dark/theme.css

@@ -0,0 +1,185 @@
+@charset "UTF-8";
+/* ============================================================
+   THEME — Prism Dark
+   -----------------------------------------------------------
+   Dark companion to Prism Light. Same Vercel/Linear/Radix UI
+   philosophy: neutral grays, refined blue accent (brighter
+   for dark surfaces), border-driven, tight radii.
+
+   Opt-in via `<html data-theme="prism-dark">`. Does not match
+   `:root` — pair with prism-light's theme.css to get a default
+   light mode and an opt-in dark mode in the same project.
+   ============================================================ */
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
+:root, :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-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 */
+  --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);
+}

package/public/themes/prism-light/theme.css

@@ -0,0 +1,188 @@
+@charset "UTF-8";
+/* ============================================================
+   THEME — Prism Light
+   -----------------------------------------------------------
+   Clean component-library aesthetic inspired by Vercel,
+   Linear, Radix UI, shadcn/ui. Neutral grays do the heavy
+   lifting, single restrained refined-blue accent,
+   border-driven (not shadow-driven), generous whitespace.
+
+   Long-term default theme for boilerplate-derived projects.
+   Pairs with `prism-dark` (separate file).
+
+   Sketchbook is css-is-awesome's brand theme. This is one
+   of the shipped consumer themes.
+   ============================================================ */
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
+:root, :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: #71717a;
+  --code-accent: #c2410c;
+  --code-green: #117C38;
+  --code-blue: #2563eb;
+  /* 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: #15803d;
+  /* 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-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 */
+  --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);
+}

package/public/themes/sketchbook/theme.css

@@ -0,0 +1,152 @@
+@charset "UTF-8";
+@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';
+:root, :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(#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;
+}