@orange-halo/tokens 1.0.0 → 2.1.0

package/dist/tokens.js

@@ -11,8 +11,8 @@ export const OhColorOrange500 = "#ff9800";
 export const OhColorOrange600 = "#fb8c00";
 export const OhColorOrange700 = "#f57c00";
 export const OhColorOrange800 = "#ef6c00";
-export const OhColorOrange900 = "#c54300"; // Primary brand — WCAG AA (4.5:1)
-export const OhColorOrange950 = "#9e3500"; // Hover/active state — WCAG AA (7.2:1)
+export const OhColorOrange900 = "#c54300"; // Primary brand — 5.0:1 with white text, 4.7:1 on cream. Chosen for contrast: do not lighten.
+export const OhColorOrange950 = "#9e3500"; // Hover/active — 7.1:1 with white text, 6.6:1 on cream
 export const OhColorHoney50 = "#fefaee";
 export const OhColorHoney100 = "#fdf3d4";
 export const OhColorHoney200 = "#fbe7a8";
@@ -20,8 +20,9 @@ export const OhColorHoney300 = "#f8d56f";
 export const OhColorHoney400 = "#e8a838"; // Signature honey
 export const OhColorHoney500 = "#d4922c";
 export const OhColorHoney600 = "#b87a24";
-export const OhColorHoney700 = "#8c5e1c"; // WCAG AA (5.2:1)
+export const OhColorHoney700 = "#8c5e1c"; // 5.3:1 on cream
 export const OhColorHoney800 = "#6b4815";
+export const OhColorHoney900 = "#3d3529"; // Dark theme warning tint
 export const OhColorTerracotta50 = "#fbf5f0";
 export const OhColorTerracotta100 = "#f5e8de";
 export const OhColorTerracotta200 = "#e8cdbf";
@@ -37,35 +38,49 @@ export const OhColorEucalyptus100 = "#e0ebeb";
 export const OhColorEucalyptus200 = "#c2d7d7";
 export const OhColorEucalyptus300 = "#9ebebe";
 export const OhColorEucalyptus400 = "#7aa3a4";
-export const OhColorEucalyptus500 = "#5f8a8b"; // Signature eucalyptus — WCAG AA (4.5:1)
+export const OhColorEucalyptus500 = "#5f8a8b"; // 3.6:1 on cream — UI and large text only
 export const OhColorEucalyptus600 = "#4d7172";
-export const OhColorEucalyptus700 = "#3f5c5d"; // WCAG AA (6.2:1)
+export const OhColorEucalyptus700 = "#3f5c5d"; // 6.8:1 on cream
 export const OhColorEucalyptus800 = "#344a4b";
 export const OhColorEucalyptus900 = "#2a3c3d";
 export const OhColorWarmCream = "#faf7f2"; // Base background — warm off-white
 export const OhColorWarmLinen = "#f5f0e8"; // Raised surface
+export const OhColorWarmDawn = "#fffbf5"; // Sunlit gradient — top
+export const OhColorWarmShell = "#fdf6ee"; // Sunlit gradient — middle
+export const OhColorWarmBiscuit = "#f8efe4"; // Sunlit gradient — bottom
 export const OhColorWarmParchment = "#ede8df"; // Inset surface
 export const OhColorWarmSand = "#e2dcd2"; // Borders, dividers
-export const OhColorWarmDune = "#c9c1b4"; // Muted elements
-export const OhColorWarmDriftwood = "#6b5d4d"; // Secondary text — WCAG AA (4.8:1)
-export const OhColorWarmBark = "#52463a"; // Emphasis text (6.8:1)
-export const OhColorWarmWalnut = "#3d3229"; // Primary text — WCAG AA (8.2:1)
+export const OhColorWarmDune = "#c9c1b4"; // Decorative only — 1.7:1 on cream, never for control borders
+export const OhColorWarmStone = "#a09080"; // Dark theme control borders — 4.9:1 on cocoa
+export const OhColorWarmTaupe = "#8a7a68"; // Dark theme borders — 3.7:1 on cocoa, 3.0:1 on walnut
+export const OhColorWarmDriftwood = "#6b5d4d"; // Secondary text — 6.0:1 on cream
+export const OhColorWarmBark = "#52463a"; // Emphasis text — 8.6:1 on cream
+export const OhColorWarmHickory = "#4a3f33"; // Dark theme hover and highlight surface
+export const OhColorWarmChestnut = "#44382c"; // Dark theme sunlit surface
+export const OhColorWarmWalnut = "#3d3229"; // Primary text — 11.7:1 on cream. Dark theme raised surface
+export const OhColorWarmMocha = "#352e28"; // Dark theme pressed and disabled surface
+export const OhColorWarmCocoa = "#2a2420"; // Dark theme page background
+export const OhColorWarmEspresso = "#1f1a17"; // Dark theme inset surface
 export const OhColorGreen50 = "#f0f7f1";
 export const OhColorGreen100 = "#d9edd9";
