@orange-halo/tokens 1.0.0

package/dist/themes/dark.css

@@ -0,0 +1,127 @@
+/**
+ * Orange Halo Dark Theme
+ * Auto-generated - do not edit directly
+ * WCAG AA compliant color contrast ratios
+ */
+
+[data-theme='dark'] {
+  /* Honey gold (5.2:1 on walnut) */
+  --oh-color-brand-primary: #e8a838;
+  --oh-color-brand-primary-hover: #f0b848;
+  --oh-color-brand-primary-active: #d4922c;
+  --oh-color-brand-primary-subtle: #3d3229;
+  --oh-color-brand-primary-muted: #4a3d32;
+  --oh-color-brand-highlight: #f0c860;
+  --oh-color-brand-highlight-subtle: #3d3829;
+  /* Light teal (4.8:1) */
+  --oh-color-accent-default: #7aa3a4;
+  --oh-color-accent-hover: #8fb4b5;
+  --oh-color-accent-subtle: #2a3636;
+  --oh-color-accent-muted: #344242;
+  /* Light green (5.0:1) */
+  --oh-color-feedback-success: #7ab87c;
+  --oh-color-feedback-success-subtle: #2a3629;
+  /* Light red (5.0:1 on base, 5.0:1 on raised) */
+  --oh-color-feedback-error: #e08f8d;
+  --oh-color-feedback-error-subtle: #3d2a29;
+  /* Light amber (5.4:1) */
+  --oh-color-feedback-warning: #e8b050;
+  --oh-color-feedback-warning-subtle: #3d3529;
+  --oh-color-feedback-info: #7aa3a4;
+  --oh-color-feedback-info-subtle: #2a3636;
+  /* Deep walnut */
+  --oh-color-surface-base: #2a2420;
+  /* Warm dark card */
+  --oh-color-surface-raised: #3d3229;
+  /* Slightly warmer than raised — use with gradient overlay */
+  --oh-color-surface-sunlit: #44382c;
+  /* Darker inset */
+  --oh-color-surface-inset: #1f1a17;
+  /* Flips to warm white in dark */
+  --oh-color-surface-white: #f5f0e8;
+  --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
+  /* Distinct hover — lighter than raised */
+  --oh-color-surface-hover: #4a3f33;
+  --oh-color-surface-active-pressed: #352e28;
+  --oh-color-surface-disabled: #352e28;
+  /* 3.7:1 on base, 3.0:1 on raised — passes WCAG 1.4.11 */
+  --oh-color-border-default: #8a7a68;
+  /* Decorative dividers only — below 3:1, not for UI component boundaries */
+  --oh-color-border-subtle: #6b5d4d;
+  /* 4.9:1 on base, 4.0:1 on raised — inputs, secondary buttons */
+  --oh-color-border-emphasis: #a09080;
+  --oh-color-border-focus: #e8a838;
+  --oh-color-border-brand: rgba(232, 168, 56, 0.3);
+  /* Warm white (12.4:1) */
+  --oh-color-text-primary: #f5f0e8;
+  /* Dune (6.8:1) */
+  --oh-color-text-secondary: #c9c1b4;
+  --oh-color-text-disabled: #6b5d4d;
+  --oh-color-text-inverse: #2a2420;
+  --oh-color-text-link: #e8a838;
+  --oh-color-text-link-hover: #f0b848;
+  /* Dark text on light brand bg (7.5:1) */
+  --oh-color-text-on-brand: #2a2420;
+  /* Dark text on light accent bg (5.8:1) */
+  --oh-color-text-on-accent: #2a2420;
+  --oh-focus-ring-color: rgba(232, 168, 56, 0.4);
+  --oh-focus-glow-color: rgba(232, 168, 56, 0.2);
+  --oh-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+  --oh-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
+  --oh-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
+  /* Chunky input shadow */
+  --oh-shadow-chunky-inset: inset 3px 3px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Automatic dark mode based on system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --oh-color-brand-primary: #e8a838;
+    --oh-color-brand-primary-hover: #f0b848;
+    --oh-color-brand-primary-active: #d4922c;
+    --oh-color-brand-primary-subtle: #3d3229;
+    --oh-color-brand-primary-muted: #4a3d32;
+    --oh-color-brand-highlight: #f0c860;
+    --oh-color-brand-highlight-subtle: #3d3829;
+    --oh-color-accent-default: #7aa3a4;
+    --oh-color-accent-hover: #8fb4b5;
+    --oh-color-accent-subtle: #2a3636;
+    --oh-color-accent-muted: #344242;
+    --oh-color-feedback-success: #7ab87c;
+    --oh-color-feedback-success-subtle: #2a3629;
+    --oh-color-feedback-error: #e08f8d;
+    --oh-color-feedback-error-subtle: #3d2a29;
+    --oh-color-feedback-warning: #e8b050;
+    --oh-color-feedback-warning-subtle: #3d3529;
+    --oh-color-feedback-info: #7aa3a4;
+    --oh-color-feedback-info-subtle: #2a3636;
+    --oh-color-surface-base: #2a2420;
+    --oh-color-surface-raised: #3d3229;
+    --oh-color-surface-sunlit: #44382c;
+    --oh-color-surface-inset: #1f1a17;
+    --oh-color-surface-white: #f5f0e8;
+    --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
+    --oh-color-surface-hover: #4a3f33;
+    --oh-color-surface-active-pressed: #352e28;
+    --oh-color-surface-disabled: #352e28;
+    --oh-color-border-default: #8a7a68;
+    --oh-color-border-subtle: #6b5d4d;
+    --oh-color-border-emphasis: #a09080;
+    --oh-color-border-focus: #e8a838;
+    --oh-color-border-brand: rgba(232, 168, 56, 0.3);
+    --oh-color-text-primary: #f5f0e8;
+    --oh-color-text-secondary: #c9c1b4;
+    --oh-color-text-disabled: #6b5d4d;
+    --oh-color-text-inverse: #2a2420;
+    --oh-color-text-link: #e8a838;
+    --oh-color-text-link-hover: #f0b848;
+    --oh-color-text-on-brand: #2a2420;
+    --oh-color-text-on-accent: #2a2420;
+    --oh-focus-ring-color: rgba(232, 168, 56, 0.4);
+    --oh-focus-glow-color: rgba(232, 168, 56, 0.2);
+    --oh-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    --oh-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
+    --oh-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
+    --oh-shadow-chunky-inset: inset 3px 3px 0 0 rgba(0, 0, 0, 0.2);
+  }
+}

