@orange-halo/tokens 2.0.0 → 2.2.0

package/dist/brands/orange-halo.css

@@ -0,0 +1,512 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --oh-grid-unit: 8px; /** 8px grid with 4px half-steps */
+  --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 — 5.0:1 with white text, 4.7:1 on cream. Chosen for contrast: do not lighten. */
+  --oh-color-orange-950: #9e3500; /** Hover/active — 7.1:1 with white text, 6.6:1 on cream */
+  --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; /** 5.3:1 on cream */
+  --oh-color-honey-800: #6b4815;
+  --oh-color-honey-900: #3d3529; /** Dark theme warning tint */
+  --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; /** 3.6:1 on cream — UI and large text only */
+  --oh-color-eucalyptus-600: #4d7172;
+  --oh-color-eucalyptus-700: #3f5c5d; /** 6.8:1 on cream */
+  --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-dawn: #fffbf5; /** Sunlit gradient — top */
+  --oh-color-warm-shell: #fdf6ee; /** Sunlit gradient — middle */
+  --oh-color-warm-biscuit: #f8efe4; /** Sunlit gradient — bottom */
+  --oh-color-warm-parchment: #ede8df; /** Inset surface */
+  --oh-color-warm-sand: #e2dcd2; /** Borders, dividers */
+  --oh-color-warm-dune: #c9c1b4; /** Decorative only — 1.7:1 on cream, never for control borders */
+  --oh-color-warm-stone: #a09080; /** Dark theme control borders — 4.9:1 on cocoa */
+  --oh-color-warm-taupe: #8a7a68; /** Dark theme borders — 3.7:1 on cocoa, 3.0:1 on walnut */
+  --oh-color-warm-driftwood: #6b5d4d; /** Secondary text — 6.0:1 on cream */
+  --oh-color-warm-bark: #52463a; /** Emphasis text — 8.6:1 on cream */
+  --oh-color-warm-hickory: #4a3f33; /** Dark theme hover and highlight surface */
+  --oh-color-warm-chestnut: #44382c; /** Dark theme sunlit surface */
+  --oh-color-warm-walnut: #3d3229; /** Primary text — 11.7:1 on cream. Dark theme raised surface */
+  --oh-color-warm-mocha: #352e28; /** Dark theme pressed and disabled surface */
+  --oh-color-warm-cocoa: #2a2420; /** Dark theme page background */
+  --oh-color-warm-espresso: #1f1a17; /** Dark theme inset surface */
+  --oh-color-green-50: #f0f7f1;
+  --oh-color-green-100: #d9edd9;
+  --oh-color-green-300: #7ab87c; /** Dark theme success — 6.5:1 with cocoa text */
+  --oh-color-green-500: #5a9a5c;
+  --oh-color-green-600: #4a8a4c; /** 3.9:1 on cream — icons and UI only, not text */
+  --oh-color-green-700: #3d7340; /** Success text — 5.3:1 on cream, 5.2:1 on green.50 */
+  --oh-color-green-900: #2a3629; /** Dark theme success tint */
+  --oh-color-red-50: #fdf4f3;
+  --oh-color-red-100: #f9e0dc;
+  --oh-color-red-300: #e08f8d; /** Dark theme error — 6.2:1 with cocoa text */
+  --oh-color-red-500: #c75450;
+  --oh-color-red-600: #b54540; /** 5.1:1 on cream */
+  --oh-color-red-700: #943836; /** Hover/active state */
+  --oh-color-red-900: #3d2a29; /** Dark theme error tint */
+  --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 accent — 7.1:1 with white text, 6.6:1 on cream */
+  --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-surface-sheen: rgba(255, 255, 255, 0.5); /** Light glaze at the top of card headers, fading to transparent */
+  --oh-color-surface-backdrop: rgba(61, 50, 41, 0.6); /** Modal backdrop — darker than surface.overlay so the dialog stands out */
+  --oh-color-border-brand: rgba(197, 67, 0, 0.25); /** Brand-tinted border */
+  --oh-color-border-brand-hover: rgba(197, 67, 0, 0.35); /** Brand-tinted border on hover. Decorative container edge — not a focus or control border */
+  --oh-color-border-divider: rgba(226, 213, 200, 0.6); /** Decorative divider inside a container, such as a card's header and footer */
+  --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-base: 1rem; /** 16px */
+  --oh-font-size-lg: 1.25rem; /** 20px */
+  --oh-font-size-xl: 1.5rem; /** 24px */
+  --oh-font-size-2xl: 1.75rem; /** 28px */
+  --oh-font-size-3xl: 2rem; /** 32px */
+  --oh-font-size-4xl: 2.5rem; /** 40px */
+  --oh-font-size-5xl: 3rem; /** 48px */
+  --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-font-letter-spacing-widest: 0.05em; /** Uppercase labels: hero eyebrows, footer headings */
+  --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; /** Blue offset shadow for accent buttons — decorative */
+  --oh-shadow-chunky-error: rgba(181, 69, 64, 0.3); /** Error state shadow */
+  --oh-shadow-chunky-driftwood: rgba(107, 93, 77, 0.15); /** Translucent driftwood, for offset shadows on cream */
+  --oh-shadow-chunky-driftwood-hover: rgba(107, 93, 77, 0.2); /** A step darker, for the lifted state */
+  --oh-shadow-chunky-driftwood-deep: rgba(107, 93, 77, 0.25); /** For dialogs, which sit above everything */
+  --oh-shadow-chunky-walnut: rgba(61, 50, 41, 0.15); /** Translucent walnut, for the inset shadow inside fields */
+  --oh-shadow-layered-flat: 0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  --oh-shadow-layered-raised: 0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --oh-shadow-layered-lifted: 0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  --oh-shadow-layered-pressed: 0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04);
+  --oh-shadow-layered-focused: 0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); /** Sits under the focus glow */
+  --oh-shadow-layered-sunlit: 0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  --oh-shadow-layered-sunlit-lifted: 0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
+  --oh-shadow-layered-sunlit-focused: 0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); /** Sits under the focus glow */
+  --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-border-width-chunky: 2.5px; /** Signature chunky frame for controls and feedback */
+  --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-size-container-sm: 640px;
+  --oh-size-container-md: 768px;
+  --oh-size-container-lg: 1024px;
+  --oh-size-container-xl: 1280px;
+  --oh-size-breakpoint-xs: 480px;
+  --oh-size-breakpoint-sm: 640px;
+  --oh-size-breakpoint-md: 768px;
+  --oh-size-breakpoint-lg: 1024px;
+  --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-typography-heading-h1-line-height: 1.2; /** 48px at 40px: 40px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h2-line-height: 1.25; /** 40px at 32px: 32px × 1.25, rounded to the 8px grid */
+  --oh-typography-heading-h3-line-height: 1.4286; /** 40px at 28px: 28px × 1.35, rounded to the 8px grid */
+  --oh-typography-heading-h4-line-height: 1.3333; /** 32px at 24px: 24px × 1.35, rounded to the 8px grid */
+  --oh-typography-heading-h5-line-height: 1.6; /** 32px at 20px: 20px × 1.5, rounded to the 8px grid */
+  --oh-typography-heading-h6-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-xl-line-height: 1.6667; /** 40px at 24px: 24px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-lg-line-height: 1.6; /** 32px at 20px: 20px × 1.65, rounded to the 8px grid */
+  --oh-typography-body-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-body-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-body-xs-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-label-base-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-typography-label-sm-line-height: 1.6667; /** 20px at 12px: 12px × 1.5, rounded to the 4px grid */
+  --oh-typography-code-line-height: 1.5; /** 24px at 16px: 16px × 1.5, rounded to the 8px grid */
+  --oh-elevation-offset-xs: 1px;
+  --oh-elevation-offset-sm: 2px;
+  --oh-elevation-offset-md: 3px;
+  --oh-elevation-offset-lg: 4px;
+  --oh-elevation-offset-xl: 5px;
+  --oh-elevation-offset-2xl: 6px;
+  --oh-lift-hover-sm: -1px;
+  --oh-lift-hover-md: -2px;
+  --oh-lift-press-sm: 1px;
+  --oh-lift-press-md: 2px;
+  --oh-decoration-underline-thickness: 2px;
+  --oh-decoration-underline-focus-thickness: 3px; /** The solid underline that shows keyboard focus on inline links */
+  --oh-decoration-underline-dash: 4px;
+  --oh-decoration-underline-period: 8px;
+  --oh-focus-ring-width: 3px;
+  --oh-focus-ring-offset: 2px;
+  --oh-focus-glow-color: rgba(197, 67, 0, 0.15); /** Decorative glow only — never the sole focus indicator */
+  --oh-button-size-sm-min-height: 40px;
+  --oh-button-size-md-min-height: 48px;
+  --oh-button-size-lg-min-height: 56px;
+  --oh-input-size-md-min-height: 48px;
+  --oh-card-section-header-gradient-end: rgba(255, 255, 255, 0);
+  --oh-progress-track-inset-shadow: rgba(0, 0, 0, 0.06); /** Neutral, so it works on every track colour */
+  --oh-progress-inverse-track-background: rgba(255, 255, 255, 0.15);
+  --oh-progress-inverse-track-border: rgba(255, 255, 255, 0.3);
+  --oh-link-text-decoration: underline;
+  --oh-link-text-decoration-hover: none;
+  --oh-link-inverse-focus-background: rgba(0, 0, 0, 0.1); /** Focus tint — paired with the underline, which is the indicator */
+  --oh-close-button-background-hover: rgba(0, 0, 0, 0.08); /** Neutral tint that works on every alert variant */
+  --oh-close-button-shadow-hover: rgba(0, 0, 0, 0.15); /** Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant */
+  --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-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-shadow: var(--oh-color-blue-200); /** Chunky shadow for accent */
+  --oh-color-feedback-success: var(--oh-color-green-700); /** 5.2:1 on successSubtle — green.600 failed AA for text */
+  --oh-color-feedback-success-subtle: var(--oh-color-green-50);
+  --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-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-info: var(--oh-color-blue-500);
+  --oh-color-feedback-info-subtle: var(--oh-color-blue-50);
+  --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-highlight: var(--oh-color-white); /** Brightest surface — focused inputs, top of raised gradients */
+  --oh-color-surface-disabled: var(--oh-color-warm-sand); /** Quiet disabled */
+  --oh-color-surface-featured-start: var(--oh-color-warm-dawn); /** Featured (sunlit) card gradient: top */
+  --oh-color-surface-featured-mid: var(--oh-color-warm-shell); /** Featured (sunlit) card gradient: 30% */
+  --oh-color-surface-featured-end: var(--oh-color-warm-biscuit); /** Featured (sunlit) card gradient: bottom */
+  --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-strong: var(--oh-color-warm-dune); /** Neutral edge between default and emphasis — card hover, drawer edge. Decorative, not a 3:1 control border */
+  --oh-color-border-hover: var(--oh-color-terracotta-600); /** Hover border — darker for feedback */
+  --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-link-raised: var(--oh-color-orange-950); /** Links on raised (linen) surfaces — text.link is only 4.4:1 on linen */
+  --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-color-text-on-success: var(--oh-color-white); /** Text on filled color.feedback.success */
+  --oh-color-text-on-error: var(--oh-color-white); /** Text on filled color.feedback.error */
+  --oh-color-text-on-warning: var(--oh-color-white); /** Text on filled color.feedback.warning */
+  --oh-color-text-on-info: var(--oh-color-white); /** Text on filled color.feedback.info */
+  --oh-font-size-sm: var(--oh-font-size-xs); /** Kept so existing references don't break. On the grid, small text is xs; use xs or a tier 2 role */
+  --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-shadow-neutral: var(--oh-shadow-chunky-driftwood); /** Containers and the skip link */
+  --oh-shadow-neutral-hover: var(--oh-shadow-chunky-driftwood-hover); /** Lifted containers */
+  --oh-shadow-overlay: var(--oh-shadow-chunky-driftwood-deep); /** Dialogs */
+  --oh-shadow-field: var(--oh-shadow-chunky-walnut); /** The inset shadow inside text fields */
+  --oh-gradient-sunlit: linear-gradient(180deg, var(--oh-color-warm-dawn) 0%, var(--oh-color-warm-shell) 30%, var(--oh-color-warm-biscuit) 100%); /** Gentle warmth for surfaces — same stops as the sunlit card */
+  --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-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-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-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-bold);
+  --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-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-semibold);
+  --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-h6-font-size: var(--oh-font-size-base);
+  --oh-typography-heading-h6-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-body-font-family: var(--oh-font-family-sans);
+  --oh-typography-body-xl-font-size: var(--oh-font-size-xl);
+  --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
+  --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-base-font-size: var(--oh-font-size-base);
+  --oh-typography-body-base-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-sm-font-size: var(--oh-font-size-xs);
+  --oh-typography-body-sm-font-weight: var(--oh-font-weight-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-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-base);
+  --oh-typography-label-base-font-weight: var(--oh-font-weight-medium);
+  --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-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-eyebrow-font-family: var(--oh-font-family-sans);
+  --oh-typography-eyebrow-font-size: var(--oh-font-size-base);
+  --oh-typography-eyebrow-font-weight: var(--oh-font-weight-medium);
+  --oh-typography-eyebrow-letter-spacing: var(--oh-font-letter-spacing-widest);
+  --oh-typography-control-font-family: var(--oh-font-family-sans);
+  --oh-typography-control-font-weight: var(--oh-font-weight-semibold);
+  --oh-typography-control-letter-spacing: var(--oh-font-letter-spacing-wide);
+  --oh-typography-control-font-size-sm: var(--oh-font-size-base); /** Small buttons, field labels */
+  --oh-typography-control-font-size-md: var(--oh-font-size-lg); /** Default: input text, choices, buttons */
+  --oh-typography-control-font-size-lg: var(--oh-font-size-xl); /** Large buttons */
+  --oh-typography-emphasis-font-weight: var(--oh-font-weight-semibold);
+  --oh-typography-code-font-family: var(--oh-font-family-mono);
+  --oh-typography-code-font-size: var(--oh-font-size-base);
+  --oh-layout-container-sm: var(--oh-size-container-sm);
+  --oh-layout-container-md: var(--oh-size-container-md);
+  --oh-layout-container-lg: var(--oh-size-container-lg);
+  --oh-layout-container-xl: var(--oh-size-container-xl);
+  --oh-shape-control: var(--oh-radius-md); /** Buttons, inputs, selects, tabs */
+  --oh-shape-container: var(--oh-radius-md); /** Alerts, modals, dropdowns, accordion items, panels */
+  --oh-shape-large: var(--oh-radius-lg); /** Cards */
+  --oh-shape-compact: var(--oh-radius-sm); /** Small controls and tags: close buttons, checkboxes, badges, code blocks */
+  --oh-shape-tight: var(--oh-radius-xs); /** Focus outlines on text links, inline code */
+  --oh-shape-pill: var(--oh-radius-full); /** Pills, radios, toggles, progress bars */
+  --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-elevation-surface-flat: var(--oh-shadow-layered-flat);
+  --oh-elevation-surface-raised: var(--oh-shadow-layered-raised);
+  --oh-elevation-surface-lifted: var(--oh-shadow-layered-lifted); /** Hovered */
+  --oh-elevation-surface-pressed: var(--oh-shadow-layered-pressed);
+  --oh-elevation-surface-focused: var(--oh-shadow-layered-focused); /** Sits under the focus glow */
+  --oh-elevation-surface-featured: var(--oh-shadow-layered-sunlit);
+  --oh-elevation-surface-featured-lifted: var(--oh-shadow-layered-sunlit-lifted);
+  --oh-elevation-surface-featured-focused: var(--oh-shadow-layered-sunlit-focused);
+  --oh-stroke-control: var(--oh-border-width-chunky); /** Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs */
+  --oh-stroke-surface: var(--oh-border-width-1); /** Card edges */
+  --oh-stroke-divider: var(--oh-border-width-1); /** Lines between sections */
+  --oh-focus-ring-color: var(--oh-color-orange-900); /** The focus colour: outlines, focused control borders. Must stay opaque (4.7:1 on cream, WCAG 1.4.11) */
+  --oh-button-size-sm-padding-x: var(--oh-spacing-4);
+  --oh-button-size-sm-padding-y: var(--oh-spacing-2);
+  --oh-button-size-sm-gap: var(--oh-spacing-2);
+  --oh-button-size-md-padding-x: var(--oh-spacing-6);
+  --oh-button-size-md-padding-y: var(--oh-spacing-3);
+  --oh-button-size-md-gap: var(--oh-spacing-2);
+  --oh-button-size-lg-padding-x: var(--oh-spacing-8);
+  --oh-button-size-lg-padding-y: var(--oh-spacing-4);
+  --oh-button-size-lg-gap: var(--oh-spacing-2-5);
+  --oh-button-variant-secondary-background-hover: var(--oh-color-surface-hover);
+  --oh-button-variant-secondary-background-active: var(--oh-color-surface-active-pressed);
+  --oh-button-focus-glow-color: var(--oh-focus-glow-color);
+  --oh-input-base-line-height: var(--oh-typography-body-base-line-height);
+  --oh-input-size-md-padding-x: var(--oh-spacing-4);
+  --oh-input-size-md-padding-y: var(--oh-spacing-3);
+  --oh-card-base-padding: var(--oh-spacing-5);
+  --oh-card-interactive-border-color-hover: var(--oh-color-border-brand);
+  --oh-card-sunlit-border-color: var(--oh-color-border-brand);
+  --oh-card-sunlit-border-color-hover: var(--oh-color-border-brand-hover);
+  --oh-card-section-divider-color: var(--oh-color-border-divider);
+  --oh-card-section-header-gradient-start: var(--oh-color-surface-sheen);
+  --oh-badge-base-padding-x: var(--oh-spacing-2-5);
+  --oh-badge-base-padding-y: var(--oh-spacing-1);
+  --oh-modal-overlay: var(--oh-color-surface-backdrop);
+  --oh-button-base-font-family: var(--oh-typography-control-font-family);
+  --oh-button-base-font-weight: var(--oh-typography-control-font-weight);
+  --oh-button-base-letter-spacing: var(--oh-typography-control-letter-spacing);
+  --oh-button-base-border-radius: var(--oh-shape-control);
+  --oh-button-base-border-width: var(--oh-stroke-control);
+  --oh-button-base-transition-duration: var(--oh-motion-snappy);
+  --oh-button-base-transition-easing: var(--oh-motion-ease-playful);
+  --oh-button-size-sm-font-size: var(--oh-typography-control-font-size-sm);
+  --oh-button-size-md-font-size: var(--oh-typography-control-font-size-md);
+  --oh-button-size-lg-font-size: var(--oh-typography-control-font-size-lg);
+  --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-text-on-brand);
+  --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-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-text-on-accent);
+  --oh-button-variant-accent-border-color: var(--oh-color-accent-default);
+  --oh-button-variant-accent-shadow-color: var(--oh-color-accent-shadow);
+  --oh-button-focus-ring-color: var(--oh-focus-ring-color);
+  --oh-input-base-font-family: var(--oh-typography-control-font-family);
+  --oh-input-base-font-size: var(--oh-typography-control-font-size-md);
+  --oh-input-base-border-radius: var(--oh-shape-control);
+  --oh-input-base-border-width: var(--oh-stroke-control);
+  --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-highlight);
+  --oh-input-state-focus-border-color: var(--oh-focus-ring-color);
+  --oh-input-state-focus-focus-ring-color: var(--oh-focus-ring-color);
+  --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-large);
+  --oh-card-base-border-width: var(--oh-stroke-surface);
+  --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-background-hover: var(--oh-color-surface-base);
+  --oh-card-interactive-shadow-hover: var(--oh-elevation-medium);
+  --oh-card-raised-gradient-start: var(--oh-color-surface-highlight);
+  --oh-card-raised-gradient-mid: var(--oh-color-surface-base);
+  --oh-card-raised-gradient-end: var(--oh-color-surface-raised);
+  --oh-card-raised-border-color: var(--oh-color-border-default);
+  --oh-card-flat-gradient-start: var(--oh-color-surface-base);
+  --oh-card-flat-gradient-end: var(--oh-color-surface-raised);
+  --oh-card-flat-border-color: var(--oh-color-border-default);
+  --oh-card-sunlit-background: linear-gradient(180deg, var(--oh-color-surface-featured-start) 0%, var(--oh-color-surface-featured-mid) 30%, var(--oh-color-surface-featured-end) 100%);
+  --oh-card-sunlit-gradient-start: var(--oh-color-surface-featured-start);
+  --oh-card-sunlit-gradient-mid: var(--oh-color-surface-featured-mid);
+  --oh-card-sunlit-gradient-end: var(--oh-color-surface-featured-end);
+  --oh-card-sunlit-shadow: var(--oh-elevation-medium);
+  --oh-progress-inverse-fill: var(--oh-color-text-inverse);
+  --oh-badge-base-font-family: var(--oh-typography-label-font-family);
+  --oh-badge-base-font-size: var(--oh-typography-body-base-font-size);
+  --oh-badge-base-font-weight: var(--oh-typography-label-base-font-weight);
+  --oh-badge-base-letter-spacing: var(--oh-typography-label-base-letter-spacing);
+  --oh-badge-base-border-radius: var(--oh-shape-compact);
+  --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-background: var(--oh-color-surface-inset);
+  --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);
+}