+export const OhColorGreen300 = "#7ab87c"; // Dark theme success — 6.5:1 with cocoa text
 export const OhColorGreen500 = "#5a9a5c";
-export const OhColorGreen600 = "#4a8a4c"; // WCAG AA (4.5:1)
-export const OhColorGreen700 = "#3d7340";
+export const OhColorGreen600 = "#4a8a4c"; // 3.9:1 on cream — icons and UI only, not text
+export const OhColorGreen700 = "#3d7340"; // Success text — 5.3:1 on cream, 5.2:1 on green.50
+export const OhColorGreen900 = "#2a3629"; // Dark theme success tint
 export const OhColorRed50 = "#fdf4f3";
 export const OhColorRed100 = "#f9e0dc";
+export const OhColorRed300 = "#e08f8d"; // Dark theme error — 6.2:1 with cocoa text
 export const OhColorRed500 = "#c75450";
-export const OhColorRed600 = "#b54540"; // WCAG AA (4.8:1)
+export const OhColorRed600 = "#b54540"; // 5.1:1 on cream
 export const OhColorRed700 = "#943836"; // Hover/active state
+export const OhColorRed900 = "#3d2a29"; // Dark theme error tint
 export const OhColorBlue50 = "#eef4f9";
 export const OhColorBlue100 = "#d6e4f0";
 export const OhColorBlue200 = "#a0b4c8";
 export const OhColorBlue300 = "#7a9ab8";
 export const OhColorBlue400 = "#5a82a8";
-export const OhColorBlue500 = "#3d5a80"; // Signature blue — WCAG AA (5.5:1)
+export const OhColorBlue500 = "#3d5a80"; // Signature accent — 7.1:1 with white text, 6.6:1 on cream
 export const OhColorBlue600 = "#354f70"; // Hover state
 export const OhColorBlue700 = "#2e4460"; // Active state
 export const OhColorBlue800 = "#253850";
@@ -74,55 +89,60 @@ export const OhColorBrandPrimary = "#c54300"; // Primary brand action — WCAG A
 export const OhColorBrandPrimaryHover = "#9e3500"; // Hover state
 export const OhColorBrandPrimaryActive = "#9e3500"; // Active/pressed state
 export const OhColorBrandPrimarySubtle = "#fff3e0"; // Subtle tint
-export const OhColorBrandPrimaryMuted = "#ffe0b2"; // Background tint
 export const OhColorBrandHighlight = "#e8a838"; // Golden accent
 export const OhColorBrandHighlightSubtle = "#fdf3d4";
 export const OhColorAccentDefault = "#3d5a80"; // Signature blue accent
 export const OhColorAccentHover = "#354f70";
 export const OhColorAccentActive = "#2e4460";
 export const OhColorAccentSubtle = "#eef4f9";
-export const OhColorAccentMuted = "#d6e4f0";
 export const OhColorAccentShadow = "#a0b4c8"; // Chunky shadow for accent
-export const OhColorFeedbackSuccess = "#4a8a4c";
+export const OhColorFeedbackSuccess = "#3d7340"; // 5.2:1 on successSubtle — green.600 failed AA for text
 export const OhColorFeedbackSuccessSubtle = "#f0f7f1";
-export const OhColorFeedbackSuccessMuted = "#d9edd9";
 export const OhColorFeedbackError = "#b54540";
 export const OhColorFeedbackErrorHover = "#943836"; // Error hover/active state
 export const OhColorFeedbackErrorSubtle = "#fdf4f3";
-export const OhColorFeedbackErrorMuted = "#f9e0dc";
 export const OhColorFeedbackErrorShadow = "#b545404d"; // Error shadow color
 export const OhColorFeedbackWarning = "#8c5e1c";
 export const OhColorFeedbackWarningSubtle = "#fefaee";
