@warmio/design 1.0.0

package/theme.css

@@ -0,0 +1,592 @@
+/* ════════════════════════════════════════════════════════════════════════════
+   4-COLOR THEME SYSTEM
+
+   Theme definitions are in themes.css. This file contains the derivation system.
+
+   INPUT (defined per-theme in themes.css as hex colors):
+     --brand-primary   Main identity (buttons, links, primary actions)
+     --brand-accent    Complementary accent (secondary elements, highlights)
+     --brand-muted     Subtle tone (charts, badges, tertiary elements)
+     --brand-neutral   Base for surfaces (backgrounds, borders, text)
+
+   DERIVED:
+     All UI colors are derived from these 4 base colors using CSS relative
+     color syntax: oklch(from var(--color) l c h)
+
+   MODE: Light/dark controlled via .dark class
+
+   Semantic colors (success, warning, error, info) are FIXED because their
+   meanings are universal and culturally established.
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* Import theme definitions */
+@import './themes.css';
+
+:root {
+  /* ══════════════════════════════════════════════════════════════════════════
+     PRIMARY — From brand-primary
+     Main identity color for buttons, links, and primary actions.
+     ══════════════════════════════════════════════════════════════════════════ */
+  --primary: oklch(0.214 0.009 43.1);
+  --primary-foreground: oklch(0.986 0.002 67.8);
+  --ring: oklch(0.714 0.014 41.2);
+  --focus: oklch(0.714 0.014 41.2 / 0.5);
+  --active: oklch(0.214 0.009 43.1 / 0.18);
+  /* Unified focus ring base color for outline + pseudo ring */
+  --focus-ring: oklch(0.714 0.014 41.2);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     ACCENT — From brand-accent
+     Complementary color for secondary elements and highlights.
+     ══════════════════════════════════════════════════════════════════════════ */
+  --accent: oklch(0.96 0.002 17.2);
+  --accent-foreground: oklch(0.214 0.009 43.1);
+
+  /* Interactive hover background - single source of truth for all hover states */
+  --hover-bg: color-mix(in oklch, var(--foreground) 4%, transparent);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     SECONDARY — Derived from brand-primary (lighter, desaturated)
+     For secondary buttons and less prominent actions.
+     ══════════════════════════════════════════════════════════════════════════ */
+  --secondary: oklch(0.96 0.002 17.2);
+  --secondary-foreground: oklch(0.214 0.009 43.1);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     SURFACES — From brand-neutral
+     Backgrounds, cards, borders - subtle tinted neutrals.
+     ══════════════════════════════════════════════════════════════════════════ */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0 0);
+  --card: oklch(1 0 0);
+  --card-gradient-start: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.547 0 0);
+  --border: oklch(0.922 0 0);
+  --input: var(--border);
+
+  /* Alternating section backgrounds for marketing pages */
+  --section-alt: oklch(0.986 0 0);
+
+  /* Charts */
+  --chart-1: oklch(0.32 0 none);
+  --chart-2: oklch(0.41 0 none);
+  --chart-3: oklch(0.54 0 none);
+  --chart-4: oklch(0.71 0 none);
+  --chart-5: oklch(0.89 0 none);
+
+  /* Logo */
+  --logo-accent: var(--logo-primary);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+  SIDEBAR — Transparent to show body texture
+     ══════════════════════════════════════════════════════════════════════════ */
+  --sidebar: oklch(0.986 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.96 0 0);
+  --sidebar-accent-foreground: oklch(0.214 0.009 43.1);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.714 0.014 41.2);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     FIXED SEMANTIC COLORS
+     These are universal - green=success, amber=warning, red=error, blue=info
+     ══════════════════════════════════════════════════════════════════════════ */
+
+  /* Success = Green (H: 145) */
+  --success: oklch(0.65 0.16 145);
+  --success-text: oklch(0.35 0.16 145);
+  --success-bg-subtle: oklch(0.96 0.03 145);
+  --success-bg-muted: oklch(0.9 0.08 145);
+  --success-border: oklch(0.75 0.12 145);
+
+  /* Warning = Amber (H: 85) */
+  --warning: oklch(0.75 0.17 85);
+  --warning-text: oklch(0.35 0.17 85);
+  --warning-bg-subtle: oklch(0.96 0.03 85);
+  --warning-bg-muted: oklch(0.9 0.1 85);
+  --warning-border: oklch(0.75 0.12 85);
+  --warning-card-surface: color-mix(
+    in oklch,
+    var(--card) 82%,
+    oklch(from var(--warning) l calc(c + 0.08) h) 18%
+  );
+
+  /* Destructive/Error = Red (H: 30) */
+  --destructive: oklch(0.55 0.12 30);
+  --destructive-foreground: oklch(1 0 0);
+  --danger: var(--destructive);
+  --error-text: oklch(0.35 0.14 30);
+  --error-bg-subtle: oklch(0.96 0.02 30);
+  --error-bg-muted: oklch(0.9 0.06 30);
+  --error-border: oklch(0.75 0.08 30);
+  --danger-card-surface: color-mix(
+    in oklch,
+    var(--card) 98%,
+    oklch(from var(--destructive) l calc(c + 0.1) h) 2%
+  );
+
+  /* Info = Blue (H: 250) */
+  --info-text: oklch(0.35 0.1 250);
+  --info-bg-subtle: oklch(0.96 0.02 250);
+  --info-bg-muted: oklch(0.9 0.06 250);
+  --info-border: oklch(0.75 0.06 250);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     EFFECTS & OVERLAYS (Light Mode)
+     ══════════════════════════════════════════════════════════════════════════ */
+
+  --overlay-subtle: rgb(0 0 0 / 0.05);
+  --overlay-light: rgb(0 0 0 / 0.1);
+  --overlay-medium: rgb(0 0 0 / 0.2);
+  --overlay-strong: rgb(0 0 0 / 0.25);
+  --overlay-heavy: rgb(0 0 0 / 0.33);
+
+  --highlight-subtle: rgb(255 255 255 / 0.3);
+  --highlight-light: rgb(255 255 255 / 0.5);
+  --highlight-medium: rgb(255 255 255 / 0.8);
+  --highlight-strong: rgb(255 255 255 / 1);
+
+  --glass-background: rgb(0 0 0 / 0.02);
+  --glass-border: rgb(255 255 255 / 0.5);
+  --backdrop-blur: rgb(0 0 0 / 0.1);
+
+  /* Shadows */
+  --shadow-2xs: 0px 1px 2px 0px var(--overlay-subtle);
+  --shadow-xs: 0px 1px 2px 0px var(--overlay-subtle);
+  --shadow-sm: 0px 1px 2px 0px var(--overlay-light), 0px 1px 2px -1px var(--overlay-light);
+  --shadow: 0px 1px 2px 0px var(--overlay-light), 0px 1px 2px -1px var(--overlay-light);
+  --shadow-md: 0px 1px 2px 0px var(--overlay-light), 0px 2px 4px -1px var(--overlay-light);
+  --shadow-lg: 0px 1px 2px 0px var(--overlay-light), 0px 4px 6px -1px var(--overlay-light);
+  --shadow-xl: 0px 1px 2px 0px var(--overlay-light), 0px 8px 10px -1px var(--overlay-light);
+  --shadow-2xl: 0px 1px 2px 0px var(--overlay-strong);
+  --shadow-border:
+    0 0 0 1px var(--border), 0 1px 2px -1px var(--overlay-subtle), 0 2px 4px 0 var(--overlay-subtle);
+
+  /* ══════════════════════════════════════════════════════════════════════════
+     NON-COLOR TOKENS (shared across all themes)
+     ══════════════════════════════════════════════════════════════════════════ */
+
+  /* Typography — CSS variables (--font-sans, --font-serif, --font-mono, --font-display)
+     are defined in the shared font styles and consumed across the app runtime. */
+  --tracking-normal: 0em;
+
+  /* Spacing Scale */
+  --spacing: 0.25rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 0.75rem;
+  --spacing-lg: 1rem;
+  --spacing-xl: 1.5rem;
+  --spacing-2xl: 2rem;
+
+  /* Transitions */
+  --transition-fast: 100ms;
+  --transition-normal: 300ms;
+  --transition-slow: 600ms;
+  --chart-animation-duration: 1000ms;
+
+  /* Button Specific */
+  --button-padding-x-sm: 0.5rem;
+  --button-padding-y-sm: 0.25rem;
+  --button-padding-x-md: 0.75rem;
+  --button-padding-y-md: 0.5rem;
+  --button-padding-x-lg: 1rem;
+  --button-padding-y-lg: 0.75rem;
+  --button-font-size: 0.875rem;
+  --button-gap: 0.5rem;
+  --default-button-gradient-start: oklch(1 0 0);
+  --default-button-gradient-end: oklch(0.92 0 0);
+  --default-button-active: oklch(0.91 0 0);
+  --button-primary-bg: var(--primary);
+  --button-primary-foreground: var(--primary-foreground);
+  --button-primary-border: oklch(0 0 0 / 0.18);
+  --button-primary-hover: oklch(from var(--primary) calc(l + 0.08) c h);
+  --button-primary-active: oklch(from var(--primary) calc(l - 0.04) c h);
+
+  /* Form Specific */
+  --input-height: 2.25rem;
+  --input-height-sm: 2.5rem;
+  --input-padding-x: 0.75rem;
+  --input-padding-y: 0.5rem;
+  --input-border-width: 1px;
+  --input-font-size: 0.875rem;
+
+  /* Unified Control Heights */
+  --control-height-xs: 1.75rem;
+  --control-height-sm: 2.25rem;
+  --control-height-md: 2.5rem;
+  --control-height-lg: 2.75rem;
+
+  /* Table Density */
+  --table-padding-normal-x: 0.75rem;
+  --table-padding-normal-y: 0.75rem;
+  --table-padding-compact-x: 0.75rem;
+  --table-padding-compact-y: 0.5rem;
+  --table-header-padding-x: 0.75rem;
+  --table-header-padding-y: 0.5rem;
+
+  /* Card Specific */
+  --card-padding: 1rem;
+  --card-header-padding: 1.5rem;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* Interactive element radius — applied to buttons and form inputs */
+  --radius-interactive: 0.25rem;
+
+  /* Page Layout */
+  --page-padding-mobile: 0.5rem;
+  --page-padding-tablet: 1rem;
+  --page-padding-desktop: 1rem;
+  --page-gap: 1rem;
+  --header-height: 4rem;
+
+  /* Sidebar Dimensions */
+  --sidebar-width: 12.8rem;
+  --sidebar-width-mobile: 18rem;
+  --sidebar-width-icon: 3rem;
+
+  /* Breakpoint Variables */
+  --breakpoint-sm: theme('screens.sm');
+  --breakpoint-md: theme('screens.md');
+  --breakpoint-lg: theme('screens.lg');
+  --breakpoint-xl: theme('screens.xl');
+  --breakpoint-2xl: theme('screens.2xl');
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   DARK MODE
+   Inverts lightness calculations for surfaces and adjusts brand brightness
+   ════════════════════════════════════════════════════════════════════════════ */
+.dark {
+  /* ─── Surfaces (dark backgrounds from neutral) ─── */
+  --background: oklch(0.275 0 0);
+  --foreground: oklch(0.915 0 0);
+  --card: oklch(0.295 0 0);
+  --card-gradient-start: oklch(0.325 0 0);
+  --card-foreground: var(--foreground);
+  --muted: var(--card);
+  --muted-foreground: oklch(0.795 0 0 / 0.6);
+  --border: oklch(0.385 0 0);
+
+  /* Alternating section backgrounds - notably darker for visual distinction */
+  --section-alt: oklch(0.2 0 0);
+
+  /* ─── Primary (brighter for dark mode) ─── */
+  --primary: oklch(from var(--brand-primary) calc(l + 0.115) calc(c - 0.01) h);
+  --primary-foreground: var(--background);
+
+  /* ─── Secondary/Accent (adjusted for dark mode) ─── */
+  --secondary: oklch(from var(--brand-primary) calc(l - 0.22) calc(c - 0.03) h);
+  --secondary-foreground: var(--foreground);
+  --accent: oklch(from var(--brand-accent) calc(l + 0.08) calc(c - 0.02) h);
+  --accent-foreground: var(--foreground);
+
+  /* Default button gradient (dark) */
+  --default-button-gradient-start: oklch(0.4 0 0);
+  --default-button-gradient-end: oklch(0.3 0 0);
+  --default-button-active: oklch(0.15 0 0);
+  --button-primary-bg: oklch(0.99 0 0);
+  --button-primary-foreground: oklch(0.17 0 0);
+  --button-primary-border: oklch(1 0 0 / 0.18);
+  --button-primary-hover: oklch(1 0 0);
+  --button-primary-active: oklch(0.94 0 0);
+
+  /* Sidebar = solid dark surface */
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary-foreground: var(--background);
+  --sidebar-accent: oklch(0.34 0 0);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: oklch(0.36 0 0 / 0.55);
+  --sidebar-ring: oklch(0.52 0 0 / 0.45);
+
+  /* Charts */
+  --chart-1: oklch(1 0 none);
+  --chart-2: oklch(0.73 0 none);
+  --chart-3: oklch(0.51 0 none);
+  --chart-4: oklch(0.39 0 none);
+  --chart-5: oklch(0.32 0 none);
+
+  /* ─── Fixed Semantic (dark variants) ─── */
+  --success-text: oklch(0.7 0.14 145);
+  --success-bg-subtle: oklch(0.2 0.05 145);
+  --success-bg-muted: oklch(0.25 0.08 145);
+  --success-border: oklch(0.35 0.1 145);
+
+  --warning-text: oklch(0.7 0.15 85);
+  --warning-bg-subtle: oklch(0.2 0.05 85);
+  --warning-bg-muted: oklch(0.25 0.08 85);
+  --warning-border: oklch(0.35 0.12 85);
+  --warning-card-surface: color-mix(
+    in oklch,
+    var(--card) 80%,
+    oklch(from var(--warning) l calc(c + 0.06) h) 20%
+  );
+
+  --destructive-foreground: oklch(1 0 0);
+  --error-text: oklch(0.7 0.12 30);
+  --error-bg-subtle: oklch(0.2 0.05 30);
+  --error-bg-muted: oklch(0.25 0.06 30);
+  --error-border: oklch(0.35 0.08 30);
+  --danger-card-surface: color-mix(
+    in oklch,
+    var(--card) 92%,
+    oklch(from var(--destructive) l calc(c + 0.1) h) 8%
+  );
+
+  --info-text: oklch(0.7 0.08 250);
+  --info-bg-subtle: oklch(0.2 0.02 250);
+  --info-bg-muted: oklch(0.25 0.04 250);
+  --info-border: oklch(0.35 0.05 250);
+
+  /* ─── Effects (dark mode) ─── */
+  --overlay-subtle: rgb(0 0 0 / 0.2);
+  --overlay-light: rgb(0 0 0 / 0.3);
+  --overlay-medium: rgb(0 0 0 / 0.4);
+  --overlay-strong: rgb(0 0 0 / 0.5);
+  --overlay-heavy: rgb(0 0 0 / 0.6);
+
+  --highlight-subtle: rgb(255 255 255 / 0.08);
+  --highlight-light: rgb(255 255 255 / 0.1);
+  --highlight-medium: rgb(255 255 255 / 0.2);
+  --highlight-strong: rgb(255 255 255 / 0.5);
+
+  --glass-background: rgb(255 255 255 / 0.05);
+  --glass-border: rgb(255 255 255 / 0.08);
+  --backdrop-blur: rgb(0 0 0 / 0.33);
+
+  /* Shadows (stronger in dark) */
+  --shadow-2xs: 0px 1px 2px 0px var(--overlay-strong);
+  --shadow-xs: 0px 1px 2px 0px var(--overlay-strong);
+  --shadow-sm: 0px 1px 2px 0px var(--overlay-strong), 0px 1px 2px -1px var(--overlay-strong);
+  --shadow: 0px 1px 2px 0px var(--overlay-strong), 0px 1px 2px -1px var(--overlay-strong);
+  --shadow-md: 0px 1px 2px 0px var(--overlay-strong), 0px 2px 4px -1px var(--overlay-strong);
+  --shadow-lg: 0px 1px 2px 0px var(--overlay-strong), 0px 4px 6px -1px var(--overlay-strong);
+  --shadow-xl: 0px 1px 2px 0px var(--overlay-strong), 0px 8px 10px -1px var(--overlay-strong);
+  --shadow-2xl: 0px 1px 2px 0px var(--overlay-heavy);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   LIGHT MODE (explicit)
+   Used to force light mode within a dark context (e.g., kitchen sink demos)
+   ════════════════════════════════════════════════════════════════════════════ */
+.light {
+  /* ─── Surfaces (light backgrounds from neutral) ─── */
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0.35 0 0);
+  --card: oklch(0.998 0 0);
+  --card-gradient-start: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --muted: oklch(0.917 0 0);
+  --muted-foreground: oklch(0.532 0 0 / 0.8);
+  --border: oklch(0.852 0 0);
+
+  /* ─── Primary (standard for light mode) ─── */
+  --primary: var(--brand-primary);
+  --primary-foreground: oklch(1 0 0);
+
+  /* ─── Secondary/Accent ─── */
+  --secondary: oklch(from var(--brand-primary) calc(l + 0.27) calc(c - 0.025) h);
+  --secondary-foreground: oklch(from var(--brand-neutral) 0.35 0.015 h);
+  --accent: var(--brand-accent);
+  --accent-foreground: oklch(from var(--brand-neutral) 0.25 0.01 h);
+
+  /* Default button gradient (light) */
+  --default-button-gradient-start: oklch(1 0 0);
+  --default-button-gradient-end: oklch(0.92 0 0);
+  --default-button-active: oklch(0.91 0 0);
+
+  /* Charts */
+  --chart-1: var(--brand-primary);
+  --chart-2: var(--brand-accent);
+  --chart-3: var(--brand-muted);
+  --chart-4: oklch(from var(--brand-primary) calc(l + 0.12) calc(c - 0.01) h);
+  --chart-5: oklch(from var(--brand-accent) calc(l + 0.12) calc(c - 0.01) h);
+
+  /* ─── Fixed Semantic (light variants) ─── */
+  /* Darker text (L=0.35) for better contrast on light backgrounds */
+  --success-text: oklch(0.35 0.16 145);
+  --success-bg-subtle: oklch(0.96 0.03 145);
+  --success-bg-muted: oklch(0.9 0.08 145);
+  --success-border: oklch(0.75 0.12 145);
+
+  --warning-text: oklch(0.35 0.17 85);
+  --warning-bg-subtle: oklch(0.96 0.03 85);
+  --warning-bg-muted: oklch(0.9 0.1 85);
+  --warning-border: oklch(0.75 0.12 85);
+  --warning-card-surface: color-mix(
+    in oklch,
+    var(--card) 82%,
+    oklch(from var(--warning) l calc(c + 0.08) h) 18%
+  );
+
+  --destructive-foreground: oklch(1 0 0);
+  --error-text: oklch(0.35 0.14 30);
+  --error-bg-subtle: oklch(0.96 0.02 30);
+  --error-bg-muted: oklch(0.9 0.06 30);
+  --error-border: oklch(0.75 0.08 30);
+  --danger-card-surface: color-mix(
+    in oklch,
+    var(--card) 98%,
+    oklch(from var(--destructive) l calc(c + 0.1) h) 2%
+  );
+
+  --info-text: oklch(0.35 0.1 250);
+  --info-bg-subtle: oklch(0.96 0.02 250);
+  --info-bg-muted: oklch(0.9 0.06 250);
+  --info-border: oklch(0.75 0.06 250);
+
+  /* ─── Effects (light mode) ─── */
+  --overlay-subtle: rgb(0 0 0 / 0.05);
+  --overlay-light: rgb(0 0 0 / 0.1);
+  --overlay-medium: rgb(0 0 0 / 0.2);
+  --overlay-strong: rgb(0 0 0 / 0.25);
+  --overlay-heavy: rgb(0 0 0 / 0.33);
+
+  --highlight-subtle: rgb(255 255 255 / 0.3);
+  --highlight-light: rgb(255 255 255 / 0.5);
+  --highlight-medium: rgb(255 255 255 / 0.8);
+  --highlight-strong: rgb(255 255 255 / 1);
+
+  --glass-background: rgb(0 0 0 / 0.02);
+  --glass-border: rgb(255 255 255 / 0.5);
+  --backdrop-blur: rgb(0 0 0 / 0.1);
+
+  /* Shadows (light mode) */
+  --shadow-2xs: 0px 1px 2px 0px var(--overlay-subtle);
+  --shadow-xs: 0px 1px 2px 0px var(--overlay-subtle);
+  --shadow-sm: 0px 1px 2px 0px var(--overlay-light), 0px 1px 2px -1px var(--overlay-light);
+  --shadow: 0px 1px 2px 0px var(--overlay-light), 0px 1px 2px -1px var(--overlay-light);
+  --shadow-md: 0px 1px 2px 0px var(--overlay-light), 0px 2px 4px -1px var(--overlay-light);
+  --shadow-lg: 0px 1px 2px 0px var(--overlay-light), 0px 4px 6px -1px var(--overlay-light);
+  --shadow-xl: 0px 1px 2px 0px var(--overlay-light), 0px 8px 10px -1px var(--overlay-light);
+  --shadow-2xl: 0px 1px 2px 0px var(--overlay-strong);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   TAILWIND THEME MAPPING
+   ════════════════════════════════════════════════════════════════════════════ */
+@theme inline {
+  /* Core colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-logo-accent: var(--logo-accent);
+  --color-logo-gradient-start: var(--logo-gradient-start);
+  --color-logo-gradient-end: var(--logo-gradient-end);
+
+  /* Semantic color derivatives */
+  --color-success-text: var(--success-text);
+  --color-success-bg-subtle: var(--success-bg-subtle);
+  --color-success-bg-muted: var(--success-bg-muted);
+  --color-success-border: var(--success-border);
+  --color-error-text: var(--error-text);
+  --color-error-bg-subtle: var(--error-bg-subtle);
+  --color-error-bg-muted: var(--error-bg-muted);
+  --color-error-border: var(--error-border);
+  --color-warning-text: var(--warning-text);
+  --color-warning-bg-subtle: var(--warning-bg-subtle);
+  --color-warning-bg-muted: var(--warning-bg-muted);
+  --color-warning-border: var(--warning-border);
+  --color-info-text: var(--info-text);
+  --color-info-bg-subtle: var(--info-bg-subtle);
+  --color-info-bg-muted: var(--info-bg-muted);
+  --color-info-border: var(--info-border);
+
+  /* UI elements */
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-focus: var(--focus);
+  --color-active: var(--active);
+
+  /* Section alternating background */
+  --color-section-alt: var(--section-alt);
+
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Overlay & Effects */
+  --color-overlay-subtle: var(--overlay-subtle);
+  --color-overlay-light: var(--overlay-light);
+  --color-overlay-medium: var(--overlay-medium);
+  --color-overlay-strong: var(--overlay-strong);
+  --color-overlay-heavy: var(--overlay-heavy);
+  --color-highlight-subtle: var(--highlight-subtle);
+  --color-highlight-light: var(--highlight-light);
+  --color-highlight-medium: var(--highlight-medium);
+  --color-highlight-strong: var(--highlight-strong);
+  --color-glass-background: var(--glass-background);
+  --color-glass-border: var(--glass-border);
+  --color-backdrop-blur: var(--backdrop-blur);
+
+  /* Typography */
+  --font-heading: var(--font-heading);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+  --font-display: var(--font-display);
+  --font-editorial: var(--font-editorial-sans);
+  --font-marketing: var(--font-marketing-sans);
+
+  /* Border Radius */
+  --radius-xs: calc(var(--radius) - 0.375rem);
+  --radius-sm: calc(var(--radius) - 0.25rem);
+  --radius: var(--radius);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 0.25rem);
+  --radius-xl: calc(var(--radius) + 0.5rem);
+  --radius-interactive: var(--radius-interactive);
+
+  /* Shadows */
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}

