@orange-halo/tokens 1.0.0

package/dist/tokens.js

@@ -0,0 +1,422 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const OhColorOrange50 = "#fff3e0";
+export const OhColorOrange100 = "#ffe0b2";
+export const OhColorOrange200 = "#ffcc80";
+export const OhColorOrange300 = "#ffb74d";
+export const OhColorOrange400 = "#ffa726";
+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 OhColorHoney50 = "#fefaee";
+export const OhColorHoney100 = "#fdf3d4";
+export const OhColorHoney200 = "#fbe7a8";
+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 OhColorHoney800 = "#6b4815";
+export const OhColorTerracotta50 = "#fbf5f0";
+export const OhColorTerracotta100 = "#f5e8de";
+export const OhColorTerracotta200 = "#e8cdbf";
+export const OhColorTerracotta300 = "#d4a88f";
+export const OhColorTerracotta400 = "#bf8060";
+export const OhColorTerracotta500 = "#a0522d"; // Signature terracotta — WCAG AA (5.3:1)
+export const OhColorTerracotta600 = "#8b4726";
+export const OhColorTerracotta700 = "#6f3920";
+export const OhColorTerracotta800 = "#5a2f1a";
+export const OhColorTerracotta900 = "#452414";
+export const OhColorEucalyptus50 = "#f0f6f6";
+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 OhColorEucalyptus600 = "#4d7172";
+export const OhColorEucalyptus700 = "#3f5c5d"; // WCAG AA (6.2:1)
+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 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 OhColorGreen50 = "#f0f7f1";
+export const OhColorGreen100 = "#d9edd9";
+export const OhColorGreen500 = "#5a9a5c";
+export const OhColorGreen600 = "#4a8a4c"; // WCAG AA (4.5:1)
+export const OhColorGreen700 = "#3d7340";
+export const OhColorRed50 = "#fdf4f3";
+export const OhColorRed100 = "#f9e0dc";
+export const OhColorRed500 = "#c75450";
+export const OhColorRed600 = "#b54540"; // WCAG AA (4.8:1)
+export const OhColorRed700 = "#943836"; // Hover/active state
+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 OhColorBlue600 = "#354f70"; // Hover state
+export const OhColorBlue700 = "#2e4460"; // Active state
+export const OhColorBlue800 = "#253850";
+export const OhColorWhite = "#ffffff"; // Pure white for inputs/highlights
+export const OhColorBrandPrimary = "#c54300"; // Primary brand action — WCAG AA
+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 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 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 OhColorBorderDefault = "#e2dcd2"; // Standard border
+export const OhColorBorderSubtle = "#ede8df"; // Subtle dividers
+export const OhColorBorderEmphasis = "#6b5d4d"; // Strong border for form elements
+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 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 OhColorTextBrand = "#c54300";
+export const OhColorTextOnBrand = "#ffffff"; // Light text on dark brand bg
+export const OhColorTextOnAccent = "#ffffff"; // Light text on dark accent bg
+export const OhFontFamilySans =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhFontFamilyDisplay =
+  "'Bricolage Grotesque', 'General Sans', sans-serif";
+export const OhFontFamilyMono =
+  "'JetBrains Mono', 'Fira Code', ui-monospace, monospace";
+export const OhFontSizeXs = "0.75rem"; // 12px
+export const OhFontSizeSm = "0.875rem"; // 14px
+export const OhFontSizeBase = "1rem"; // 16px
+export const OhFontSizeLg = "1.125rem"; // 18px
+export const OhFontSizeXl = "1.25rem"; // 20px
+export const OhFontSize2xl = "1.625rem"; // 26px
+export const OhFontSize3xl = "2rem"; // 32px
+export const OhFontSize4xl = "2.625rem"; // 42px
+export const OhFontSize5xl = "3.25rem"; // 52px
+export const OhFontWeightNormal = "400";
+export const OhFontWeightMedium = "500";
+export const OhFontWeightSemibold = "600";
+export const OhFontWeightBold = "700";
+export const OhFontLineHeightNone = 1;
+export const OhFontLineHeightTight = 1.25;
+export const OhFontLineHeightSnug = 1.35;
+export const OhFontLineHeightNormal = 1.5;
+export const OhFontLineHeightRelaxed = 1.65;
+export const OhFontLineHeightLoose = 1.8;
+export const OhFontLetterSpacingTighter = "-0.02em";
+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 OhRadiusNone = "0";
+export const OhRadiusXs = "4px"; // Small details, chips
+export const OhRadiusSm = "6px"; // Buttons, inputs
+export const OhRadiusMd = "10px"; // Cards, panels
+export const OhRadiusLg = "14px"; // Modals, large containers
+export const OhRadiusXl = "20px"; // Hero elements
+export const OhRadiusFull = "9999px"; // Avatars, pills
+export const OhShadowNone = "none";
+export const OhShadowSoft =
+  "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)"; // Cards, raised elements
+export const OhShadowMedium =
+  "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"; // Dropdowns, popovers
+export const OhShadowStrong =
+  "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)"; // Modals, dialogs
+export const OhShadowGlow =
+  "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)"; // Focus ring — warm and friendly
+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 OhShadowChunkyError = "#b545404d"; // Error state shadow
+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 OhGradientSunlit =
+  "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)"; // Gentle warmth for surfaces
+export const OhGradientWarm =
+  "linear-gradient(135deg, #C54300 0%, #FF9800 100%)"; // Brand emphasis
+export const OhGradientNostalgic =
+  "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)"; // Subtle retro depth
+export const OhMotionDurationQuick = "100ms"; // Micro-interactions (color shifts)
+export const OhMotionDurationSnappy = "150ms"; // Button/input transitions
+export const OhMotionDurationGentle = "200ms"; // Standard interactions (hover, focus)
+export const OhMotionDurationRelaxed = "300ms"; // Larger transitions (panels)
+export const OhMotionDurationSlow = "400ms"; // Emphasis animations
+export const OhMotionEasingGentle = [0.4, 0, 0.2, 1]; // Default — smooth and natural
+export const OhMotionEasingOut = [0, 0, 0.2, 1]; // Enters and reveals
+export const OhMotionEasingIn = [0.4, 0, 1, 1]; // Exits
+export const OhMotionEasingPlayful = [0.34, 1.3, 0.64, 1]; // Celebrations — slight overshoot
+export const OhMotionQuick = "100ms";
+export const OhMotionSnappy = "150ms";
+export const OhMotionGentle = "200ms";
+export const OhMotionRelaxed = "300ms";
+export const OhMotionSlow = "400ms";
+export const OhMotionEaseGentle = [0.4, 0, 0.2, 1];
+export const OhMotionEaseOut = [0, 0, 0.2, 1];
+export const OhMotionEasePlayful = [0.34, 1.3, 0.64, 1];
+export const OhBorderWidth0 = "0";
+export const OhBorderWidth1 = "1px";
+export const OhBorderWidth2 = "2px";
+export const OhZIndex0 = 0;
+export const OhZIndex10 = 10;
+export const OhZIndex20 = 20;
+export const OhZIndexDropdown = 1000;
+export const OhZIndexSticky = 1100;
+export const OhZIndexModal = 1200;
+export const OhZIndexPopover = 1300;
+export const OhZIndexTooltip = 1400;
+export const OhTypographyHeadingFontFamily =
+  "'Bricolage Grotesque', 'General Sans', sans-serif";
+export const OhTypographyHeadingH1FontSize = "2.625rem";
+export const OhTypographyHeadingH1FontWeight = "700";
+export const OhTypographyHeadingH1LineHeight = 1.25;
+export const OhTypographyHeadingH1LetterSpacing = "-0.02em";
+export const OhTypographyHeadingH2FontSize = "2rem";
+export const OhTypographyHeadingH2FontWeight = "600";
+export const OhTypographyHeadingH2LineHeight = 1.25;
+export const OhTypographyHeadingH2LetterSpacing = "-0.01em";
+export const OhTypographyHeadingH3FontSize = "1.625rem";
+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 OhTypographyHeadingH4LineHeight = 1.35;
+export const OhTypographyHeadingH4LetterSpacing = "0";
+export const OhTypographyHeadingH5FontSize = "1.125rem";
+export const OhTypographyHeadingH5FontWeight = "500";
+export const OhTypographyHeadingH5LineHeight = 1.5;
+export const OhTypographyHeadingH6FontSize = "1rem";
+export const OhTypographyHeadingH6FontWeight = "500";
+export const OhTypographyHeadingH6LineHeight = 1.5;
+export const OhTypographyBodyFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhTypographyBodyLgFontSize = "1.125rem";
+export const OhTypographyBodyLgFontWeight = "400";
+export const OhTypographyBodyLgLineHeight = 1.65;
+export const OhTypographyBodyBaseFontSize = "1rem";
+export const OhTypographyBodyBaseFontWeight = "400";
+export const OhTypographyBodyBaseLineHeight = 1.5;
+export const OhTypographyBodySmFontSize = "0.875rem";
+export const OhTypographyBodySmFontWeight = "400";
+export const OhTypographyBodySmLineHeight = 1.5;
+export const OhTypographyBodySmLetterSpacing = "0.01em";
+export const OhTypographyBodyXsFontSize = "0.75rem";
+export const OhTypographyBodyXsFontWeight = "400";
+export const OhTypographyBodyXsLineHeight = 1.5;
+export const OhTypographyBodyXsLetterSpacing = "0.01em";
+export const OhTypographyLabelFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhTypographyLabelBaseFontSize = "0.875rem";
+export const OhTypographyLabelBaseFontWeight = "500";
+export const OhTypographyLabelBaseLineHeight = 1.5; // 1.5 for WCAG 1.4.12
+export const OhTypographyLabelBaseLetterSpacing = "0.01em";
+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 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 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
+export const OhElevationMedium =
+  "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)"; // Dropdowns, popovers
+export const OhElevationStrong =
+  "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)"; // Modals, dialogs
+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 OhFocusRingWidth = "3px";
+export const OhFocusRingColor = "#c5430059";
+export const OhFocusGlowColor = "#c5430026";
+export const OhButtonBaseFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhButtonBaseFontWeight = "500";
+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 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 OhButtonSizeMdGap = "0.5rem";
+export const OhButtonSizeLgFontSize = "1rem";
+export const OhButtonSizeLgPaddingX = "1.5rem";
+export const OhButtonSizeLgPaddingY = "0.875rem";
+export const OhButtonSizeLgMinHeight = "52px";
+export const OhButtonSizeLgGap = "0.625rem";
+export const OhButtonVariantPrimaryBackground = "#c54300";
+export const OhButtonVariantPrimaryBackgroundHover = "#9e3500";
+export const OhButtonVariantPrimaryBackgroundActive = "#9e3500";
+export const OhButtonVariantPrimaryColor = "#ffffff";
+export const OhButtonVariantPrimaryBorderColor = "#c54300";
+export const OhButtonVariantPrimaryShadowColor = "#e8c4a0";
+export const OhButtonVariantSecondaryBackground = "#faf7f2";
+export const OhButtonVariantSecondaryBackgroundHover = "#ffffff";
+export const OhButtonVariantSecondaryBackgroundActive = "#f0ebe3";
+export const OhButtonVariantSecondaryColor = "#3d3229";
+export const OhButtonVariantSecondaryBorderColor = "#6b5d4d";
+export const OhButtonVariantSecondaryShadowColor = "#d4c4b0";
+export const OhButtonVariantAccentBackground = "#3d5a80";
+export const OhButtonVariantAccentBackgroundHover = "#354f70";
+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 OhButtonFocusGlowColor = "#c5430026";
+export const OhInputBaseFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhInputBaseFontSize = "1.125rem";
+export const OhInputBaseLineHeight = 1.5;
+export const OhInputBaseBorderRadius = "10px";
+export const OhInputBaseBorderWidth = "2.5px";
+export const OhInputBaseTransitionDuration = "150ms";
+export const OhInputBaseTransitionEasing = [0.4, 0, 0.2, 1];
+export const OhInputSizeMdPaddingX = "1rem";
+export const OhInputSizeMdPaddingY = "0.75rem";
+export const OhInputSizeMdMinHeight = "48px";
+export const OhInputStateDefaultBackground = "#faf7f2";
+export const OhInputStateDefaultBorderColor = "#6b5d4d"; // WCAG 3:1 contrast for UI elements
+export const OhInputStateDefaultColor = "#3d3229";
+export const OhInputStateDefaultPlaceholderColor = "#6b5d4d"; // WCAG readable placeholder
+export const OhInputStateDefaultShadowColor = "#d4c4b0";
+export const OhInputStateHoverBorderColor = "#8b4726";
+export const OhInputStateFocusBackground = "#ffffff";
+export const OhInputStateFocusBorderColor = "#c54300";
+export const OhInputStateFocusFocusRingColor = "#c54300";
+export const OhInputStateErrorBorderColor = "#b54540";
+export const OhInputStateErrorBackground = "#fdf4f3";
+export const OhInputStateErrorShadowColor = "#b545404d";
+export const OhCardBaseBackground = "#f5f0e8";
+export const OhCardBaseBorderRadius = "10px";
+export const OhCardBaseBorderWidth = "1px";
+export const OhCardBaseBorderColor = "#e2dcd2";
+export const OhCardBaseShadow =
+  "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)";
+export const OhCardBasePadding = "1.25rem";
+export const OhCardInteractiveTransitionDuration = "200ms";
+export const OhCardInteractiveTransitionEasing = [0.4, 0, 0.2, 1];
+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 OhCardSunlitBackground =
+  "linear-gradient(180deg, #FAF7F2 0%, #F5EFE4 100%)";
+export const OhCardSunlitBorderColor = "#c5430040";
+export const OhCardSunlitShadow =
+  "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)";
+export const OhBadgeBaseFontFamily =
+  "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif";
+export const OhBadgeBaseFontSize = "0.75rem";
+export const OhBadgeBaseFontWeight = "500";
+export const OhBadgeBaseLetterSpacing = "0.01em";
+export const OhBadgeBaseBorderRadius = "9999px";
+export const OhBadgeBasePaddingX = "0.625rem";
+export const OhBadgeBasePaddingY = "0.25rem";
+export const OhBadgeVariantBrandBackground = "#fff3e0";
+export const OhBadgeVariantBrandColor = "#c54300";
+export const OhBadgeVariantAccentBackground = "#eef4f9";
+export const OhBadgeVariantAccentColor = "#3d5a80";
+export const OhBadgeVariantSuccessBackground = "#f0f7f1";
+export const OhBadgeVariantSuccessColor = "#4a8a4c";
+export const OhBadgeVariantErrorBackground = "#fdf4f3";
+export const OhBadgeVariantErrorColor = "#b54540";
+export const OhBadgeVariantWarningBackground = "#fefaee";
+export const OhBadgeVariantWarningColor = "#8c5e1c";
+export const OhBadgeVariantNeutralBackground = "#ede8df";
+export const OhBadgeVariantNeutralColor = "#6b5d4d";
+export const OhLinkColor = "#c54300";
+export const OhLinkColorHover = "#9e3500";
+export const OhLinkTextDecoration = "underline";
+export const OhLinkTextDecorationHover = "none";