-export const OhColorFeedbackWarningMuted = "#fdf3d4";
 export const OhColorFeedbackInfo = "#3d5a80";
 export const OhColorFeedbackInfoSubtle = "#eef4f9";
-export const OhColorFeedbackInfoMuted = "#d6e4f0";
 export const OhColorSurfaceBase = "#faf7f2"; // Page background — warm off-white
 export const OhColorSurfaceRaised = "#f5f0e8"; // Cards, panels — slight lift
 export const OhColorSurfaceSunlit = "#faf7f2"; // Featured — use with gradient
 export const OhColorSurfaceInset = "#ede8df"; // Inputs, wells — pressed in
-export const OhColorSurfaceWhite = "#ffffff"; // Pure white for focus/highlight states
+export const OhColorSurfaceHighlight = "#ffffff"; // Brightest surface — focused inputs, top of raised gradients
 export const OhColorSurfaceOverlay = "#3d322966"; // Modal backdrop — warm
 export const OhColorSurfaceDisabled = "#e2dcd2"; // Quiet disabled
 export const OhColorSurfaceHover = "#fff4e6"; // Warm hover tint
 export const OhColorSurfaceActivePressed = "#f0ebe3"; // Active/pressed surface
+export const OhColorSurfaceFeaturedStart = "#fffbf5"; // Featured (sunlit) card gradient: top
+export const OhColorSurfaceFeaturedMid = "#fdf6ee"; // Featured (sunlit) card gradient: 30%
+export const OhColorSurfaceFeaturedEnd = "#f8efe4"; // Featured (sunlit) card gradient: bottom
+export const OhColorSurfaceSheen = "#ffffff80"; // Light glaze at the top of card headers, fading to transparent
+export const OhColorSurfaceBackdrop = "#3d322999"; // Modal backdrop — darker than surface.overlay so the dialog stands out
 export const OhColorBorderDefault = "#e2dcd2"; // Standard border
 export const OhColorBorderSubtle = "#ede8df"; // Subtle dividers
 export const OhColorBorderEmphasis = "#6b5d4d"; // Strong border for form elements
+export const OhColorBorderStrong = "#c9c1b4"; // Neutral edge between default and emphasis — card hover, drawer edge. Decorative, not a 3:1 control border
 export const OhColorBorderHover = "#8b4726"; // Hover border — darker for feedback
-export const OhColorBorderFocus = "#c54300"; // Focus ring — warm orange
-export const OhColorBorderFocusInner = "#c54300"; // Inner focus ring
 export const OhColorBorderDisabled = "#ede8df";
 export const OhColorBorderBrand = "#c5430040"; // Brand-tinted border
+export const OhColorBorderBrandHover = "#c5430059"; // Brand-tinted border on hover. Decorative container edge — not a focus or control border
+export const OhColorBorderDivider = "#e2d5c899"; // Decorative divider inside a container, such as a card's header and footer
 export const OhColorTextPrimary = "#3d3229"; // Primary text — warm brown
 export const OhColorTextSecondary = "#6b5d4d"; // Secondary text
 export const OhColorTextDisabled = "#c9c1b4"; // Disabled text
 export const OhColorTextInverse = "#faf7f2"; // On dark backgrounds
 export const OhColorTextLink = "#c54300"; // Link text
 export const OhColorTextLinkHover = "#9e3500"; // Link hover
+export const OhColorTextLinkRaised = "#9e3500"; // Links on raised (linen) surfaces — text.link is only 4.4:1 on linen
 export const OhColorTextBrand = "#c54300";
 export const OhColorTextOnBrand = "#ffffff"; // Light text on dark brand bg
 export const OhColorTextOnAccent = "#ffffff"; // Light text on dark accent bg
+export const OhColorTextOnSuccess = "#ffffff"; // Text on filled color.feedback.success
+export const OhColorTextOnError = "#ffffff"; // Text on filled color.feedback.error
+export const OhColorTextOnWarning = "#ffffff"; // Text on filled color.feedback.warning
+export const OhColorTextOnInfo = "#ffffff"; // Text on filled color.feedback.info
 export const OhFontFamilySans =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
 export const OhFontFamilyDisplay =