package/dist/themes/light.css

@@ -0,0 +1,46 @@
+/**
+ * Orange Halo Light Theme
+ * Auto-generated - do not edit directly
+ * WCAG AA compliant color contrast ratios
+ */
+
+:root, [data-theme='light'] {
+  --oh-color-brand-primary: #c54300;
+  --oh-color-brand-primary-hover: #9e3500;
+  --oh-color-brand-primary-active: #9e3500;
+  --oh-color-brand-primary-subtle: #fff3e0;
+  --oh-color-brand-primary-muted: #ffe0b2;
+  --oh-color-brand-highlight: #e8a838;
+  --oh-color-brand-highlight-subtle: #fdf3d4;
+  --oh-color-accent-default: #5f8a8b;
+  --oh-color-accent-hover: #4d7172;
+  --oh-color-accent-subtle: #f0f6f6;
+  --oh-color-accent-muted: #e0ebeb;
+  --oh-color-feedback-success: #4a8a4c;
+  --oh-color-feedback-success-subtle: #f0f7f1;
+  --oh-color-feedback-error: #b54540;
+  --oh-color-feedback-error-subtle: #fdf4f3;
+  --oh-color-feedback-warning: #8c5e1c;
+  --oh-color-feedback-warning-subtle: #fefaee;
+  --oh-color-feedback-info: #4d7172;
+  --oh-color-feedback-info-subtle: #f0f6f6;
+  --oh-color-surface-base: #faf7f2;
+  --oh-color-surface-raised: #f5f0e8;
+  --oh-color-surface-sunlit: #faf7f2;
+  --oh-color-surface-inset: #ede8df;
+  --oh-color-surface-overlay: rgba(61, 50, 41, 0.4);
+  --oh-color-surface-disabled: #e2dcd2;
+  --oh-color-border-default: #e2dcd2;
+  --oh-color-border-subtle: #ede8df;
+  --oh-color-border-emphasis: #c9c1b4;
+  --oh-color-border-focus: #c54300;
+  --oh-color-border-brand: rgba(197, 67, 0, 0.25);
+  --oh-color-text-primary: #3d3229;
+  --oh-color-text-secondary: #6b5d4d;
+  --oh-color-text-disabled: #c9c1b4;
+  --oh-color-text-inverse: #faf7f2;
+  --oh-color-text-link: #c54300;
+  --oh-color-text-link-hover: #9e3500;
+  --oh-focus-ring-color: rgba(197, 67, 0, 0.35);
+  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
+}

package/dist/tokens.css

