@orange-halo/tokens 2.0.0 → 2.1.0

package/dist/themes/dark.css

@@ -4,7 +4,11 @@
 
 [data-theme='dark'] {
   --oh-color-surface-overlay: rgba(15, 12, 10, 0.7);
+  --oh-color-surface-sheen: rgba(255, 255, 255, 0.5);
+  --oh-color-surface-backdrop: rgba(61, 50, 41, 0.6);
   --oh-color-border-brand: rgba(232, 168, 56, 0.3);
+  --oh-color-border-brand-hover: rgba(197, 67, 0, 0.35); /** Same as light for now: the dark theme hasn't been designed */
+  --oh-color-border-divider: rgba(226, 213, 200, 0.6);
   --oh-elevation-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
   --oh-elevation-medium: 0 4px 16px rgba(0, 0, 0, 0.3);
   --oh-elevation-strong: 0 8px 24px rgba(0, 0, 0, 0.4);
@@ -39,6 +43,9 @@
   --oh-color-surface-disabled: var(--oh-color-warm-mocha);
   --oh-color-surface-hover: var(--oh-color-warm-hickory);
   --oh-color-surface-active-pressed: var(--oh-color-warm-mocha);
+  --oh-color-surface-featured-start: var(--oh-color-warm-dawn); /** Same as light for now: the dark theme hasn't been designed */
+  --oh-color-surface-featured-mid: var(--oh-color-warm-shell);
+  --oh-color-surface-featured-end: var(--oh-color-warm-biscuit);
   --oh-color-border-default: var(--oh-color-warm-taupe);
   --oh-color-border-subtle: var(--oh-color-warm-driftwood); /** Decorative dividers only — below 3:1 */
   --oh-color-border-emphasis: var(--oh-color-warm-stone);
@@ -63,5 +70,9 @@
   --oh-shadow-secondary: var(--oh-color-warm-espresso);
   --oh-shadow-accent: var(--oh-color-blue-800);
   --oh-shadow-error: var(--oh-color-red-900);
+  --oh-shadow-neutral: var(--oh-shadow-chunky-driftwood); /** As in light, which is what dark showed before these were tokens. Faint on cocoa: review with the dark design */
+  --oh-shadow-neutral-hover: var(--oh-shadow-chunky-driftwood-hover); /** As in light; review with the dark design */
+  --oh-shadow-overlay: var(--oh-shadow-chunky-driftwood-deep); /** As in light; review with the dark design */
+  --oh-shadow-field: var(--oh-shadow-chunky-walnut); /** As in light; review with the dark design */
   --oh-focus-ring-color: var(--oh-color-honey-400); /** Opaque, as in light */
 }

package/dist/themes/dark.json

@@ -149,7 +149,12 @@
       "overlay": "#0f0c0ab3",
       "disabled": "#352e28",
       "hover": "#4a3f33",
-      "activePressed": "#352e28"
+      "activePressed": "#352e28",
+      "featuredStart": "#fffbf5",
+      "featuredMid": "#fdf6ee",
+      "featuredEnd": "#f8efe4",
+      "sheen": "#ffffff80",
+      "backdrop": "#3d322999"
     },
     "border": {
       "$description": "Border colors — visible and intentional",
@@ -159,7 +164,9 @@
       "strong": "#a09080",
       "hover": "#c9c1b4",
       "disabled": "#4a3f33",
-      "brand": "#e8a8384d"
+      "brand": "#e8a8384d",
+      "brandHover": "#c5430059",
+      "divider": "#e2d5c899"
     },
     "text": {
       "$description": "Text colors — calm and readable, not stark",
@@ -224,42 +231,6 @@
       "widest": "0.05em"
     }
   },
-  "spacing": {
-    "0": "0",
-    "1": "0.25rem",
-    "2": "0.5rem",
-    "3": "0.75rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "7": "1.75rem",
-    "8": "2rem",
-    "10": "2.5rem",
-    "12": "3rem",
-    "16": "4rem",
-    "20": "5rem",
-    "$description": "Generous spacing — breathing room, not dense",
-    "px": "1px",
-    "0-5": "0.125rem",
-    "1-5": "0.375rem",
-    "2-5": "0.625rem",
-    "3-5": "0.875rem",
-    "layout": {
-      "$description": "Generous layout spacing",
-      "page": "1.5rem",
-      "section": "3rem",
-      "stack": "1.25rem",
-      "inline": "1rem"
-    },
-    "component": {
-      "$description": "Component-level spacing",
-      "xs": "0.375rem",
-      "sm": "0.625rem",
-      "md": "0.875rem",
-      "lg": "1.25rem",
-      "xl": "1.75rem"
-    }
-  },
   "radius": {
     "$description": "Friendly and soft — not sharp, not overly pill-shaped",
     "none": "0",
@@ -283,12 +254,31 @@
       "primary": "#e8c4a0",
       "secondary": "#d4c4b0",
       "accent": "#a0b4c8",
-      "error": "#b545404d"
+      "error": "#b545404d",
+      "driftwood": "#6b5d4d26",
+      "driftwoodHover": "#6b5d4d33",
+      "driftwoodDeep": "#6b5d4d40",
+      "walnut": "#3d322926"
+    },
+    "layered": {
+      "$description": "Layered surface shadows: soft drop shadows with a top highlight, so cards feel like physical objects",
+      "flat": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+      "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)",
+      "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)",
+      "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)",
+      "focused": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "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)",
+      "sunlitLifted": "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)",
+      "sunlitFocused": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
     },
     "primary": "#6b4815",
     "secondary": "#1f1a17",
     "accent": "#253850",