@@ -153,33 +173,7 @@ export const OhFontLetterSpacingTight = "-0.01em";
 export const OhFontLetterSpacingNormal = "0";
 export const OhFontLetterSpacingWide = "0.01em";
 export const OhFontLetterSpacingWider = "0.02em";
-export const OhSpacing0 = "0";
-export const OhSpacing1 = "0.25rem"; // 4px
-export const OhSpacing2 = "0.5rem"; // 8px
-export const OhSpacing3 = "0.75rem"; // 12px
-export const OhSpacing4 = "1rem"; // 16px
-export const OhSpacing5 = "1.25rem"; // 20px
-export const OhSpacing6 = "1.5rem"; // 24px
-export const OhSpacing7 = "1.75rem"; // 28px
-export const OhSpacing8 = "2rem"; // 32px
-export const OhSpacing10 = "2.5rem"; // 40px
-export const OhSpacing12 = "3rem"; // 48px
-export const OhSpacing16 = "4rem"; // 64px
-export const OhSpacing20 = "5rem"; // 80px
-export const OhSpacingPx = "1px";
-export const OhSpacing05 = "0.125rem"; // 2px
-export const OhSpacing15 = "0.375rem"; // 6px
-export const OhSpacing25 = "0.625rem"; // 10px
-export const OhSpacing35 = "0.875rem"; // 14px
-export const OhSpacingLayoutPage = "1.5rem";
-export const OhSpacingLayoutSection = "3rem";
-export const OhSpacingLayoutStack = "1.25rem";
-export const OhSpacingLayoutInline = "1rem";
-export const OhSpacingComponentXs = "0.375rem";
-export const OhSpacingComponentSm = "0.625rem";
-export const OhSpacingComponentMd = "0.875rem";
-export const OhSpacingComponentLg = "1.25rem";
-export const OhSpacingComponentXl = "1.75rem";
+export const OhFontLetterSpacingWidest = "0.05em"; // Uppercase labels: hero eyebrows, footer headings
 export const OhRadiusNone = "0";
 export const OhRadiusXs = "4px"; // Small details, chips
 export const OhRadiusSm = "6px"; // Buttons, inputs
@@ -199,14 +193,38 @@ export const OhShadowGlow =
 export const OhShadowInset = "inset 0 1px 3px rgba(61, 50, 41, 0.08)"; // Inputs, wells
 export const OhShadowChunkyPrimary = "#e8c4a0"; // Warm peach for primary buttons
 export const OhShadowChunkySecondary = "#d4c4b0"; // Neutral tan for secondary/form elements
-export const OhShadowChunkyAccent = "#a0b4c8"; // Cool blue-gray for accent buttons
+export const OhShadowChunkyAccent = "#a0b4c8"; // Blue offset shadow for accent buttons — decorative
 export const OhShadowChunkyError = "#b545404d"; // Error state shadow
+export const OhShadowChunkyDriftwood = "#6b5d4d26"; // Translucent driftwood, for offset shadows on cream
+export const OhShadowChunkyDriftwoodHover = "#6b5d4d33"; // A step darker, for the lifted state
+export const OhShadowChunkyDriftwoodDeep = "#6b5d4d40"; // For dialogs, which sit above everything
+export const OhShadowChunkyWalnut = "#3d322926"; // Translucent walnut, for the inset shadow inside fields
+export const OhShadowLayeredFlat =
+  "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)";
+export const OhShadowLayeredRaised =
+  "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)";
+export const OhShadowLayeredLifted =
+  "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)";
+export const OhShadowLayeredPressed =
+  "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)";
+export const OhShadowLayeredFocused =
+  "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)"; // Sits under the focus glow
+export const OhShadowLayeredSunlit =
+  "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)";
+export const OhShadowLayeredSunlitLifted =
+  "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)";
+export const OhShadowLayeredSunlitFocused =
+  "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"; // Sits under the focus glow
 export const OhShadowPrimary = "#e8c4a0"; // Primary buttons
 export const OhShadowSecondary = "#d4c4b0"; // Secondary/form elements
 export const OhShadowAccent = "#a0b4c8"; // Accent buttons
 export const OhShadowError = "#b545404d"; // Error state
+export const OhShadowNeutral = "#6b5d4d26"; // Containers and the skip link
+export const OhShadowNeutralHover = "#6b5d4d33"; // Lifted containers
+export const OhShadowOverlay = "#6b5d4d40"; // Dialogs
+export const OhShadowField = "#3d322926"; // The inset shadow inside text fields
 export const OhGradientSunlit =