@@ -0,0 +1,399 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --oh-color-orange-50: #fff3e0;
+  --oh-color-orange-100: #ffe0b2;
+  --oh-color-orange-200: #ffcc80;
+  --oh-color-orange-300: #ffb74d;
+  --oh-color-orange-400: #ffa726;
+  --oh-color-orange-500: #ff9800;
+  --oh-color-orange-600: #fb8c00;
+  --oh-color-orange-700: #f57c00;
+  --oh-color-orange-800: #ef6c00;
+  --oh-color-orange-900: #c54300; /** Primary brand — WCAG AA (4.5:1) */
+  --oh-color-orange-950: #9e3500; /** Hover/active state — WCAG AA (7.2:1) */
+  --oh-color-honey-50: #fefaee;
+  --oh-color-honey-100: #fdf3d4;
+  --oh-color-honey-200: #fbe7a8;
+  --oh-color-honey-300: #f8d56f;
+  --oh-color-honey-400: #e8a838; /** Signature honey */
+  --oh-color-honey-500: #d4922c;
+  --oh-color-honey-600: #b87a24;
+  --oh-color-honey-700: #8c5e1c; /** WCAG AA (5.2:1) */
+  --oh-color-honey-800: #6b4815;
+  --oh-color-terracotta-50: #fbf5f0;
+  --oh-color-terracotta-100: #f5e8de;
+  --oh-color-terracotta-200: #e8cdbf;
+  --oh-color-terracotta-300: #d4a88f;
+  --oh-color-terracotta-400: #bf8060;
+  --oh-color-terracotta-500: #a0522d; /** Signature terracotta — WCAG AA (5.3:1) */
+  --oh-color-terracotta-600: #8b4726;
+  --oh-color-terracotta-700: #6f3920;
+  --oh-color-terracotta-800: #5a2f1a;
+  --oh-color-terracotta-900: #452414;
+  --oh-color-eucalyptus-50: #f0f6f6;
+  --oh-color-eucalyptus-100: #e0ebeb;
+  --oh-color-eucalyptus-200: #c2d7d7;
+  --oh-color-eucalyptus-300: #9ebebe;
+  --oh-color-eucalyptus-400: #7aa3a4;
+  --oh-color-eucalyptus-500: #5f8a8b; /** Signature eucalyptus — WCAG AA (4.5:1) */
+  --oh-color-eucalyptus-600: #4d7172;
+  --oh-color-eucalyptus-700: #3f5c5d; /** WCAG AA (6.2:1) */
+  --oh-color-eucalyptus-800: #344a4b;
+  --oh-color-eucalyptus-900: #2a3c3d;
+  --oh-color-warm-cream: #faf7f2; /** Base background — warm off-white */
+  --oh-color-warm-linen: #f5f0e8; /** Raised surface */
+  --oh-color-warm-parchment: #ede8df; /** Inset surface */
+  --oh-color-warm-sand: #e2dcd2; /** Borders, dividers */
+  --oh-color-warm-dune: #c9c1b4; /** Muted elements */
+  --oh-color-warm-driftwood: #6b5d4d; /** Secondary text — WCAG AA (4.8:1) */
+  --oh-color-warm-bark: #52463a; /** Emphasis text (6.8:1) */
+  --oh-color-warm-walnut: #3d3229; /** Primary text — WCAG AA (8.2:1) */
+  --oh-color-green-50: #f0f7f1;
+  --oh-color-green-100: #d9edd9;
+  --oh-color-green-500: #5a9a5c;
+  --oh-color-green-600: #4a8a4c; /** WCAG AA (4.5:1) */
+  --oh-color-green-700: #3d7340;
+  --oh-color-red-50: #fdf4f3;
+  --oh-color-red-100: #f9e0dc;
+  --oh-color-red-500: #c75450;
+  --oh-color-red-600: #b54540; /** WCAG AA (4.8:1) */
+  --oh-color-red-700: #943836; /** Hover/active state */
+  --oh-color-blue-50: #eef4f9;
+  --oh-color-blue-100: #d6e4f0;
+  --oh-color-blue-200: #a0b4c8;
+  --oh-color-blue-300: #7a9ab8;
+  --oh-color-blue-400: #5a82a8;
+  --oh-color-blue-500: #3d5a80; /** Signature blue — WCAG AA (5.5:1) */
+  --oh-color-blue-600: #354f70; /** Hover state */
+  --oh-color-blue-700: #2e4460; /** Active state */
+  --oh-color-blue-800: #253850;
+  --oh-color-white: #ffffff; /** Pure white for inputs/highlights */
+  --oh-color-surface-overlay: rgba(61, 50, 41, 0.4); /** Modal backdrop — warm */
+  --oh-color-surface-hover: #fff4e6; /** Warm hover tint */
+  --oh-color-surface-active-pressed: #f0ebe3; /** Active/pressed surface */
+  --oh-color-border-brand: rgba(197, 67, 0, 0.25); /** Brand-tinted border */
+  --oh-font-family-sans: 'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  --oh-font-family-display: 'Bricolage Grotesque', 'General Sans', sans-serif;
+  --oh-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  --oh-font-size-xs: 0.75rem; /** 12px */
+  --oh-font-size-sm: 0.875rem; /** 14px */
+  --oh-font-size-base: 1rem; /** 16px */
+  --oh-font-size-lg: 1.125rem; /** 18px */
+  --oh-font-size-xl: 1.25rem; /** 20px */
+  --oh-font-size-2xl: 1.625rem; /** 26px */
+  --oh-font-size-3xl: 2rem; /** 32px */
+  --oh-font-size-4xl: 2.625rem; /** 42px */
+  --oh-font-size-5xl: 3.25rem; /** 52px */
+  --oh-font-weight-normal: 400;
+  --oh-font-weight-medium: 500;
+  --oh-font-weight-semibold: 600;
+  --oh-font-weight-bold: 700;
+  --oh-font-line-height-none: 1;
+  --oh-font-line-height-tight: 1.25;
+  --oh-font-line-height-snug: 1.35;
+  --oh-font-line-height-normal: 1.5;
+  --oh-font-line-height-relaxed: 1.65;
+  --oh-font-line-height-loose: 1.8;
+  --oh-font-letter-spacing-tighter: -0.02em;
+  --oh-font-letter-spacing-tight: -0.01em;
+  --oh-font-letter-spacing-normal: 0;
+  --oh-font-letter-spacing-wide: 0.01em;
+  --oh-font-letter-spacing-wider: 0.02em;
+  --oh-spacing-0: 0;
+  --oh-spacing-1: 0.25rem; /** 4px */
+  --oh-spacing-2: 0.5rem; /** 8px */
+  --oh-spacing-3: 0.75rem; /** 12px */
+  --oh-spacing-4: 1rem; /** 16px */
+  --oh-spacing-5: 1.25rem; /** 20px */
+  --oh-spacing-6: 1.5rem; /** 24px */
+  --oh-spacing-7: 1.75rem; /** 28px */
+  --oh-spacing-8: 2rem; /** 32px */
+  --oh-spacing-10: 2.5rem; /** 40px */
+  --oh-spacing-12: 3rem; /** 48px */
+  --oh-spacing-16: 4rem; /** 64px */
+  --oh-spacing-20: 5rem; /** 80px */
+  --oh-spacing-px: 1px;
+  --oh-spacing-0-5: 0.125rem; /** 2px */
+  --oh-spacing-1-5: 0.375rem; /** 6px */
+  --oh-spacing-2-5: 0.625rem; /** 10px */
+  --oh-spacing-3-5: 0.875rem; /** 14px */
+  --oh-radius-none: 0;
+  --oh-radius-xs: 4px; /** Small details, chips */
+  --oh-radius-sm: 6px; /** Buttons, inputs */
+  --oh-radius-md: 10px; /** Cards, panels */
+  --oh-radius-lg: 14px; /** Modals, large containers */
+  --oh-radius-xl: 20px; /** Hero elements */
+  --oh-radius-full: 9999px; /** Avatars, pills */
+  --oh-shadow-none: none;
+  --oh-shadow-soft: 0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08); /** Cards, raised elements */
+  --oh-shadow-medium: 0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06); /** Dropdowns, popovers */
+  --oh-shadow-strong: 0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06); /** Modals, dialogs */
+  --oh-shadow-glow: 0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1); /** Focus ring — warm and friendly */
+  --oh-shadow-inset: inset 0 1px 3px rgba(61, 50, 41, 0.08); /** Inputs, wells */
+  --oh-shadow-chunky-primary: #e8c4a0; /** Warm peach for primary buttons */
+  --oh-shadow-chunky-secondary: #d4c4b0; /** Neutral tan for secondary/form elements */
+  --oh-shadow-chunky-accent: #a0b4c8; /** Cool blue-gray for accent buttons */
+  --oh-shadow-chunky-error: rgba(181, 69, 64, 0.3); /** Error state shadow */
+  --oh-gradient-sunlit: linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%); /** Gentle warmth for surfaces */
+  --oh-gradient-warm: linear-gradient(135deg, #C54300 0%, #FF9800 100%); /** Brand emphasis */
+  --oh-gradient-nostalgic: linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%); /** Subtle retro depth */
+  --oh-motion-duration-quick: 100ms; /** Micro-interactions (color shifts) */
+  --oh-motion-duration-snappy: 150ms; /** Button/input transitions */
+  --oh-motion-duration-gentle: 200ms; /** Standard interactions (hover, focus) */
+  --oh-motion-duration-relaxed: 300ms; /** Larger transitions (panels) */
+  --oh-motion-duration-slow: 400ms; /** Emphasis animations */
+  --oh-motion-easing-gentle: cubic-bezier(0.4, 0, 0.2, 1); /** Default — smooth and natural */
+  --oh-motion-easing-out: cubic-bezier(0, 0, 0.2, 1); /** Enters and reveals */
+  --oh-motion-easing-in: cubic-bezier(0.4, 0, 1, 1); /** Exits */
+  --oh-motion-easing-playful: cubic-bezier(0.34, 1.3, 0.64, 1); /** Celebrations — slight overshoot */
+  --oh-border-width-0: 0;
+  --oh-border-width-1: 1px;
+  --oh-border-width-2: 2px;
+  --oh-z-index-0: 0;
+  --oh-z-index-10: 10;
+  --oh-z-index-20: 20;
+  --oh-z-index-dropdown: 1000;
+  --oh-z-index-sticky: 1100;
+  --oh-z-index-modal: 1200;
+  --oh-z-index-popover: 1300;
+  --oh-z-index-tooltip: 1400;
+  --oh-focus-ring-width: 3px;
+  --oh-focus-ring-color: rgba(197, 67, 0, 0.35);
+  --oh-focus-glow-color: rgba(197, 67, 0, 0.15);
+  --oh-button-base-border-width: 2.5px;
+  --oh-button-size-sm-min-height: 36px;
+  --oh-button-size-md-min-height: 44px;
+  --oh-button-size-lg-min-height: 52px;
+  --oh-button-focus-ring-width: 3px;
+  --oh-input-base-border-width: 2.5px;
+  --oh-input-size-md-min-height: 48px;
+  --oh-link-text-decoration: underline;
+  --oh-link-text-decoration-hover: none;
+  --oh-color-brand-primary: var(--oh-color-orange-900); /** Primary brand action — WCAG AA */
+  --oh-color-brand-primary-hover: var(--oh-color-orange-950); /** Hover state */
+  --oh-color-brand-primary-active: var(--oh-color-orange-950); /** Active/pressed state */
+  --oh-color-brand-primary-subtle: var(--oh-color-orange-50); /** Subtle tint */
+  --oh-color-brand-primary-muted: var(--oh-color-orange-100); /** Background tint */
+  --oh-color-brand-highlight: var(--oh-color-honey-400); /** Golden accent */
+  --oh-color-brand-highlight-subtle: var(--oh-color-honey-100);
+  --oh-color-accent-default: var(--oh-color-blue-500); /** Signature blue accent */
+  --oh-color-accent-hover: var(--oh-color-blue-600);
+  --oh-color-accent-active: var(--oh-color-blue-700);
+  --oh-color-accent-subtle: var(--oh-color-blue-50);
+  --oh-color-accent-muted: var(--oh-color-blue-100);
+  --oh-color-accent-shadow: var(--oh-color-blue-200); /** Chunky shadow for accent */
+  --oh-color-feedback-success: var(--oh-color-green-600);
+  --oh-color-feedback-success-subtle: var(--oh-color-green-50);
+  --oh-color-feedback-success-muted: var(--oh-color-green-100);
+  --oh-color-feedback-error: var(--oh-color-red-600);
+  --oh-color-feedback-error-hover: var(--oh-color-red-700); /** Error hover/active state */
+  --oh-color-feedback-error-subtle: var(--oh-color-red-50);
+  --oh-color-feedback-error-muted: var(--oh-color-red-100);
+  --oh-color-feedback-error-shadow: var(--oh-shadow-chunky-error); /** Error shadow color */
+  --oh-color-feedback-warning: var(--oh-color-honey-700);
+  --oh-color-feedback-warning-subtle: var(--oh-color-honey-50);
+  --oh-color-feedback-warning-muted: var(--oh-color-honey-100);
+  --oh-color-feedback-info: var(--oh-color-blue-500);
+  --oh-color-feedback-info-subtle: var(--oh-color-blue-50);
+  --oh-color-feedback-info-muted: var(--oh-color-blue-100);
+  --oh-color-surface-base: var(--oh-color-warm-cream); /** Page background — warm off-white */
+  --oh-color-surface-raised: var(--oh-color-warm-linen); /** Cards, panels — slight lift */
+  --oh-color-surface-sunlit: var(--oh-color-warm-cream); /** Featured — use with gradient */
+  --oh-color-surface-inset: var(--oh-color-warm-parchment); /** Inputs, wells — pressed in */
+  --oh-color-surface-white: var(--oh-color-white); /** Pure white for focus/highlight states */
+  --oh-color-surface-disabled: var(--oh-color-warm-sand); /** Quiet disabled */
+  --oh-color-border-default: var(--oh-color-warm-sand); /** Standard border */
+  --oh-color-border-subtle: var(--oh-color-warm-parchment); /** Subtle dividers */
+  --oh-color-border-emphasis: var(--oh-color-warm-driftwood); /** Strong border for form elements */
+  --oh-color-border-hover: var(--oh-color-terracotta-600); /** Hover border — darker for feedback */
+  --oh-color-border-focus: var(--oh-color-orange-900); /** Focus ring — warm orange */
+  --oh-color-border-focus-inner: var(--oh-color-orange-900); /** Inner focus ring */
+  --oh-color-border-disabled: var(--oh-color-warm-parchment);
+  --oh-color-text-primary: var(--oh-color-warm-walnut); /** Primary text — warm brown */
+  --oh-color-text-secondary: var(--oh-color-warm-driftwood); /** Secondary text */
+  --oh-color-text-disabled: var(--oh-color-warm-dune); /** Disabled text */
+  --oh-color-text-inverse: var(--oh-color-warm-cream); /** On dark backgrounds */
+  --oh-color-text-link: var(--oh-color-orange-900); /** Link text */
+  --oh-color-text-link-hover: var(--oh-color-orange-950); /** Link hover */
+  --oh-color-text-brand: var(--oh-color-orange-900);
+  --oh-color-text-on-brand: var(--oh-color-white); /** Light text on dark brand bg */
+  --oh-color-text-on-accent: var(--oh-color-white); /** Light text on dark accent bg */
+  --oh-spacing-layout-page: var(--oh-spacing-6);
+  --oh-spacing-layout-section: var(--oh-spacing-12);
+  --oh-spacing-layout-stack: var(--oh-spacing-5);
+  --oh-spacing-layout-inline: var(--oh-spacing-4);
+  --oh-spacing-component-xs: var(--oh-spacing-1-5);
+  --oh-spacing-component-sm: var(--oh-spacing-2-5);
+  --oh-spacing-component-md: var(--oh-spacing-3-5);
+  --oh-spacing-component-lg: var(--oh-spacing-5);
+  --oh-spacing-component-xl: var(--oh-spacing-7);
+  --oh-shadow-primary: var(--oh-shadow-chunky-primary); /** Primary buttons */
+  --oh-shadow-secondary: var(--oh-shadow-chunky-secondary); /** Secondary/form elements */
+  --oh-shadow-accent: var(--oh-shadow-chunky-accent); /** Accent buttons */
+  --oh-shadow-error: var(--oh-shadow-chunky-error); /** Error state */
+  --oh-motion-quick: var(--oh-motion-duration-quick);
+  --oh-motion-snappy: var(--oh-motion-duration-snappy);
+  --oh-motion-gentle: var(--oh-motion-duration-gentle);
+  --oh-motion-relaxed: var(--oh-motion-duration-relaxed);
+  --oh-motion-slow: var(--oh-motion-duration-slow);
+  --oh-motion-ease-gentle: var(--oh-motion-easing-gentle);
+  --oh-motion-ease-out: var(--oh-motion-easing-out);
+  --oh-motion-ease-playful: var(--oh-motion-easing-playful);
+  --oh-typography-heading-font-family: var(--oh-font-family-display);
+  --oh-typography-heading-h1-font-size: var(--oh-font-size-4xl);
+  --oh-typography-heading-h1-font-weight: var(--oh-font-weight-bold);
+  --oh-typography-heading-h1-line-height: var(--oh-font-line-height-tight);
+  --oh-typography-heading-h1-letter-spacing: var(--oh-font-letter-spacing-tighter);
+  --oh-typography-heading-h2-font-size: var(--oh-font-size-3xl);
+  --oh-typography-heading-h2-font-weight: var(--oh-font-weight-semibold);
+  --oh-typography-heading-h2-line-height: var(--oh-font-line-height-tight);
+  --oh-typography-heading-h2-letter-spacing: var(--oh-font-letter-spacing-tight);
+  --oh-typography-heading-h3-font-size: var(--oh-font-size-2xl);
+  --oh-typography-heading-h3-font-weight: var(--oh-font-weight-semibold);
+  --oh-typography-heading-h3-line-height: var(--oh-font-line-height-snug);
+  --oh-typography-heading-h3-letter-spacing: var(--oh-font-letter-spacing-tight);
+  --oh-typography-heading-h4-font-size: var(--oh-font-size-xl);
+  --oh-typography-heading-h4-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-heading-h4-line-height: var(--oh-font-line-height-snug);
+  --oh-typography-heading-h4-letter-spacing: var(--oh-font-letter-spacing-normal);
+  --oh-typography-heading-h5-font-size: var(--oh-font-size-lg);
+  --oh-typography-heading-h5-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-heading-h5-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-heading-h6-font-size: var(--oh-font-size-base);
+  --oh-typography-heading-h6-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-heading-h6-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-body-font-family: var(--oh-font-family-sans);
+  --oh-typography-body-lg-font-size: var(--oh-font-size-lg);
+  --oh-typography-body-lg-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-lg-line-height: var(--oh-font-line-height-relaxed);
+  --oh-typography-body-base-font-size: var(--oh-font-size-base);
+  --oh-typography-body-base-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-base-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-body-sm-font-size: var(--oh-font-size-sm);
+  --oh-typography-body-sm-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-sm-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-body-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-body-xs-font-size: var(--oh-font-size-xs);
+  --oh-typography-body-xs-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-xs-line-height: var(--oh-font-line-height-normal);
+  --oh-typography-body-xs-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-label-font-family: var(--oh-font-family-sans);
+  --oh-typography-label-base-font-size: var(--oh-font-size-sm);
+  --oh-typography-label-base-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-label-base-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
+  --oh-typography-label-base-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-label-sm-font-size: var(--oh-font-size-xs);
+  --oh-typography-label-sm-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-label-sm-line-height: var(--oh-font-line-height-normal); /** 1.5 for WCAG 1.4.12 */
+  --oh-typography-label-sm-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-code-font-family: var(--oh-font-family-mono);
+  --oh-typography-code-font-size: var(--oh-font-size-sm);
+  --oh-typography-code-line-height: var(--oh-font-line-height-normal);
+  --oh-shape-interactive: var(--oh-radius-sm); /** Buttons, inputs (6px) */
+  --oh-shape-container: var(--oh-radius-md); /** Cards, panels (10px) */
+  --oh-shape-large: var(--oh-radius-lg); /** Modals (14px) */
+  --oh-shape-small: var(--oh-radius-xs); /** Chips, tags (4px) */
+  --oh-shape-pill: var(--oh-radius-full); /** Badges, avatars */
+  --oh-elevation-none: var(--oh-shadow-none);
+  --oh-elevation-soft: var(--oh-shadow-soft); /** Cards, raised elements */
+  --oh-elevation-medium: var(--oh-shadow-medium); /** Dropdowns, popovers */
+  --oh-elevation-strong: var(--oh-shadow-strong); /** Modals, dialogs */
+  --oh-elevation-glow: var(--oh-shadow-glow); /** Focus ring */
+  --oh-elevation-inset: var(--oh-shadow-inset); /** Inputs, wells */
+  --oh-button-base-font-weight: var(--oh-font-weight-medium);
+  --oh-button-base-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-button-base-border-radius: var(--oh-radius-md);
+  --oh-button-size-sm-font-size: var(--oh-font-size-sm);
+  --oh-button-size-sm-padding-x: var(--oh-spacing-3);
+  --oh-button-size-sm-padding-y: var(--oh-spacing-2);
+  --oh-button-size-sm-gap: var(--oh-spacing-1-5);
+  --oh-button-size-md-font-size: var(--oh-font-size-sm);
+  --oh-button-size-md-padding-x: var(--oh-spacing-4);
+  --oh-button-size-md-padding-y: var(--oh-spacing-2-5);
+  --oh-button-size-md-gap: var(--oh-spacing-2);
+  --oh-button-size-lg-font-size: var(--oh-font-size-base);
+  --oh-button-size-lg-padding-x: var(--oh-spacing-6);
+  --oh-button-size-lg-padding-y: var(--oh-spacing-3-5);
+  --oh-button-size-lg-gap: var(--oh-spacing-2-5);
+  --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
+  --oh-button-focus-ring-color: var(--oh-focus-ring-color);
+  --oh-button-focus-glow-color: var(--oh-focus-glow-color);
+  --oh-input-base-font-family: var(--oh-font-family-sans);
+  --oh-input-base-font-size: var(--oh-font-size-lg);
+  --oh-input-base-line-height: var(--oh-font-line-height-normal);
+  --oh-input-base-border-radius: var(--oh-radius-md);
+  --oh-input-size-md-padding-x: var(--oh-spacing-4);
+  --oh-input-size-md-padding-y: var(--oh-spacing-3);
+  --oh-card-base-border-width: var(--oh-border-width-1);
+  --oh-card-base-padding: var(--oh-spacing-5);
+  --oh-card-interactive-background-hover: var(--oh-color-warm-cream);
+  --oh-card-interactive-border-color-hover: var(--oh-color-border-brand);
+  --oh-card-sunlit-background: var(--oh-gradient-sunlit);
+  --oh-card-sunlit-border-color: var(--oh-color-border-brand);
+  --oh-badge-base-font-family: var(--oh-font-family-sans);
+  --oh-badge-base-font-size: var(--oh-font-size-xs);
+  --oh-badge-base-font-weight: var(--oh-font-weight-medium);
+  --oh-badge-base-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-badge-base-padding-x: var(--oh-spacing-2-5);
+  --oh-badge-base-padding-y: var(--oh-spacing-1);
+  --oh-badge-variant-neutral-background: var(--oh-color-warm-parchment);
+  --oh-button-base-font-family: var(--oh-typography-label-font-family);
+  --oh-button-base-transition-duration: var(--oh-motion-snappy);
+  --oh-button-base-transition-easing: var(--oh-motion-ease-playful);
+  --oh-button-variant-primary-background: var(--oh-color-brand-primary);
+  --oh-button-variant-primary-background-hover: var(--oh-color-brand-primary-hover);
+  --oh-button-variant-primary-background-active: var(--oh-color-brand-primary-active);
+  --oh-button-variant-primary-color: var(--oh-color-surface-white);
+  --oh-button-variant-primary-border-color: var(--oh-color-brand-primary);
+  --oh-button-variant-primary-shadow-color: var(--oh-shadow-primary);
+  --oh-button-variant-secondary-background: var(--oh-color-surface-base);
+  --oh-button-variant-secondary-background-hover: var(--oh-color-surface-white);
+  --oh-button-variant-secondary-color: var(--oh-color-text-primary);
+  --oh-button-variant-secondary-border-color: var(--oh-color-border-emphasis);
+  --oh-button-variant-secondary-shadow-color: var(--oh-shadow-secondary);
+  --oh-button-variant-accent-background: var(--oh-color-accent-default);
+  --oh-button-variant-accent-background-hover: var(--oh-color-accent-hover);
+  --oh-button-variant-accent-background-active: var(--oh-color-accent-active);
+  --oh-button-variant-accent-color: var(--oh-color-surface-white);
+  --oh-button-variant-accent-border-color: var(--oh-color-accent-default);
+  --oh-button-variant-accent-shadow-color: var(--oh-color-accent-shadow);
+  --oh-input-base-transition-duration: var(--oh-motion-snappy);
+  --oh-input-base-transition-easing: var(--oh-motion-ease-gentle);
+  --oh-input-state-default-background: var(--oh-color-surface-base);
+  --oh-input-state-default-border-color: var(--oh-color-border-emphasis); /** WCAG 3:1 contrast for UI elements */
+  --oh-input-state-default-color: var(--oh-color-text-primary);
+  --oh-input-state-default-placeholder-color: var(--oh-color-text-secondary); /** WCAG readable placeholder */
+  --oh-input-state-default-shadow-color: var(--oh-shadow-secondary);
+  --oh-input-state-hover-border-color: var(--oh-color-border-hover);
+  --oh-input-state-focus-background: var(--oh-color-surface-white);
+  --oh-input-state-focus-border-color: var(--oh-color-border-focus);
+  --oh-input-state-focus-focus-ring-color: var(--oh-color-border-focus-inner);
+  --oh-input-state-error-border-color: var(--oh-color-feedback-error);
+  --oh-input-state-error-background: var(--oh-color-feedback-error-subtle);
+  --oh-input-state-error-shadow-color: var(--oh-shadow-error);
+  --oh-card-base-background: var(--oh-color-surface-raised);
+  --oh-card-base-border-radius: var(--oh-shape-container);
+  --oh-card-base-border-color: var(--oh-color-border-default);
+  --oh-card-base-shadow: var(--oh-elevation-soft);
+  --oh-card-interactive-transition-duration: var(--oh-motion-gentle);
+  --oh-card-interactive-transition-easing: var(--oh-motion-ease-gentle);
+  --oh-card-interactive-shadow-hover: var(--oh-elevation-medium);
+  --oh-card-sunlit-shadow: var(--oh-elevation-medium);
+  --oh-badge-base-border-radius: var(--oh-shape-pill);
+  --oh-badge-variant-brand-background: var(--oh-color-brand-primary-subtle);
+  --oh-badge-variant-brand-color: var(--oh-color-brand-primary);
+  --oh-badge-variant-accent-background: var(--oh-color-accent-subtle);
+  --oh-badge-variant-accent-color: var(--oh-color-accent-default);
+  --oh-badge-variant-success-background: var(--oh-color-feedback-success-subtle);
+  --oh-badge-variant-success-color: var(--oh-color-feedback-success);
+  --oh-badge-variant-error-background: var(--oh-color-feedback-error-subtle);
+  --oh-badge-variant-error-color: var(--oh-color-feedback-error);
+  --oh-badge-variant-warning-background: var(--oh-color-feedback-warning-subtle);
+  --oh-badge-variant-warning-color: var(--oh-color-feedback-warning);
+  --oh-badge-variant-neutral-color: var(--oh-color-text-secondary);
+  --oh-link-color: var(--oh-color-text-link);
+  --oh-link-color-hover: var(--oh-color-text-link-hover);
+}