package/themes.css

@@ -0,0 +1,48 @@
+/* ════════════════════════════════════════════════════════════════════════════
+   THEME DEFINITIONS — 4-Color System
+
+   Each theme defines 4 base colors that work together harmoniously.
+   The derivation system in theme.css uses these to calculate all UI colors.
+
+   REQUIRED (4 colors per theme):
+     --brand-primary   Main identity (buttons, links, primary actions)
+     --brand-accent    Complementary accent (secondary elements, highlights)
+     --brand-muted     Subtle tone (charts, badges, tertiary elements)
+     --brand-neutral   Base for surfaces (backgrounds, borders, text)
+
+   OPTIONAL:
+     --logo-gradient-start/end   Logo gradient colors
+
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   DEFAULT — Warm Fog
+   Subtle amber/brown warmth meets cool mauve/blue fog. Nearly neutral.
+   ───────────────────────────────────────────────────────────────────────────── */
+:root {
+  --brand-primary: #85807a;
+  --brand-accent: #7e7a8a;
+  --brand-muted: #848079;
+  --brand-neutral: #837f7c;
+  --logo-gradient-start: #85807a;
+  --logo-gradient-end: #7e7a8a;
+
+  /* Light Pillar effect colors */
+  --pillar-top: #9a8e82;
+  --pillar-bottom: #a89e94;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   OCEAN — Deep Blue
+   Cool blue primary with teal accents. Calm and professional.
+   ───────────────────────────────────────────────────────────────────────────── */
+[data-theme='ocean'] {
+  --brand-primary: #4a6fa5;
+  --brand-accent: #5a8a7a;
+  --brand-muted: #6b7f99;
+  --brand-neutral: #6e7a85;
+  --logo-gradient-start: #4a6fa5;
+  --logo-gradient-end: #5a8a7a;
+  --pillar-top: #6a8eb5;
+  --pillar-bottom: #7aa09a;
+}