-  "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)"; // Gentle warmth for surfaces
+  "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)"; // Gentle warmth for surfaces — same stops as the sunlit card
 export const OhGradientWarm =
   "linear-gradient(135deg, #C54300 0%, #FF9800 100%)"; // Brand emphasis
 export const OhGradientNostalgic =
@@ -231,6 +249,42 @@ export const OhMotionEasePlayful = [0.34, 1.3, 0.64, 1];
 export const OhBorderWidth0 = "0";
 export const OhBorderWidth1 = "1px";
 export const OhBorderWidth2 = "2px";
+export const OhBorderWidthChunky = "2.5px"; // Signature chunky frame for controls and feedback
+export const OhSpacing0 = "0";
+export const OhSpacing1 = "0.25rem"; // 4px
+export const OhSpacing2 = "0.5rem"; // 8px
+export const OhSpacing3 = "0.75rem"; // 12px
+export const OhSpacing4 = "1rem"; // 16px
+export const OhSpacing5 = "1.25rem"; // 20px
+export const OhSpacing6 = "1.5rem"; // 24px
+export const OhSpacing7 = "1.75rem"; // 28px
+export const OhSpacing8 = "2rem"; // 32px
+export const OhSpacing10 = "2.5rem"; // 40px
+export const OhSpacing12 = "3rem"; // 48px
+export const OhSpacing16 = "4rem"; // 64px
+export const OhSpacing20 = "5rem"; // 80px
+export const OhSpacingPx = "1px";
+export const OhSpacing05 = "0.125rem"; // 2px
+export const OhSpacing15 = "0.375rem"; // 6px
+export const OhSpacing25 = "0.625rem"; // 10px
+export const OhSpacing35 = "0.875rem"; // 14px
+export const OhSpacingLayoutPage = "1.5rem";
+export const OhSpacingLayoutSection = "3rem";
+export const OhSpacingLayoutStack = "1.25rem";
+export const OhSpacingLayoutInline = "1rem";
+export const OhSpacingComponentXs = "0.375rem";
+export const OhSpacingComponentSm = "0.625rem";
+export const OhSpacingComponentMd = "0.875rem";
+export const OhSpacingComponentLg = "1.25rem";
+export const OhSpacingComponentXl = "1.75rem";
+export const OhSizeContainerSm = "640px";
+export const OhSizeContainerMd = "768px";
+export const OhSizeContainerLg = "1024px";
+export const OhSizeContainerXl = "1280px";
+export const OhSizeBreakpointXs = "480px";
+export const OhSizeBreakpointSm = "640px";
+export const OhSizeBreakpointMd = "768px";
+export const OhSizeBreakpointLg = "1024px";
 export const OhZIndex0 = 0;
 export const OhZIndex10 = 10;
 export const OhZIndex20 = 20;
@@ -246,7 +300,7 @@ export const OhTypographyHeadingH1FontWeight = "700";
 export const OhTypographyHeadingH1LineHeight = 1.25;
 export const OhTypographyHeadingH1LetterSpacing = "-0.02em";
 export const OhTypographyHeadingH2FontSize = "2rem";
-export const OhTypographyHeadingH2FontWeight = "600";
+export const OhTypographyHeadingH2FontWeight = "700";
 export const OhTypographyHeadingH2LineHeight = 1.25;
 export const OhTypographyHeadingH2LetterSpacing = "-0.01em";
 export const OhTypographyHeadingH3FontSize = "1.625rem";
@@ -254,7 +308,7 @@ export const OhTypographyHeadingH3FontWeight = "600";
 export const OhTypographyHeadingH3LineHeight = 1.35;
 export const OhTypographyHeadingH3LetterSpacing = "-0.01em";
 export const OhTypographyHeadingH4FontSize = "1.25rem";
-export const OhTypographyHeadingH4FontWeight = "500";
+export const OhTypographyHeadingH4FontWeight = "600";
 export const OhTypographyHeadingH4LineHeight = 1.35;
 export const OhTypographyHeadingH4LetterSpacing = "0";
 export const OhTypographyHeadingH5FontSize = "1.125rem";
@@ -265,6 +319,9 @@ export const OhTypographyHeadingH6FontWeight = "500";
 export const OhTypographyHeadingH6LineHeight = 1.5;
 export const OhTypographyBodyFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhTypographyBodyXlFontSize = "1.25rem";
