@orange-halo/tokens 1.0.0 → 2.1.0

package/dist/tokens.css

@@ -12,8 +12,8 @@
   --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-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;
@@ -21,8 +21,9 @@
   --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-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;
@@ -38,35 +39,49 @@
   --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-500: #5f8a8b; /** 3.6:1 on cream — UI and large text only */
   --oh-color-eucalyptus-600: #4d7172;
-  --oh-color-eucalyptus-700: #3f5c5d; /** WCAG AA (6.2:1) */
+  --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; /** 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-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; /** WCAG AA (4.5:1) */
-  --oh-color-green-700: #3d7340;
+  --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; /** WCAG AA (4.8:1) */
+  --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 blue — WCAG AA (5.5:1) */
+  --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;
@@ -74,7 +89,11 @@
   --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;
@@ -102,24 +121,7 @@
   --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-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 */
@@ -135,9 +137,20 @@
   --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-accent: #a0b4c8; /** Blue offset shadow for accent buttons — decorative */
   --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-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) */
@@ -152,6 +165,33 @@
   --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;
@@ -160,57 +200,71 @@
   --oh-z-index-modal: 1200;
   --oh-z-index-popover: 1300;
   --oh-z-index-tooltip: 1400;
+  --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-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-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-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: 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-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-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-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 */
@@ -218,22 +272,23 @@
   --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-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-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-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);
@@ -242,13 +297,22 @@
   --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-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-font-weight: var(--oh-font-weight-bold);
   --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);
@@ -256,7 +320,7 @@
   --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-font-weight: var(--oh-font-weight-semibold);
   --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);
@@ -266,6 +330,9 @@
   --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-xl-font-size: var(--oh-font-size-xl);
+  --oh-typography-body-xl-font-weight: var(--oh-font-weight-normal);
+  --oh-typography-body-xl-line-height: var(--oh-font-line-height-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-lg-line-height: var(--oh-font-line-height-relaxed);
@@ -289,77 +356,103 @@
   --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-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-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-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-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-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-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-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-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-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-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-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-badge-variant-neutral-background: var(--oh-color-warm-parchment);
-  --oh-button-base-font-family: var(--oh-typography-label-font-family);
+  --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-surface-white);
+  --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-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-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-line-height: var(--oh-typography-body-base-line-height);
+  --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);
@@ -368,21 +461,39 @@
   --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-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-container);
+  --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-badge-base-border-radius: var(--oh-shape-pill);
+  --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);
@@ -393,6 +504,7 @@
   --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);