@orange-halo/tokens 2.0.0 → 2.2.0

package/dist/tokens.css

@@ -3,6 +3,7 @@
  */
 
 :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;
@@ -89,19 +90,22 @@
   --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-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-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.625rem; /** 42px */
-  --oh-font-size-5xl: 3.25rem; /** 52px */
+  --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;
@@ -118,24 +122,6 @@
   --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-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 */
@@ -153,6 +139,18 @@
   --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) */
@@ -168,6 +166,24 @@
   --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;
@@ -184,26 +200,50 @@
   --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-base-border-width: 2.5px;
   --oh-button-size-sm-min-height: 40px;
   --oh-button-size-md-min-height: 48px;
   --oh-button-size-lg-min-height: 56px;
-  --oh-input-base-border-width: 2.5px;
   --oh-input-size-md-min-height: 48px;
-  --oh-card-sunlit-border-color-hover: rgba(197, 67, 0, 0.35); /** Decorative container edge — not a focus or control border */
-  --oh-card-section-divider-color: rgba(226, 213, 200, 0.6); /** Decorative divider */
-  --oh-card-section-header-gradient-start: rgba(255, 255, 255, 0.5);
   --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-modal-overlay: rgba(61, 50, 41, 0.6); /** Backdrop — darker than color.surface.overlay so the dialog stands out */
   --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 */
@@ -231,6 +271,9 @@
   --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 */
@@ -251,19 +294,15 @@
   --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-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-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);
@@ -273,55 +312,51 @@
   --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-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);
   --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-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);
   --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-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);
   --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-size: var(--oh-font-size-xs);
   --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-size: var(--oh-font-size-base);
   --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-eyebrow-font-family: var(--oh-font-family-sans);
   --oh-typography-eyebrow-font-size: var(--oh-font-size-base);
@@ -335,8 +370,7 @@
   --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-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);
@@ -353,6 +387,17 @@
   --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);
@@ -366,21 +411,23 @@
   --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-border-width: var(--oh-border-width-1);
   --oh-card-base-padding: var(--oh-spacing-5);
   --oh-card-interactive-border-color-hover: var(--oh-color-border-brand);
-  --oh-card-sunlit-gradient-start: var(--oh-color-warm-dawn);
-  --oh-card-sunlit-gradient-mid: var(--oh-color-warm-shell);
-  --oh-card-sunlit-gradient-end: var(--oh-color-warm-biscuit);
   --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);
@@ -405,8 +452,8 @@
   --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);
@@ -423,6 +470,7 @@
   --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);
@@ -436,7 +484,10 @@
   --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: var(--oh-gradient-sunlit);
+  --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);