+export const OhTypographyBodyXlFontWeight = "400";
+export const OhTypographyBodyXlLineHeight = 1.5;
 export const OhTypographyBodyLgFontSize = "1.125rem";
 export const OhTypographyBodyLgFontWeight = "400";
 export const OhTypographyBodyLgLineHeight = 1.65;
@@ -289,15 +346,33 @@ export const OhTypographyLabelSmFontSize = "0.75rem";
 export const OhTypographyLabelSmFontWeight = "500";
 export const OhTypographyLabelSmLineHeight = 1.5; // 1.5 for WCAG 1.4.12
 export const OhTypographyLabelSmLetterSpacing = "0.01em";
+export const OhTypographyEyebrowFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhTypographyEyebrowFontSize = "1rem";
+export const OhTypographyEyebrowFontWeight = "500";
+export const OhTypographyEyebrowLetterSpacing = "0.05em";
+export const OhTypographyControlFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhTypographyControlFontWeight = "600";
+export const OhTypographyControlLetterSpacing = "0.01em";
+export const OhTypographyControlFontSizeSm = "1rem"; // Small buttons, field labels
+export const OhTypographyControlFontSizeMd = "1.125rem"; // Default: input text, choices, buttons
+export const OhTypographyControlFontSizeLg = "1.25rem"; // Large buttons
+export const OhTypographyEmphasisFontWeight = "600";
 export const OhTypographyCodeFontFamily =
   "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
 export const OhTypographyCodeFontSize = "0.875rem";
 export const OhTypographyCodeLineHeight = 1.5;
-export const OhShapeInteractive = "6px"; // Buttons, inputs (6px)
-export const OhShapeContainer = "10px"; // Cards, panels (10px)
-export const OhShapeLarge = "14px"; // Modals (14px)
-export const OhShapeSmall = "4px"; // Chips, tags (4px)
-export const OhShapePill = "9999px"; // Badges, avatars
+export const OhLayoutContainerSm = "640px";
+export const OhLayoutContainerMd = "768px";
+export const OhLayoutContainerLg = "1024px";
+export const OhLayoutContainerXl = "1280px";
+export const OhShapeControl = "10px"; // Buttons, inputs, selects, tabs
+export const OhShapeContainer = "10px"; // Alerts, modals, dropdowns, accordion items, panels
+export const OhShapeLarge = "14px"; // Cards
+export const OhShapeCompact = "6px"; // Small controls and tags: close buttons, checkboxes, badges, code blocks
+export const OhShapeTight = "4px"; // Focus outlines on text links, inline code
+export const OhShapePill = "9999px"; // Pills, radios, toggles, progress bars
 export const OhElevationNone = "none";
 export const OhElevationSoft =
   "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)"; // Cards, raised elements
@@ -308,31 +383,65 @@ export const OhElevationStrong =
 export const OhElevationGlow =
   "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)"; // Focus ring
 export const OhElevationInset = "inset 0 1px 3px rgba(61, 50, 41, 0.08)"; // Inputs, wells
+export const OhElevationSurfaceFlat =
+  "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)";
+export const OhElevationSurfaceRaised =
+  "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)";
+export const OhElevationSurfaceLifted =
+  "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)"; // Hovered
+export const OhElevationSurfacePressed =
+  "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)";
+export const OhElevationSurfaceFocused =
+  "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)"; // Sits under the focus glow
+export const OhElevationSurfaceFeatured =
+  "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)";
+export const OhElevationSurfaceFeaturedLifted =
+  "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)";
+export const OhElevationSurfaceFeaturedFocused =
+  "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)";
+export const OhElevationOffsetXs = "1px";
+export const OhElevationOffsetSm = "2px";
+export const OhElevationOffsetMd = "3px";
+export const OhElevationOffsetLg = "4px";
+export const OhElevationOffsetXl = "5px";
+export const OhElevationOffset2xl = "6px";
+export const OhLiftHoverSm = "-1px";
+export const OhLiftHoverMd = "-2px";
+export const OhLiftPressSm = "1px";
+export const OhLiftPressMd = "2px";
+export const OhStrokeControl = "2.5px"; // Controls and framed containers: buttons, fields, checkboxes, alerts, dialogs
+export const OhStrokeSurface = "1px"; // Card edges
+export const OhStrokeDivider = "1px"; // Lines between sections
+export const OhDecorationUnderlineThickness = "2px";
+export const OhDecorationUnderlineFocusThickness = "3px"; // The solid underline that shows keyboard focus on inline links
+export const OhDecorationUnderlineDash = "4px";
+export const OhDecorationUnderlinePeriod = "8px";
 export const OhFocusRingWidth = "3px";