-    "error": "#3d2a29"
+    "error": "#3d2a29",
+    "neutral": "#6b5d4d26",
+    "neutralHover": "#6b5d4d33",
+    "overlay": "#6b5d4d40",
+    "field": "#3d322926"
   },
   "gradient": {
     "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
@@ -364,6 +354,42 @@
       "chunky": "2.5px"
     }
   },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "$description": "Generous spacing — breathing room, not dense",
+    "px": "1px",
+    "0-5": "0.125rem",
+    "1-5": "0.375rem",
+    "2-5": "0.625rem",
+    "3-5": "0.875rem",
+    "layout": {
+      "$description": "Generous layout spacing",
+      "page": "1.5rem",
+      "section": "3rem",
+      "stack": "1.25rem",
+      "inline": "1rem"
+    },
+    "component": {
+      "$description": "Component-level spacing",
+      "xs": "0.375rem",
+      "sm": "0.625rem",
+      "md": "0.875rem",
+      "lg": "1.25rem",
+      "xl": "1.75rem"
+    }
+  },
   "size": {
     "$description": "Fixed layout sizes: content widths and viewport breakpoints",
     "container": {
@@ -531,7 +557,47 @@
     "medium": "0 4px 16px rgba(0, 0, 0, 0.3)",
     "strong": "0 8px 24px rgba(0, 0, 0, 0.4)",
     "glow": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
-    "inset": "inset 0 1px 3px rgba(0, 0, 0, 0.3)"
+    "inset": "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
+    "surface": {
+      "$description": "Card surfaces, by state. Featured is the sunlit card",
+      "flat": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+      "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)",
+      "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)",
+      "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)",
+      "focused": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+      "featured": "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)",
+      "featuredLifted": "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)",
+      "featuredFocused": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+    },
+    "offset": {
+      "$description": "How far solid offset shadows sit from the element, from pressed (xs) to dialogs (2xl). The colour comes from shadow.*. A flat brand sets every step to 0",
+      "xs": "1px",
+      "sm": "2px",
+      "md": "3px",
+      "lg": "4px",
+      "xl": "5px",
+      "2xl": "6px"
+    }
+  },
+  "lift": {
+    "$description": "How far elements move on hover (negative: up and left, towards the viewer) and when pressed (positive: into the page). A still brand sets every step to 0",
+    "hoverSm": "-1px",
+    "hoverMd": "-2px",
+    "pressSm": "1px",
+    "pressMd": "2px"
+  },
+  "stroke": {
+    "$description": "Border widths by role",
+    "control": "2.5px",
+    "surface": "1px",
+    "divider": "1px"
+  },
+  "decoration": {
+    "$description": "Link underlines. Orange Halo's are dashed: a dash, then a gap, repeating every period. A solid underline sets dash and period to the same value",
+    "underlineThickness": "2px",
+    "underlineFocusThickness": "3px",
+    "underlineDash": "4px",
+    "underlinePeriod": "8px"
   },
   "focus": {
     "$description": "Warm, friendly focus ring",
@@ -716,6 +782,9 @@
   },
   "progress": {
     "$description": "Progress — chunky pill track",
+    "track": {
+      "insetShadow": "#0000000f"
+    },
     "inverse": {
       "$description": "On brand/accent backgrounds (e.g. journey hero). Fill is cream so it reads at 3.7:1 against the track.",
       "trackBackground": "#ffffff26",
@@ -778,6 +847,7 @@
   },
   "closeButton": {
     "$description": "Icon-only close buttons in alerts and modals",
-    "backgroundHover": "#00000014"
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
   }
 }

package/dist/tokens.css

@@ -89,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;
@@ -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,36 @@
   --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-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 +257,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 +280,14 @@
   --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-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,6 +297,15 @@
   --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);
@@ -353,6 +386,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);
@@ -368,19 +412,20 @@
   --oh-button-focus-glow-color: var(--oh-focus-glow-color);
   --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);
@@ -407,6 +452,7 @@
   --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 +469,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 +483,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);