@orange-halo/tokens 2.0.0 → 2.2.0

package/dist/brands/orange-halo-dark.json

@@ -0,0 +1,857 @@
+{
+  "$description": "Dark Theme — warm cocoa base, cozy evening Orange Halo. Overrides tier 2 only; every colour references the palette. Applies when data-theme=\"dark\" is set.",
+  "grid": {
+    "$description": "The brand's layout grid. Spacing is multiples of half a unit; type sizes and line heights sit on it (see style-dictionary.config.js)",
+    "unit": "8px"
+  },
+  "color": {
+    "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
+    "orange": {
+      "50": "#fff3e0",
+      "100": "#ffe0b2",
+      "200": "#ffcc80",
+      "300": "#ffb74d",
+      "400": "#ffa726",
+      "500": "#ff9800",
+      "600": "#fb8c00",
+      "700": "#f57c00",
+      "800": "#ef6c00",
+      "900": "#c54300",
+      "950": "#9e3500",
+      "$description": "Primary brand orange — vibrant and accessible"
+    },
+    "honey": {
+      "50": "#fefaee",
+      "100": "#fdf3d4",
+      "200": "#fbe7a8",
+      "300": "#f8d56f",
+      "400": "#e8a838",
+      "500": "#d4922c",
+      "600": "#b87a24",
+      "700": "#8c5e1c",
+      "800": "#6b4815",
+      "900": "#3d3529",
+      "$description": "Warm highlight — golden warmth for accents and feedback"
+    },
+    "terracotta": {
+      "50": "#fbf5f0",
+      "100": "#f5e8de",
+      "200": "#e8cdbf",
+      "300": "#d4a88f",
+      "400": "#bf8060",
+      "500": "#a0522d",
+      "600": "#8b4726",
+      "700": "#6f3920",
+      "800": "#5a2f1a",
+      "900": "#452414",
+      "$description": "Deep accent — earthy depth for active states and emphasis"
+    },
+    "eucalyptus": {
+      "50": "#f0f6f6",
+      "100": "#e0ebeb",
+      "200": "#c2d7d7",
+      "300": "#9ebebe",
+      "400": "#7aa3a4",
+      "500": "#5f8a8b",
+      "600": "#4d7172",
+      "700": "#3f5c5d",
+      "800": "#344a4b",
+      "900": "#2a3c3d",
+      "$description": "Reserve palette — not used by semantic tokens"
+    },
+    "warm": {
+      "$description": "Warm neutral scale — cream to walnut, no blue-gray",
+      "cream": "#faf7f2",
+      "linen": "#f5f0e8",
+      "dawn": "#fffbf5",
+      "shell": "#fdf6ee",
+      "biscuit": "#f8efe4",
+      "parchment": "#ede8df",
+      "sand": "#e2dcd2",
+      "dune": "#c9c1b4",
+      "stone": "#a09080",
+      "taupe": "#8a7a68",
+      "driftwood": "#6b5d4d",
+      "bark": "#52463a",
+      "hickory": "#4a3f33",
+      "chestnut": "#44382c",
+      "walnut": "#3d3229",
+      "mocha": "#352e28",
+      "cocoa": "#2a2420",
+      "espresso": "#1f1a17"
+    },
+    "green": {
+      "50": "#f0f7f1",
+      "100": "#d9edd9",
+      "300": "#7ab87c",
+      "500": "#5a9a5c",
+      "600": "#4a8a4c",
+      "700": "#3d7340",
+      "900": "#2a3629",
+      "$description": "Success — warm-tinted green"
+    },
+    "red": {
+      "50": "#fdf4f3",
+      "100": "#f9e0dc",
+      "300": "#e08f8d",
+      "500": "#c75450",
+      "600": "#b54540",
+      "700": "#943836",
+      "900": "#3d2a29",
+      "$description": "Error — warm-tinted red"
+    },
+    "blue": {
+      "50": "#eef4f9",
+      "100": "#d6e4f0",
+      "200": "#a0b4c8",
+      "300": "#7a9ab8",
+      "400": "#5a82a8",
+      "500": "#3d5a80",
+      "600": "#354f70",
+      "700": "#2e4460",
+      "800": "#253850",
+      "$description": "Blue accent — modern counterbalance for CTAs"
+    },
+    "white": "#ffffff",
+    "brand": {
+      "$description": "Honey replaces orange on dark — orange.900 is too dark to read on cocoa",
+      "primary": "#e8a838",
+      "primaryHover": "#f8d56f",
+      "primaryActive": "#d4922c",
+      "primarySubtle": "#3d3229",
+      "highlight": "#f8d56f",
+      "highlightSubtle": "#3d3529"
+    },
+    "accent": {
+      "$description": "Blue, as in light — lighter steps so it reads on cocoa",
+      "default": "#a0b4c8",
+      "hover": "#d6e4f0",
+      "active": "#7a9ab8",
+      "subtle": "#253850",
+      "shadow": "#253850"
+    },
+    "feedback": {
+      "$description": "Feedback colors — warm-tinted",
+      "success": "#7ab87c",
+      "successSubtle": "#2a3629",
+      "error": "#e08f8d",
+      "errorHover": "#f9e0dc",
+      "errorSubtle": "#3d2a29",
+      "errorShadow": "#3d2a29",
+      "warning": "#f8d56f",
+      "warningSubtle": "#3d3529",
+      "info": "#a0b4c8",
+      "infoSubtle": "#253850"
+    },
+    "surface": {
+      "$description": "Surface system — designed surfaces, not flat planes",
+      "base": "#2a2420",
+      "raised": "#3d3229",
+      "sunlit": "#44382c",
+      "inset": "#1f1a17",
+      "highlight": "#4a3f33",
+      "overlay": "#0f0c0ab3",
+      "disabled": "#352e28",
+      "hover": "#4a3f33",
+      "activePressed": "#352e28",
+      "featuredStart": "#fffbf5",
+      "featuredMid": "#fdf6ee",
+      "featuredEnd": "#f8efe4",
+      "sheen": "#ffffff80",
+      "backdrop": "#3d322999"
+    },
+    "border": {
+      "$description": "Border colors — visible and intentional",
+      "default": "#8a7a68",
+      "subtle": "#6b5d4d",
+      "emphasis": "#a09080",
+      "strong": "#a09080",
+      "hover": "#c9c1b4",
+      "disabled": "#4a3f33",
+      "brand": "#e8a8384d",
+      "brandHover": "#c5430059",
+      "divider": "#e2d5c899"
+    },
+    "text": {
+      "$description": "Text colors — calm and readable, not stark",
+      "primary": "#f5f0e8",
+      "secondary": "#c9c1b4",
+      "disabled": "#6b5d4d",
+      "inverse": "#2a2420",
+      "link": "#e8a838",
+      "linkHover": "#f8d56f",
+      "linkRaised": "#e8a838",
+      "brand": "#e8a838",
+      "onBrand": "#2a2420",
+      "onAccent": "#2a2420",
+      "onSuccess": "#2a2420",
+      "onError": "#2a2420",
+      "onWarning": "#2a2420",
+      "onInfo": "#2a2420"
+    }
+  },
+  "font": {
+    "family": {
+      "$description": "Bricolage Grotesque — playful, crafted, warm",
+      "sans": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "display": "'Bricolage Grotesque', 'General Sans', sans-serif",
+      "mono": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
+    },
+    "size": {
+      "$description": "Type scale on the brand's grid (grid.unit): every size is a multiple of half a unit. Strict: no size between xs and base",
+      "xs": "0.75rem",
+      "sm": "0.75rem",
+      "base": "1rem",
+      "lg": "1.25rem",
+      "xl": "1.5rem",
+      "2xl": "1.75rem",
+      "3xl": "2rem",
+      "4xl": "2.5rem",
+      "5xl": "3rem"
+    },
+    "weight": {
+      "$description": "Font weights for hierarchy",
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "$description": "Generous line heights for readability",
+      "none": 1,
+      "tight": 1.25,
+      "snug": 1.35,
+      "normal": 1.5,
+      "relaxed": 1.65,
+      "loose": 1.8
+    },
+    "letterSpacing": {
+      "$description": "Letter spacing — loose for small, tight for display",
+      "tighter": "-0.02em",
+      "tight": "-0.01em",
+      "normal": "0",
+      "wide": "0.01em",
+      "wider": "0.02em",
+      "widest": "0.05em"
+    }
+  },
+  "radius": {
+    "$description": "Friendly and soft — not sharp, not overly pill-shaped",
+    "none": "0",
+    "xs": "4px",
+    "sm": "6px",
+    "md": "10px",
+    "lg": "14px",
+    "xl": "20px",
+    "full": "9999px"
+  },
+  "shadow": {
+    "$description": "Chunky offset shadow colours — darker than the surface, so they read as shadow on dark",
+    "none": "none",
+    "soft": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
+    "medium": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
+    "strong": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
+    "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(61, 50, 41, 0.08)",
+    "chunky": {
+      "$description": "Offset chunky shadows for playful tactile feel",
+      "primary": "#e8c4a0",
+      "secondary": "#d4c4b0",
+      "accent": "#a0b4c8",
+      "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",
+    "neutral": "#6b5d4d26",
+    "neutralHover": "#6b5d4d33",
+    "overlay": "#6b5d4d40",
+    "field": "#3d322926"
+  },
+  "gradient": {
+    "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
+    "sunlit": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
+    "warm": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
+    "nostalgic": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)"
+  },
+  "motion": {
+    "$description": "Relaxed, playful motion",
+    "duration": {
+      "quick": "100ms",
+      "snappy": "150ms",
+      "gentle": "200ms",
+      "relaxed": "300ms",
+      "slow": "400ms"
+    },
+    "easing": {
+      "gentle": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "out": [
+        0,
+        0,
+        0.2,
+        1
+      ],
+      "in": [
+        0.4,
+        0,
+        1,
+        1
+      ],
+      "playful": [
+        0.34,
+        1.3,
+        0.64,
+        1
+      ]
+    },
+    "quick": "100ms",
+    "snappy": "150ms",
+    "gentle": "200ms",
+    "relaxed": "300ms",
+    "slow": "400ms",
+    "easeGentle": [
+      0.4,
+      0,
+      0.2,
+      1
+    ],
+    "easeOut": [
+      0,
+      0,
+      0.2,
+      1
+    ],
+    "easePlayful": [
+      0.34,
+      1.3,
+      0.64,
+      1
+    ]
+  },
+  "border": {
+    "width": {
+      "0": "0",
+      "1": "1px",
+      "2": "2px",
+      "$description": "Border widths",
+      "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. Multiples of half the brand's grid.unit (spacing.1 = half a unit, spacing.2 = one unit), computed per brand at build time by style-dictionary.config.js; the values written here are what an 8px grid gives. The x-5 steps fall between half-units: avoid them in new work",
+    "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": {
+      "$description": "Content max-widths",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    },
+    "breakpoint": {
+      "$description": "Viewport widths for @media queries. CSS can't read custom properties in a media query, so components write the value; check:tokens fails any (min|max)-width that isn't one of these (or one pixel either side, for adjoining ranges).",
+      "xs": "480px",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px"
+    }
+  },
+  "zIndex": {
+    "0": 0,
+    "10": 10,
+    "20": 20,
+    "$description": "Z-index layering",
+    "dropdown": 1000,
+    "sticky": 1100,
+    "modal": 1200,
+    "popover": 1300,
+    "tooltip": 1400
+  },
+  "typography": {
+    "$description": "Bricolage Grotesque — playful, crafted, warm",
+    "heading": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', sans-serif",
+      "h1": {
+        "fontSize": "2.5rem",
+        "fontWeight": "700",
+        "lineHeight": 1.2,
+        "letterSpacing": "-0.02em"
+      },
+      "h2": {
+        "fontSize": "2rem",
+        "fontWeight": "700",
+        "lineHeight": 1.25,
+        "letterSpacing": "-0.01em"
+      },
+      "h3": {
+        "fontSize": "1.75rem",
+        "fontWeight": "600",
+        "lineHeight": 1.4286,
+        "letterSpacing": "-0.01em"
+      },
+      "h4": {
+        "fontSize": "1.5rem",
+        "fontWeight": "600",
+        "lineHeight": 1.3333,
+        "letterSpacing": "0"
+      },
+      "h5": {
+        "fontSize": "1.25rem",
+        "fontWeight": "500",
+        "lineHeight": 1.6
+      },
+      "h6": {
+        "fontSize": "1rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5
+      }
+    },
+    "body": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "xl": {
+        "$description": "Lead paragraphs and hero subtitles",
+        "fontSize": "1.5rem",
+        "fontWeight": "400",
+        "lineHeight": 1.6667
+      },
+      "lg": {
+        "fontSize": "1.25rem",
+        "fontWeight": "400",
+        "lineHeight": 1.6
+      },
+      "base": {
+        "fontSize": "1rem",
+        "fontWeight": "400",
+        "lineHeight": 1.5
+      },
+      "sm": {
+        "fontSize": "0.75rem",
+        "fontWeight": "400",
+        "lineHeight": 1.6667,
+        "letterSpacing": "0.01em"
+      },
+      "xs": {
+        "fontSize": "0.75rem",
+        "fontWeight": "400",
+        "lineHeight": 1.6667,
+        "letterSpacing": "0.01em"
+      }
+    },
+    "label": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "base": {
+        "fontSize": "1rem",
+        "fontWeight": "500",
+        "lineHeight": 1.5,
+        "letterSpacing": "0.01em"
+      },
+      "sm": {
+        "fontSize": "0.75rem",
+        "fontWeight": "500",
+        "lineHeight": 1.6667,
+        "letterSpacing": "0.01em"
+      }
+    },
+    "eyebrow": {
+      "$description": "Small uppercase line above a heading (set text-transform: uppercase alongside)",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.05em"
+    },
+    "control": {
+      "$description": "Buttons, field labels, legends, select triggers and options, choice labels",
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.01em",
+      "fontSize": {
+        "sm": "1rem",
+        "md": "1.25rem",
+        "lg": "1.5rem"
+      }
+    },
+    "emphasis": {
+      "$description": "Inline emphasis inside body text: links, the selected option",
+      "fontWeight": "600"
+    },
+    "code": {
+      "fontFamily": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace",
+      "fontSize": "1rem",
+      "lineHeight": 1.5
+    }
+  },
+  "layout": {
+    "$description": "Layout sizes",
+    "container": {
+      "$description": "Max-width of a centred content column (oh-container, oh-hero)",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px"
+    }
+  },
+  "shape": {
+    "$description": "Friendly soft corners",
+    "control": "10px",
+    "container": "10px",
+    "large": "14px",
+    "compact": "6px",
+    "tight": "4px",
+    "pill": "9999px"
+  },
+  "elevation": {
+    "$description": "Black-based shadows — warm-brown shadows vanish on cocoa",
+    "none": "none",
+    "soft": "0 2px 8px rgba(0, 0, 0, 0.25)",
+    "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)",
+    "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",
+    "ringWidth": "3px",
+    "ringOffset": "2px",
+    "ringColor": "#e8a838",
+    "glowColor": "#e8a83833"
+  },
+  "button": {
+    "$description": "Button — chunky, tactile, playful with offset shadows",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontWeight": "600",
+      "letterSpacing": "0.01em",
+      "borderRadius": "10px",
+      "borderWidth": "2.5px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0.34,
+        1.3,
+        0.64,
+        1
+      ]
+    },
+    "size": {
+      "$description": "Matches oh-button.ts, which reads these. Minimum 16px text",
+      "sm": {
+        "fontSize": "1rem",
+        "paddingX": "1rem",
+        "paddingY": "0.5rem",
+        "minHeight": "40px",
+        "gap": "0.5rem"
+      },
+      "md": {
+        "fontSize": "1.25rem",
+        "paddingX": "1.5rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px",
+        "gap": "0.5rem"
+      },
+      "lg": {
+        "fontSize": "1.5rem",
+        "paddingX": "2rem",
+        "paddingY": "1rem",
+        "minHeight": "56px",
+        "gap": "0.625rem"
+      }
+    },
+    "variant": {
+      "primary": {
+        "$description": "Primary — warm orange, chunky tactile shadow",
+        "background": "#e8a838",
+        "backgroundHover": "#f8d56f",
+        "backgroundActive": "#d4922c",
+        "color": "#2a2420",
+        "borderColor": "#e8a838",
+        "shadowColor": "#6b4815"
+      },
+      "secondary": {
+        "$description": "Secondary — cream surface with emphasis border",
+        "background": "#2a2420",
+        "backgroundHover": "#4a3f33",
+        "backgroundActive": "#352e28",
+        "color": "#f5f0e8",
+        "borderColor": "#a09080",
+        "shadowColor": "#1f1a17"
+      },
+      "accent": {
+        "$description": "Accent — blue, modern counterbalance",
+        "background": "#a0b4c8",
+        "backgroundHover": "#d6e4f0",
+        "backgroundActive": "#7a9ab8",
+        "color": "#2a2420",
+        "borderColor": "#a0b4c8",
+        "shadowColor": "#253850"
+      }
+    },
+    "focus": {
+      "$description": "Focus is an underline in focus.ringColor; glow is decoration",
+      "ringColor": "#e8a838",
+      "glowColor": "#e8a83833"
+    }
+  },
+  "input": {
+    "$description": "Input — chunky border, inset shadow, tactile feel",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1.25rem",
+      "lineHeight": 1.5,
+      "borderRadius": "10px",
+      "borderWidth": "2.5px",
+      "transitionDuration": "150ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ]
+    },
+    "size": {
+      "md": {
+        "paddingX": "1rem",
+        "paddingY": "0.75rem",
+        "minHeight": "48px"
+      }
+    },
+    "state": {
+      "default": {
+        "background": "#2a2420",
+        "borderColor": "#a09080",
+        "color": "#f5f0e8",
+        "placeholderColor": "#c9c1b4",
+        "shadowColor": "#1f1a17"
+      },
+      "hover": {
+        "borderColor": "#c9c1b4"
+      },
+      "focus": {
+        "background": "#4a3f33",
+        "borderColor": "#e8a838",
+        "focusRingColor": "#e8a838"
+      },
+      "error": {
+        "borderColor": "#e08f8d",
+        "background": "#3d2a29",
+        "shadowColor": "#3d2a29"
+      }
+    }
+  },
+  "card": {
+    "$description": "Card — raised surface with visible frame",
+    "base": {
+      "background": "#3d3229",
+      "borderRadius": "14px",
+      "borderWidth": "1px",
+      "borderColor": "#8a7a68",
+      "shadow": "0 2px 8px rgba(0, 0, 0, 0.25)",
+      "padding": "1.25rem"
+    },
+    "interactive": {
+      "$description": "Interactive card — gentle warmth on hover",
+      "transitionDuration": "200ms",
+      "transitionEasing": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "backgroundHover": "#2a2420",
+      "borderColorHover": "#e8a8384d",
+      "shadowHover": "0 4px 16px rgba(0, 0, 0, 0.3)"
+    },
+    "raised": {
+      "$description": "Raised card (default) — subtle top-lit gradient",
+      "gradientStart": "#4a3f33",
+      "gradientMid": "#2a2420",
+      "gradientEnd": "#3d3229",
+      "borderColor": "#8a7a68"
+    },
+    "flat": {
+      "$description": "Flat card — border-led, minimal shadow",
+      "gradientStart": "#2a2420",
+      "gradientEnd": "#3d3229",
+      "borderColor": "#8a7a68"
+    },
+    "sunlit": {
+      "$description": "Sunlit card — featured with gradient",
+      "background": "linear-gradient(180deg, #fffbf5 0%, #fdf6ee 30%, #f8efe4 100%)",
+      "gradientStart": "#fffbf5",
+      "gradientMid": "#fdf6ee",
+      "gradientEnd": "#f8efe4",
+      "borderColor": "#e8a8384d",
+      "borderColorHover": "#c5430059",
+      "shadow": "0 4px 16px rgba(0, 0, 0, 0.3)"
+    },
+    "section": {
+      "$description": "Card header and footer",
+      "dividerColor": "#e2d5c899",
+      "headerGradientStart": "#ffffff80",
+      "headerGradientEnd": "#ffffff00"
+    }
+  },
+  "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",
+      "trackBorder": "#ffffff4d",
+      "fill": "#2a2420"
+    }
+  },
+  "badge": {
+    "$description": "Badge — small status indicators",
+    "base": {
+      "fontFamily": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+      "fontSize": "1rem",
+      "fontWeight": "500",
+      "letterSpacing": "0.01em",
+      "borderRadius": "6px",
+      "paddingX": "0.625rem",
+      "paddingY": "0.25rem"
+    },
+    "variant": {
+      "brand": {
+        "background": "#3d3229",
+        "color": "#e8a838"
+      },
+      "accent": {
+        "background": "#253850",
+        "color": "#a0b4c8"
+      },
+      "success": {
+        "background": "#2a3629",
+        "color": "#7ab87c"
+      },
+      "error": {
+        "background": "#3d2a29",
+        "color": "#e08f8d"
+      },
+      "warning": {
+        "background": "#3d3529",
+        "color": "#f8d56f"
+      },
+      "neutral": {
+        "background": "#1f1a17",
+        "color": "#c9c1b4"
+      }
+    }
+  },
+  "link": {
+    "$description": "Link — warm brand color",
+    "color": "#e8a838",
+    "colorHover": "#f8d56f",
+    "textDecoration": "underline",
+    "textDecorationHover": "none",
+    "inverse": {
+      "$description": "On brand/accent backgrounds",
+      "focusBackground": "#0000001a"
+    }
+  },
+  "modal": {
+    "$description": "Modal dialog",
+    "overlay": "#3d322999"
+  },
+  "closeButton": {
+    "$description": "Icon-only close buttons in alerts and modals",
+    "backgroundHover": "#00000014",
+    "shadowHover": "#00000026"
+  }
+}