-export const OhFocusRingColor = "#c5430059";
-export const OhFocusGlowColor = "#c5430026";
+export const OhFocusRingOffset = "2px";
+export const OhFocusRingColor = "#c54300"; // The focus colour: outlines, focused control borders. Must stay opaque (4.7:1 on cream, WCAG 1.4.11)
+export const OhFocusGlowColor = "#c5430026"; // Decorative glow only — never the sole focus indicator
 export const OhButtonBaseFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhButtonBaseFontWeight = "500";
+export const OhButtonBaseFontWeight = "600";
 export const OhButtonBaseLetterSpacing = "0.01em";
 export const OhButtonBaseBorderRadius = "10px";
 export const OhButtonBaseBorderWidth = "2.5px";
 export const OhButtonBaseTransitionDuration = "150ms";
 export const OhButtonBaseTransitionEasing = [0.34, 1.3, 0.64, 1];
-export const OhButtonSizeSmFontSize = "0.875rem";
-export const OhButtonSizeSmPaddingX = "0.75rem";
+export const OhButtonSizeSmFontSize = "1rem";
+export const OhButtonSizeSmPaddingX = "1rem";
 export const OhButtonSizeSmPaddingY = "0.5rem";
-export const OhButtonSizeSmMinHeight = "36px";
-export const OhButtonSizeSmGap = "0.375rem";
-export const OhButtonSizeMdFontSize = "0.875rem";
-export const OhButtonSizeMdPaddingX = "1rem";
-export const OhButtonSizeMdPaddingY = "0.625rem";
-export const OhButtonSizeMdMinHeight = "44px";
+export const OhButtonSizeSmMinHeight = "40px";
+export const OhButtonSizeSmGap = "0.5rem";
+export const OhButtonSizeMdFontSize = "1.125rem";
+export const OhButtonSizeMdPaddingX = "1.5rem";
+export const OhButtonSizeMdPaddingY = "0.75rem";
+export const OhButtonSizeMdMinHeight = "48px";
 export const OhButtonSizeMdGap = "0.5rem";
-export const OhButtonSizeLgFontSize = "1rem";
-export const OhButtonSizeLgPaddingX = "1.5rem";
-export const OhButtonSizeLgPaddingY = "0.875rem";
-export const OhButtonSizeLgMinHeight = "52px";
+export const OhButtonSizeLgFontSize = "1.25rem";
+export const OhButtonSizeLgPaddingX = "2rem";
+export const OhButtonSizeLgPaddingY = "1rem";
+export const OhButtonSizeLgMinHeight = "56px";
 export const OhButtonSizeLgGap = "0.625rem";
 export const OhButtonVariantPrimaryBackground = "#c54300";
 export const OhButtonVariantPrimaryBackgroundHover = "#9e3500";
@@ -341,7 +450,7 @@ export const OhButtonVariantPrimaryColor = "#ffffff";
 export const OhButtonVariantPrimaryBorderColor = "#c54300";
 export const OhButtonVariantPrimaryShadowColor = "#e8c4a0";
 export const OhButtonVariantSecondaryBackground = "#faf7f2";
-export const OhButtonVariantSecondaryBackgroundHover = "#ffffff";
+export const OhButtonVariantSecondaryBackgroundHover = "#fff4e6";
 export const OhButtonVariantSecondaryBackgroundActive = "#f0ebe3";
 export const OhButtonVariantSecondaryColor = "#3d3229";
 export const OhButtonVariantSecondaryBorderColor = "#6b5d4d";
@@ -352,8 +461,7 @@ export const OhButtonVariantAccentBackgroundActive = "#2e4460";
 export const OhButtonVariantAccentColor = "#ffffff";
 export const OhButtonVariantAccentBorderColor = "#3d5a80";
 export const OhButtonVariantAccentShadowColor = "#a0b4c8";
-export const OhButtonFocusRingWidth = "3px";
-export const OhButtonFocusRingColor = "#c5430059";
+export const OhButtonFocusRingColor = "#c54300";
 export const OhButtonFocusGlowColor = "#c5430026";
 export const OhInputBaseFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
@@ -379,7 +487,7 @@ export const OhInputStateErrorBorderColor = "#b54540";
 export const OhInputStateErrorBackground = "#fdf4f3";
 export const OhInputStateErrorShadowColor = "#b545404d";
 export const OhCardBaseBackground = "#f5f0e8";
-export const OhCardBaseBorderRadius = "10px";
+export const OhCardBaseBorderRadius = "14px";
 export const OhCardBaseBorderWidth = "1px";
 export const OhCardBaseBorderColor = "#e2dcd2";
 export const OhCardBaseShadow =
@@ -391,17 +499,35 @@ export const OhCardInteractiveBackgroundHover = "#faf7f2";
 export const OhCardInteractiveBorderColorHover = "#c5430040";
 export const OhCardInteractiveShadowHover =
   "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)";
+export const OhCardRaisedGradientStart = "#ffffff";
+export const OhCardRaisedGradientMid = "#faf7f2";
+export const OhCardRaisedGradientEnd = "#f5f0e8";
+export const OhCardRaisedBorderColor = "#e2dcd2";
+export const OhCardFlatGradientStart = "#faf7f2";
+export const OhCardFlatGradientEnd = "#f5f0e8";
+export const OhCardFlatBorderColor = "#e2dcd2";
 export const OhCardSunlitBackground =
-  "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)";
+  "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)";
+export const OhCardSunlitGradientStart = "#fffbf5";
+export const OhCardSunlitGradientMid = "#fdf6ee";
+export const OhCardSunlitGradientEnd = "#f8efe4";
 export const OhCardSunlitBorderColor = "#c5430040";
+export const OhCardSunlitBorderColorHover = "#c5430059";
 export const OhCardSunlitShadow =
   "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)";
+export const OhCardSectionDividerColor = "#e2d5c899";
+export const OhCardSectionHeaderGradientStart = "#ffffff80";
+export const OhCardSectionHeaderGradientEnd = "#ffffff00";
+export const OhProgressTrackInsetShadow = "#0000000f"; // Neutral, so it works on every track colour
+export const OhProgressInverseTrackBackground = "#ffffff26";
+export const OhProgressInverseTrackBorder = "#ffffff4d";
+export const OhProgressInverseFill = "#faf7f2";
 export const OhBadgeBaseFontFamily =
   "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
-export const OhBadgeBaseFontSize = "0.75rem";
+export const OhBadgeBaseFontSize = "1rem";
 export const OhBadgeBaseFontWeight = "500";
 export const OhBadgeBaseLetterSpacing = "0.01em";
-export const OhBadgeBaseBorderRadius = "9999px";
+export const OhBadgeBaseBorderRadius = "6px";
 export const OhBadgeBasePaddingX = "0.625rem";
 export const OhBadgeBasePaddingY = "0.25rem";
 export const OhBadgeVariantBrandBackground = "#fff3e0";
@@ -409,7 +535,7 @@ export const OhBadgeVariantBrandColor = "#c54300";
 export const OhBadgeVariantAccentBackground = "#eef4f9";
 export const OhBadgeVariantAccentColor = "#3d5a80";
 export const OhBadgeVariantSuccessBackground = "#f0f7f1";
-export const OhBadgeVariantSuccessColor = "#4a8a4c";
+export const OhBadgeVariantSuccessColor = "#3d7340";
 export const OhBadgeVariantErrorBackground = "#fdf4f3";
 export const OhBadgeVariantErrorColor = "#b54540";
 export const OhBadgeVariantWarningBackground = "#fefaee";
@@ -420,3 +546,7 @@ export const OhLinkColor = "#c54300";
 export const OhLinkColorHover = "#9e3500";
 export const OhLinkTextDecoration = "underline";
 export const OhLinkTextDecorationHover = "none";
+export const OhLinkInverseFocusBackground = "#0000001a"; // Focus tint — paired with the underline, which is the indicator
+export const OhModalOverlay = "#3d322999";
+export const OhCloseButtonBackgroundHover = "#00000014"; // Neutral tint that works on every alert variant
+export const OhCloseButtonShadowHover = "#00000026"; // Offset shadow colour on hover and press. Neutral, like the background, so it works on every alert variant