1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T4eec,/** * The token registry, in TypeScript. * * design-system/tokens/*.css declares the tokens for the browser. This file * describes them for code — so a swatch table, a theme picker, a Figma export * or a lint rule is generated from the same list the stylesheet uses, never * transcribed from it. * * If you add a token, add it in BOTH places. That rule is inherited from the * design-system site and it is the only thing keeping the two halves honest. * * Nothing here is a runtime dependency of any component — components read CSS * variables. This module exists for tooling and documentation. */ /* ------------------------------------------------------------------ colour */ export type Shade = { /** The name the brand actually uses in conversation. */ name: string; /** Numeric step, for code. */ step: string; hex: string; /** The CSS custom property that carries it. */ token: string; /** Where this shade is allowed to appear. */ use: string; }; export const BRAND_RAMP: Shade[] = [ { name: "Whisper", step: "50", hex: "#FDEFE7", token: "--color-brand-50", use: "Tinted page sections, hover fills on white" }, { name: "Sand", step: "100", hex: "#FADECF", token: "--color-brand-100", use: "Badge and chip backgrounds, table row highlight" }, { name: "Peach", step: "200", hex: "#F8CEB6", token: "--color-brand-200", use: "Dividers on tinted surfaces, disabled accent" }, { name: "Apricot", step: "300", hex: "#F6BE9E", token: "--color-brand-300", use: "Illustration mid-tone, chart series 3" }, { name: "Coral", step: "400", hex: "#F19D6E", token: "--color-brand-400", use: "Illustration, chart series 2, decorative only" }, { name: "Tangerine", step: "500", hex: "#ED7D3D", token: "--color-brand-500", use: "Chart series 1, gradient stop, never text" }, { name: "Woohl Orange", step: "600", hex: "#F4521B", token: "--color-brand-600", use: "THE accent. Primary buttons, links, focus, the mark" }, { name: "Ember", step: "700", hex: "#E85C0D", token: "--color-brand-700", use: "Hover state for Woohl Orange surfaces" }, { name: "Rust", step: "800", hex: "#BA4A0A", token: "--color-brand-800", use: "Pressed state; accent text on white when AA is required" }, { name: "Cinnamon", step: "900", hex: "#8B3708", token: "--color-brand-900", use: "Accent text at small sizes, warm dark UI" }, { name: "Cocoa", step: "950", hex: "#5D2505", token: "--color-brand-950", use: "Deep warm backgrounds, print duotone shadow" }, ]; export const DEEP_TONES: Shade[] = [ { name: "Espresso", step: "—", hex: "#461C04", token: "--color-espresso", use: "Warm dark surface alternative to Ink" }, { name: "Bark", step: "—", hex: "#2E1203", token: "--color-bark", use: "Packaging, print, deep editorial backgrounds" }, { name: "Pitch", step: "—", hex: "#170901", token: "--color-pitch", use: "Maximum-depth warm black" }, ]; export const NEUTRAL_RAMP: Shade[] = [ { name: "Paper", step: "0", hex: "#FFFFFF", token: "--color-paper", use: "Default surface — roughly 70% of every layout" }, { name: "Mist", step: "50", hex: "#FAF9F7", token: "--color-neutral-50", use: "Barely-there section banding" }, { name: "Canvas", step: "100", hex: "#F4F2EF", token: "--color-neutral-100", use: "Page background behind cards" }, { name: "Linen", step: "200", hex: "#EEEBE7", token: "--color-neutral-200", use: "Sunken wells, code blocks, inactive tabs" }, { name: "Chalk", step: "300", hex: "#E6E3DE", token: "--color-neutral-300", use: "Default border — the one you reach for" }, { name: "Stone", step: "400", hex: "#D8D4CE", token: "--color-neutral-400", use: "Strong border, unchecked control outline" }, { name: "Ash", step: "500", hex: "#B8B3AC", token: "--color-neutral-500", use: "Placeholder text, disabled labels, slide footers" }, { name: "Clay", step: "600", hex: "#9A958E", token: "--color-neutral-600", use: "Muted metadata and captions" }, { name: "Slate", step: "700", hex: "#6B6660", token: "--color-neutral-700", use: "Secondary body copy" }, { name: "Char", step: "800", hex: "#3A3835", token: "--color-neutral-800", use: "Lead paragraphs on light" }, { name: "Soot", step: "900", hex: "#1D1B19", token: "--color-neutral-900", use: "Alternative dark surface" }, { name: "Ink", step: "950", hex: "#111111", token: "--color-ink", use: "Primary text, and the dark surface for hero moments" }, ]; /** * Measured off production. The neutral ramp above is the social-artboard * system; these are what the storefront actually paints. Where the two * disagree, the product wins for anything shipping on woohl.com. */ export const PRODUCT_SURFACES: Shade[] = [ { name: "Warm text", step: "—", hex: "#4A4540", token: "--color-warm-text", use: "Body copy on the storefront" }, { name: "Warm muted", step: "—", hex: "#7A7268", token: "--color-warm-muted", use: "Metadata, captions, helper text" }, { name: "Warm surface", step: "—", hex: "#FFF7ED", token: "--color-warm-surface", use: "Section background behind cards" }, { name: "Warm dark", step: "—", hex: "#1C1610", token: "--color-warm-dark", use: "Footer and dark sections — not pure Ink" }, { name: "Cream", step: "—", hex: "#E8DCC8", token: "--color-cream", use: "Dividers and captions inside dark sections" }, { name: "Terracotta", step: "—", hex: "#C85A2A", token: "--color-terracotta", use: "Accent text at sizes where Woohl Orange fails AA" }, ]; export type StatusToken = { name: string; hex: string; subtle: string; border: string; use: string; }; /** Four, each with a solid, a subtle fill and a border. Never a brand accent. */ export const STATUS_TOKENS: StatusToken[] = [ { name: "Success", hex: "#0E7A50", subtle: "#E6F3ED", border: "#A8D8C2", use: "Order confirmed, payout sent, verified maker" }, { name: "Warning", hex: "#A9670B", subtle: "#FBF0DC", border: "#EBCB8E", use: "Low stock, action needed, expiring soon" }, { name: "Danger", hex: "#B3261E", subtle: "#FBEAE8", border: "#E9B5B0", use: "Failed payment, destructive action, validation error" }, { name: "Info", hex: "#1C5D9B", subtle: "#E8F0F8", border: "#A9C6E4", use: "Neutral system messages, tips, shipping updates" }, ]; /** * The semantic layer — the only colour interface components may use. * `light` and `dark` are the base theme's resolved values; a product theme may * change them, which is the entire point of the theme layer. */ export const SEMANTIC_COLOR_TOKENS = [ { token: "--surface", utility: "bg-surface", role: "Canvas behind cards", light: "#F4F2EF", dark: "#17150F" }, { token: "--surface-raised", utility: "bg-surface-raised", role: "Cards, panels, inputs", light: "#FFFFFF", dark: "#211E17" }, { token: "--surface-sunken", utility: "bg-surface-sunken", role: "Wells, code, inactive tabs", light: "#EEEBE7", dark: "#100E0A" }, { token: "--surface-inverse", utility: "bg-surface-inverse", role: "Hero blocks, dark sections", light: "#111111", dark: "#F4F2EF" }, { token: "--surface-accent", utility: "bg-surface-accent", role: "Primary buttons, active states", light: "#F4521B", dark: "#F4521B" }, { token: "--surface-accent-hover", utility: "bg-surface-accent-hover", role: "Hover on an accent fill", light: "#E85C0D", dark: "#FF6A33" }, { token: "--surface-accent-pressed", utility: "bg-surface-accent-pressed", role: "Pressed on an accent fill", light: "#BA4A0A", dark: "#E85C0D" }, { token: "--surface-accent-subtle", utility: "bg-surface-accent-subtle", role: "Badge fills, hover tints", light: "#FDEFE7", dark: "rgb(244 82 27 / 0.14)" }, { token: "--border-subtle", utility: "border-border-subtle", role: "Default border", light: "#E6E3DE", dark: "#322D24" }, { token: "--border-strong", utility: "border-border-strong", role: "Hover border, control outline", light: "#D8D4CE", dark: "#453F33" }, { token: "--border-accent", utility: "border-border-accent", role: "Focused field, selected control", light: "#F4521B", dark: "#FF7A45" }, { token: "--border-inverse", utility: "border-border-inverse", role: "Dividers inside a dark section", light: "rgb(255 255 255 / 0.18)", dark: "rgb(17 17 17 / 0.18)" }, { token: "--text-primary", utility: "text-text-primary", role: "Body and headings", light: "#111111", dark: "#F6F3EE" }, { token: "--text-secondary", utility: "text-text-secondary", role: "Supporting copy", light: "#4A4540", dark: "#B8B0A3" }, { token: "--text-muted", utility: "text-text-muted", role: "Metadata, captions, placeholder", light: "#7A7268", dark: "#8D857A" }, { token: "--text-inverse", utility: "text-text-inverse", role: "Text on a dark surface", light: "#FFFFFF", dark: "#111111" }, { token: "--text-accent", utility: "text-text-accent", role: "Links, accent type at 24px+", light: "#F4521B", dark: "#FF7A45" }, { token: "--text-accent-strong", utility: "text-text-accent-strong", role: "Accent text under 24px — passes AA", light: "#BA4A0A", dark: "#FF9066" }, { token: "--text-on-accent", utility: "text-text-on-accent", role: "Text on Woohl Orange", light: "#FFFFFF", dark: "#FFFFFF" }, ] as const; /* -------------------------------------------------------------------- type */ export type TypeStep = { name: string; /** Token name, and the Tailwind utility it generates. */ token: string; utility: string; /** Size on the web/product scale. */ web: string; /** Size on the 1080px social artboard, where the editorial scale is 2×. */ social: string; weight: string; tracking: string; leading: string; use: string; }; /** System A. Campaigns, social, print, decks, brand pages. Never product UI. */ export const EDITORIAL_SCALE: TypeStep[] = [ { name: "Display", token: "--text-editorial-display", utility: "text-editorial-display", web: "58px", social: "116px", weight: "800", tracking: "-4.5%", leading: "0.94", use: "Cover slides and campaign hero lines. One per surface." }, { name: "Headline", token: "--text-editorial-headline", utility: "text-editorial-headline", web: "44px", social: "88px", weight: "800", tracking: "-3.8%", leading: "1.0", use: "Section openers, slide headlines" }, { name: "Title", token: "--text-editorial-title", utility: "text-editorial-title", web: "30px", social: "60px", weight: "700", tracking: "-3%", leading: "1.1", use: "Card titles, sub-sections" }, { name: "Lead", token: "--text-editorial-lead", utility: "text-editorial-lead", web: "19px", social: "38px", weight: "400", tracking: "0", leading: "1.4", use: "The sentence under a headline" }, { name: "Body", token: "--text-editorial-body", utility: "text-editorial-body", web: "15px", social: "30px", weight: "400", tracking: "0", leading: "1.5", use: "Running copy. Max 40 words per slide." }, { name: "Eyebrow", token: "--text-editorial-eyebrow", utility: "text-editorial-eyebrow", web: "12px", social: "24px", weight: "700", tracking: "+18%", leading: "1", use: "Uppercase label above a headline" }, { name: "Numeral", token: "--text-editorial-numeral", utility: "text-editorial-numeral", web: "100px", social: "200px", weight: "800", tracking: "-5.5%", leading: "0.82", use: "Statistic slides. Never more than one." }, { name: "Quote", token: "--text-editorial-quote", utility: "text-editorial-quote", web: "30px", social: "76px", weight: "400 italic", tracking: "-2%", leading: "1.15", use: "Playfair Display. Pull quotes only." }, ]; /** System B. Buyer, Seller, Bulk, Admin, transactional email, help. */ export const PRODUCT_SCALE: TypeStep[] = [ { name: "Display", token: "--text-display", utility: "text-display", web: "56px", social: "—", weight: "500", tracking: "-2.5%", leading: "1.1", use: "Marketing hero. Nunito Sans, light — the size carries it, not the weight." }, { name: "H1", token: "--text-h1", utility: "text-h1", web: "40px", social: "—", weight: "400", tracking: "-2.5%", leading: "1.15", use: "Section heading. Line two goes to Playfair italic." }, { name: "H2", token: "--text-h2", utility: "text-h2", web: "28px", social: "—", weight: "500", tracking: "-2%", leading: "1.2", use: "Sub-section heading" }, { name: "H3", token: "--text-h3", utility: "text-h3", web: "20px", social: "—", weight: "700", tracking: "-1%", leading: "1.3", use: "Card and panel heading" }, { name: "Body Large", token: "--text-body-lg", utility: "text-body-lg", web: "17px", social: "—", weight: "400", tracking: "0", leading: "1.6", use: "Intro paragraphs, product descriptions" }, { name: "Body", token: "--text-body", utility: "text-body", web: "15px", social: "—", weight: "400", tracking: "0", leading: "1.55", use: "Default UI text" }, { name: "Label", token: "--text-label", utility: "text-label", web: "13px", social: "—", weight: "600", tracking: "0", leading: "1.4", use: "Form labels, table headers, buttons" }, { name: "Caption", token: "--text-caption", utility: "text-caption", web: "12px", social: "—", weight: "400", tracking: "+1%", leading: "1.4", use: "Helper text, timestamps, metadata" }, { name: "Eyebrow", token: "--text-eyebrow", utility: "text-eyebrow", web: "11px", social: "—", weight: "700", tracking: "+10%", leading: "1", use: "Uppercase section label in orange, preceded by a 22px rule" }, ]; export const FONT_FAMILIES = [ { name: "Nunito Sans", token: "--font-ui", utility: "font-ui", system: "Product", role: "UI and body", weights: "400 · 600 · 700 · 800" }, { name: "Schibsted Grotesk", token: "--font-editorial", utility: "font-editorial", system: "Editorial", role: "Everything", weights: "400 · 500 · 600 · 700 · 800 · 900" }, { name: "Playfair Display", token: "--font-serif", utility: "font-serif", system: "Both", role: "The accent line and pull quotes only", weights: "400 · 500 · 400 italic · 500 italic" }, { name: "JetBrains Mono", token: "--font-mono", utility: "font-mono", system: "Editorial", role: "Data, labels, specs", weights: "400 · 500 · 700" }, { name: "Baloo Bhaijaan 2", token: "--font-display", utility: "font-display", system: "Product", role: "The wordmark only — not a layout face", weights: "800" }, { name: "Satisfy", token: "--font-script", utility: "font-script", system: "Product", role: "One accent word, at most once per page", weights: "400" }, ] as const; /* ----------------------------------------------------------------- layout */ export const SPACING = [ { step: "1", px: 4, use: "Icon-to-label gap, hairline offsets" }, { step: "2", px: 8, use: "Inside chips, tight stacks" }, { step: "3", px: 12, use: "Button padding-y, list row gap" }, { step: "4", px: 16, use: "Default gap between related elements" }, { step: "5", px: 20, use: "Card padding on mobile" }, { step: "6", px: 24, use: "Card padding, grid gutter" }, { step: "8", px: 32, use: "Between cards" }, { step: "10", px: 40, use: "Card padding on desktop" }, { step: "12", px: 48, use: "Between sub-sections" }, { step: "16", px: 64, use: "Between sections" }, { step: "20", px: 80, use: "Section padding on desktop" }, { step: "24", px: 96, use: "Between major page regions" }, ] as const; export const RADIUS = [ { name: "xs", token: "--radius-xs", utility: "rounded-xs", px: 4, use: "Inline code, tags inside text" }, { name: "sm", token: "--radius-sm", utility: "rounded-sm", px: 8, use: "Small buttons, checkboxes" }, { name: "md", token: "--radius-md", utility: "rounded-md", px: 12, use: "Inputs, dropdown items" }, { name: "lg", token: "--radius-lg", utility: "rounded-lg", px: 16, use: "Buttons, small cards, product imagery" }, { name: "xl", token: "--radius-xl", utility: "rounded-xl", px: 24, use: "Cards — the default" }, { name: "2xl", token: "--radius-2xl", utility: "rounded-2xl", px: 28, use: "Panels, modals, hero blocks" }, { name: "3xl", token: "--radius-3xl", utility: "rounded-3xl", px: 40, use: "Full-bleed feature blocks" }, { name: "pill", token: "--radius-pill", utility: "rounded-pill", px: 999, use: "Chips, badges, CTA buttons, avatars" }, ] as const; export const ELEVATION = [ { name: "Hairline", token: "--shadow-hairline", utility: "shadow-hairline", use: "Sticky bars, table headers" }, { name: "E1", token: "--shadow-e1", utility: "shadow-e1", use: "Resting card, input" }, { name: "E2", token: "--shadow-e2", utility: "shadow-e2", use: "Hovered card, dropdown, popover" }, { name: "E3", token: "--shadow-e3", utility: "shadow-e3", use: "Modal, command palette, drawer" }, ] as const; export const BREAKPOINTS = [ { name: "xs", min: "480px", cols: 4, gutter: 16, margin: 20, use: "Large phone" }, { name: "sm", min: "640px", cols: 6, gutter: 20, margin: 24, use: "Small tablet, phone landscape" }, { name: "md", min: "768px", cols: 8, gutter: 24, margin: 32, use: "Tablet portrait" }, { name: "lg", min: "1024px", cols: 12, gutter: 24, margin: 40, use: "Tablet landscape, small laptop" }, { name: "xl", min: "1280px", cols: 12, gutter: 32, margin: 64, use: "Desktop — the design target" }, { name: "2xl", min: "1536px", cols: 12, gutter: 32, margin: 80, use: "Large desktop; content caps at 1440px" }, ] as const; /* ----------------------------------------------------------------- motion */ export const MOTION = [ { name: "Instant", token: "--duration-instant", utility: "motion-instant", ms: 120, ease: "--ease-out-woohl", use: "Colour and opacity on hover" }, { name: "Fast", token: "--duration-fast", utility: "motion-fast", ms: 180, ease: "--ease-out-woohl", use: "Buttons, toggles, tooltips" }, { name: "Base", token: "--duration-base", utility: "motion-base", ms: 240, ease: "--ease-out-woohl", use: "Dropdowns, accordions, tab panels" }, { name: "Slow", token: "--duration-slow", utility: "motion-slow", ms: 320, ease: "--ease-in-out-woohl", use: "Modals, drawers, page transitions" }, { name: "Deliberate", token: "--duration-deliberate", utility: "motion-deliberate", ms: 480, ease: "--ease-in-out-woohl", use: "Onboarding, celebratory moments only" }, ] as const; export const EASING = [ { token: "--ease-out-woohl", utility: "ease-out-woohl", curve: "cubic-bezier(0.22, 1, 0.36, 1)", use: "Things entering. Fast start, long settle." }, { token: "--ease-in-out-woohl", utility: "ease-in-out-woohl", curve: "cubic-bezier(0.65, 0, 0.35, 1)", use: "Things moving between two states. Symmetrical." }, { token: "--ease-spring", utility: "ease-spring", curve: "cubic-bezier(0.34, 1.56, 0.64, 1)", use: "One overshoot, for a moment worth celebrating. Rare." }, { token: "linear", utility: "ease-linear", curve: "linear", use: "Progress bars and spinners only. Never for anything a person triggered." }, ] as const; /* ---------------------------------------------------------------- z-index */ export const Z_LAYERS = [ { token: "--z-raised", utility: "z-raised", value: 10, use: "Hovered card, focused field, image overlay" }, { token: "--z-sticky", utility: "z-sticky", value: 100, use: "Sticky headers, table headers, filter bars" }, { token: "--z-dropdown", utility: "z-dropdown", value: 200, use: "Menus, comboboxes, autocomplete" }, { token: "--z-overlay", utility: "z-overlay", value: 300, use: "Scrims behind a modal or drawer" }, { token: "--z-modal", utility: "z-modal", value: 400, use: "Dialogs, drawers, command palette" }, { token: "--z-popover", utility: "z-popover", value: 500, use: "Popovers that must clear an open dialog" }, { token: "--z-toast", utility: "z-toast", value: 600, use: "Toasts" }, { token: "--z-tooltip", utility: "z-tooltip", value: 700, use: "Tooltips — the top of the stack" }, ] as const; /* ----------------------------------------------------------------- themes */ export const THEMES = ["buyer", "seller", "bulk", "admin"] as const; export type ThemeName = (typeof THEMES)[number]; export const APPEARANCES = ["light", "dark"] as const; export type Appearance = (typeof APPEARANCES)[number]; export const THEME_DESCRIPTIONS: Record = { buyer: "The storefront and app. Woohl Orange, warm neutrals, production surfaces.", seller: "The maker dashboard. Accent drops to Rust so small accent text passes AA.", bulk: "Wholesale. Paper-first, Cinnamon accent, colour reserved for state.", admin: "Internal operations. Ink-led; the accent is signal, not brand expression.", }; 24:T2302d,

/**
 * The token registry, in TypeScript.
 *
 * design-system/tokens/*.css declares the tokens for the browser. This file
 * describes them for code — so a swatch table, a theme picker, a Figma export
 * or a lint rule is generated from the same list the stylesheet uses, never
 * transcribed from it.
 *
 * If you add a token, add it in BOTH places. That rule is inherited from the
 * design-system site and it is the only thing keeping the two halves honest.
 *
 * Nothing here is a runtime dependency of any component — components read CSS
 * variables. This module exists for tooling and documentation.
 */

/* ------------------------------------------------------------------ colour */

export type Shade = {
  /** The name the brand actually uses in conversation. */
  name: string;
  /** Numeric step, for code. */
  step: string;
  hex: string;
  /** The CSS custom property that carries it. */
  token: string;
  /** Where this shade is allowed to appear. */
  use: string;
};

export const BRAND_RAMP: Shade[] = [
  { name: "Whisper", step: "50", hex: "#FDEFE7", token: "--color-brand-50", use: "Tinted page sections, hover fills on white" },
  { name: "Sand", step: "100", hex: "#FADECF", token: "--color-brand-100", use: "Badge and chip backgrounds, table row highlight" },
  { name: "Peach", step: "200", hex: "#F8CEB6", token: "--color-brand-200", use: "Dividers on tinted surfaces, disabled accent" },
  { name: "Apricot", step: "300", hex: "#F6BE9E", token: "--color-brand-300", use: "Illustration mid-tone, chart series 3" },
  { name: "Coral", step: "400", hex: "#F19D6E", token: "--color-brand-400", use: "Illustration, chart series 2, decorative only" },
  { name: "Tangerine", step: "500", hex: "#ED7D3D", token: "--color-brand-500", use: "Chart series 1, gradient stop, never text" },
  { name: "Woohl Orange", step: "600", hex: "#F4521B", token: "--color-brand-600", use: "THE accent. Primary buttons, links, focus, the mark" },
  { name: "Ember", step: "700", hex: "#E85C0D", token: "--color-brand-700", use: "Hover state for Woohl Orange surfaces" },
  { name: "Rust", step: "800", hex: "#BA4A0A", token: "--color-brand-800", use: "Pressed state; accent text on white when AA is required" },
  { name: "Cinnamon", step: "900", hex: "#8B3708", token: "--color-brand-900", use: "Accent text at small sizes, warm dark UI" },
  { name: "Cocoa", step: "950", hex: "#5D2505", token: "--color-brand-950", use: "Deep warm backgrounds, print duotone shadow" },
];

export const DEEP_TONES: Shade[] = [
  { name: "Espresso", step: "—", hex: "#461C04", token: "--color-espresso", use: "Warm dark surface alternative to Ink" },
  { name: "Bark", step: "—", hex: "#2E1203", token: "--color-bark", use: "Packaging, print, deep editorial backgrounds" },
  { name: "Pitch", step: "—", hex: "#170901", token: "--color-pitch", use: "Maximum-depth warm black" },
];

export const NEUTRAL_RAMP: Shade[] = [
  { name: "Paper", step: "0", hex: "#FFFFFF", token: "--color-paper", use: "Default surface — roughly 70% of every layout" },
  { name: "Mist", step: "50", hex: "#FAF9F7", token: "--color-neutral-50", use: "Barely-there section banding" },
  { name: "Canvas", step: "100", hex: "#F4F2EF", token: "--color-neutral-100", use: "Page background behind cards" },
  { name: "Linen", step: "200", hex: "#EEEBE7", token: "--color-neutral-200", use: "Sunken wells, code blocks, inactive tabs" },
  { name: "Chalk", step: "300", hex: "#E6E3DE", token: "--color-neutral-300", use: "Default border — the one you reach for" },
  { name: "Stone", step: "400", hex: "#D8D4CE", token: "--color-neutral-400", use: "Strong border, unchecked control outline" },
  { name: "Ash", step: "500", hex: "#B8B3AC", token: "--color-neutral-500", use: "Placeholder text, disabled labels, slide footers" },
  { name: "Clay", step: "600", hex: "#9A958E", token: "--color-neutral-600", use: "Muted metadata and captions" },
  { name: "Slate", step: "700", hex: "#6B6660", token: "--color-neutral-700", use: "Secondary body copy" },
  { name: "Char", step: "800", hex: "#3A3835", token: "--color-neutral-800", use: "Lead paragraphs on light" },
  { name: "Soot", step: "900", hex: "#1D1B19", token: "--color-neutral-900", use: "Alternative dark surface" },
  { name: "Ink", step: "950", hex: "#111111", token: "--color-ink", use: "Primary text, and the dark surface for hero moments" },
];

/**
 * Measured off production. The neutral ramp above is the social-artboard
 * system; these are what the storefront actually paints. Where the two
 * disagree, the product wins for anything shipping on woohl.com.
 */
export const PRODUCT_SURFACES: Shade[] = [
  { name: "Warm text", step: "—", hex: "#4A4540", token: "--color-warm-text", use: "Body copy on the storefront" },
  { name: "Warm muted", step: "—", hex: "#7A7268", token: "--color-warm-muted", use: "Metadata, captions, helper text" },
  { name: "Warm surface", step: "—", hex: "#FFF7ED", token: "--color-warm-surface", use: "Section background behind cards" },
  { name: "Warm dark", step: "—", hex: "#1C1610", token: "--color-warm-dark", use: "Footer and dark sections — not pure Ink" },
  { name: "Cream", step: "—", hex: "#E8DCC8", token: "--color-cream", use: "Dividers and captions inside dark sections" },
  { name: "Terracotta", step: "—", hex: "#C85A2A", token: "--color-terracotta", use: "Accent text at sizes where Woohl Orange fails AA" },
];

export type StatusToken = {
  name: string;
  hex: string;
  subtle: string;
  border: string;
  use: string;
};

/** Four, each with a solid, a subtle fill and a border. Never a brand accent. */
export const STATUS_TOKENS: StatusToken[] = [
  { name: "Success", hex: "#0E7A50", subtle: "#E6F3ED", border: "#A8D8C2", use: "Order confirmed, payout sent, verified maker" },
  { name: "Warning", hex: "#A9670B", subtle: "#FBF0DC", border: "#EBCB8E", use: "Low stock, action needed, expiring soon" },
  { name: "Danger", hex: "#B3261E", subtle: "#FBEAE8", border: "#E9B5B0", use: "Failed payment, destructive action, validation error" },
  { name: "Info", hex: "#1C5D9B", subtle: "#E8F0F8", border: "#A9C6E4", use: "Neutral system messages, tips, shipping updates" },
];

/**
 * The semantic layer — the only colour interface components may use.
 * `light` and `dark` are the base theme's resolved values; a product theme may
 * change them, which is the entire point of the theme layer.
 */
export const SEMANTIC_COLOR_TOKENS = [
  { token: "--surface", utility: "bg-surface", role: "Canvas behind cards", light: "#F4F2EF", dark: "#17150F" },
  { token: "--surface-raised", utility: "bg-surface-raised", role: "Cards, panels, inputs", light: "#FFFFFF", dark: "#211E17" },
  { token: "--surface-sunken", utility: "bg-surface-sunken", role: "Wells, code, inactive tabs", light: "#EEEBE7", dark: "#100E0A" },
  { token: "--surface-inverse", utility: "bg-surface-inverse", role: "Hero blocks, dark sections", light: "#111111", dark: "#F4F2EF" },
  { token: "--surface-accent", utility: "bg-surface-accent", role: "Primary buttons, active states", light: "#F4521B", dark: "#F4521B" },
  { token: "--surface-accent-hover", utility: "bg-surface-accent-hover", role: "Hover on an accent fill", light: "#E85C0D", dark: "#FF6A33" },
  { token: "--surface-accent-pressed", utility: "bg-surface-accent-pressed", role: "Pressed on an accent fill", light: "#BA4A0A", dark: "#E85C0D" },
  { token: "--surface-accent-subtle", utility: "bg-surface-accent-subtle", role: "Badge fills, hover tints", light: "#FDEFE7", dark: "rgb(244 82 27 / 0.14)" },
  { token: "--border-subtle", utility: "border-border-subtle", role: "Default border", light: "#E6E3DE", dark: "#322D24" },
  { token: "--border-strong", utility: "border-border-strong", role: "Hover border, control outline", light: "#D8D4CE", dark: "#453F33" },
  { token: "--border-accent", utility: "border-border-accent", role: "Focused field, selected control", light: "#F4521B", dark: "#FF7A45" },
  { token: "--border-inverse", utility: "border-border-inverse", role: "Dividers inside a dark section", light: "rgb(255 255 255 / 0.18)", dark: "rgb(17 17 17 / 0.18)" },
  { token: "--text-primary", utility: "text-text-primary", role: "Body and headings", light: "#111111", dark: "#F6F3EE" },
  { token: "--text-secondary", utility: "text-text-secondary", role: "Supporting copy", light: "#4A4540", dark: "#B8B0A3" },
  { token: "--text-muted", utility: "text-text-muted", role: "Metadata, captions, placeholder", light: "#7A7268", dark: "#8D857A" },
  { token: "--text-inverse", utility: "text-text-inverse", role: "Text on a dark surface", light: "#FFFFFF", dark: "#111111" },
  { token: "--text-accent", utility: "text-text-accent", role: "Links, accent type at 24px+", light: "#F4521B", dark: "#FF7A45" },
  { token: "--text-accent-strong", utility: "text-text-accent-strong", role: "Accent text under 24px — passes AA", light: "#BA4A0A", dark: "#FF9066" },
  { token: "--text-on-accent", utility: "text-text-on-accent", role: "Text on Woohl Orange", light: "#FFFFFF", dark: "#FFFFFF" },
] as const;

/* -------------------------------------------------------------------- type */

export type TypeStep = {
  name: string;
  /** Token name, and the Tailwind utility it generates. */
  token: string;
  utility: string;
  /** Size on the web/product scale. */
  web: string;
  /** Size on the 1080px social artboard, where the editorial scale is 2×. */
  social: string;
  weight: string;
  tracking: string;
  leading: string;
  use: string;
};

/** System A. Campaigns, social, print, decks, brand pages. Never product UI. */
export const EDITORIAL_SCALE: TypeStep[] = [
  { name: "Display", token: "--text-editorial-display", utility: "text-editorial-display", web: "58px", social: "116px", weight: "800", tracking: "-4.5%", leading: "0.94", use: "Cover slides and campaign hero lines. One per surface." },
  { name: "Headline", token: "--text-editorial-headline", utility: "text-editorial-headline", web: "44px", social: "88px", weight: "800", tracking: "-3.8%", leading: "1.0", use: "Section openers, slide headlines" },
  { name: "Title", token: "--text-editorial-title", utility: "text-editorial-title", web: "30px", social: "60px", weight: "700", tracking: "-3%", leading: "1.1", use: "Card titles, sub-sections" },
  { name: "Lead", token: "--text-editorial-lead", utility: "text-editorial-lead", web: "19px", social: "38px", weight: "400", tracking: "0", leading: "1.4", use: "The sentence under a headline" },
  { name: "Body", token: "--text-editorial-body", utility: "text-editorial-body", web: "15px", social: "30px", weight: "400", tracking: "0", leading: "1.5", use: "Running copy. Max 40 words per slide." },
  { name: "Eyebrow", token: "--text-editorial-eyebrow", utility: "text-editorial-eyebrow", web: "12px", social: "24px", weight: "700", tracking: "+18%", leading: "1", use: "Uppercase label above a headline" },
  { name: "Numeral", token: "--text-editorial-numeral", utility: "text-editorial-numeral", web: "100px", social: "200px", weight: "800", tracking: "-5.5%", leading: "0.82", use: "Statistic slides. Never more than one." },
  { name: "Quote", token: "--text-editorial-quote", utility: "text-editorial-quote", web: "30px", social: "76px", weight: "400 italic", tracking: "-2%", leading: "1.15", use: "Playfair Display. Pull quotes only." },
];

/** System B. Buyer, Seller, Bulk, Admin, transactional email, help. */
export const PRODUCT_SCALE: TypeStep[] = [
  { name: "Display", token: "--text-display", utility: "text-display", web: "56px", social: "—", weight: "500", tracking: "-2.5%", leading: "1.1", use: "Marketing hero. Nunito Sans, light — the size carries it, not the weight." },
  { name: "H1", token: "--text-h1", utility: "text-h1", web: "40px", social: "—", weight: "400", tracking: "-2.5%", leading: "1.15", use: "Section heading. Line two goes to Playfair italic." },
  { name: "H2", token: "--text-h2", utility: "text-h2", web: "28px", social: "—", weight: "500", tracking: "-2%", leading: "1.2", use: "Sub-section heading" },
  { name: "H3", token: "--text-h3", utility: "text-h3", web: "20px", social: "—", weight: "700", tracking: "-1%", leading: "1.3", use: "Card and panel heading" },
  { name: "Body Large", token: "--text-body-lg", utility: "text-body-lg", web: "17px", social: "—", weight: "400", tracking: "0", leading: "1.6", use: "Intro paragraphs, product descriptions" },
  { name: "Body", token: "--text-body", utility: "text-body", web: "15px", social: "—", weight: "400", tracking: "0", leading: "1.55", use: "Default UI text" },
  { name: "Label", token: "--text-label", utility: "text-label", web: "13px", social: "—", weight: "600", tracking: "0", leading: "1.4", use: "Form labels, table headers, buttons" },
  { name: "Caption", token: "--text-caption", utility: "text-caption", web: "12px", social: "—", weight: "400", tracking: "+1%", leading: "1.4", use: "Helper text, timestamps, metadata" },
  { name: "Eyebrow", token: "--text-eyebrow", utility: "text-eyebrow", web: "11px", social: "—", weight: "700", tracking: "+10%", leading: "1", use: "Uppercase section label in orange, preceded by a 22px rule" },
];

export const FONT_FAMILIES = [
  { name: "Nunito Sans", token: "--font-ui", utility: "font-ui", system: "Product", role: "UI and body", weights: "400 · 600 · 700 · 800" },
  { name: "Schibsted Grotesk", token: "--font-editorial", utility: "font-editorial", system: "Editorial", role: "Everything", weights: "400 · 500 · 600 · 700 · 800 · 900" },
  { name: "Playfair Display", token: "--font-serif", utility: "font-serif", system: "Both", role: "The accent line and pull quotes only", weights: "400 · 500 · 400 italic · 500 italic" },
  { name: "JetBrains Mono", token: "--font-mono", utility: "font-mono", system: "Editorial", role: "Data, labels, specs", weights: "400 · 500 · 700" },
  { name: "Baloo Bhaijaan 2", token: "--font-display", utility: "font-display", system: "Product", role: "The wordmark only — not a layout face", weights: "800" },
  { name: "Satisfy", token: "--font-script", utility: "font-script", system: "Product", role: "One accent word, at most once per page", weights: "400" },
] as const;

/* ----------------------------------------------------------------- layout */

export const SPACING = [
  { step: "1", px: 4, use: "Icon-to-label gap, hairline offsets" },
  { step: "2", px: 8, use: "Inside chips, tight stacks" },
  { step: "3", px: 12, use: "Button padding-y, list row gap" },
  { step: "4", px: 16, use: "Default gap between related elements" },
  { step: "5", px: 20, use: "Card padding on mobile" },
  { step: "6", px: 24, use: "Card padding, grid gutter" },
  { step: "8", px: 32, use: "Between cards" },
  { step: "10", px: 40, use: "Card padding on desktop" },
  { step: "12", px: 48, use: "Between sub-sections" },
  { step: "16", px: 64, use: "Between sections" },
  { step: "20", px: 80, use: "Section padding on desktop" },
  { step: "24", px: 96, use: "Between major page regions" },
] as const;

export const RADIUS = [
  { name: "xs", token: "--radius-xs", utility: "rounded-xs", px: 4, use: "Inline code, tags inside text" },
  { name: "sm", token: "--radius-sm", utility: "rounded-sm", px: 8, use: "Small buttons, checkboxes" },
  { name: "md", token: "--radius-md", utility: "rounded-md", px: 12, use: "Inputs, dropdown items" },
  { name: "lg", token: "--radius-lg", utility: "rounded-lg", px: 16, use: "Buttons, small cards, product imagery" },
  { name: "xl", token: "--radius-xl", utility: "rounded-xl", px: 24, use: "Cards — the default" },
  { name: "2xl", token: "--radius-2xl", utility: "rounded-2xl", px: 28, use: "Panels, modals, hero blocks" },
  { name: "3xl", token: "--radius-3xl", utility: "rounded-3xl", px: 40, use: "Full-bleed feature blocks" },
  { name: "pill", token: "--radius-pill", utility: "rounded-pill", px: 999, use: "Chips, badges, CTA buttons, avatars" },
] as const;

export const ELEVATION = [
  { name: "Hairline", token: "--shadow-hairline", utility: "shadow-hairline", use: "Sticky bars, table headers" },
  { name: "E1", token: "--shadow-e1", utility: "shadow-e1", use: "Resting card, input" },
  { name: "E2", token: "--shadow-e2", utility: "shadow-e2", use: "Hovered card, dropdown, popover" },
  { name: "E3", token: "--shadow-e3", utility: "shadow-e3", use: "Modal, command palette, drawer" },
] as const;

export const BREAKPOINTS = [
  { name: "xs", min: "480px", cols: 4, gutter: 16, margin: 20, use: "Large phone" },
  { name: "sm", min: "640px", cols: 6, gutter: 20, margin: 24, use: "Small tablet, phone landscape" },
  { name: "md", min: "768px", cols: 8, gutter: 24, margin: 32, use: "Tablet portrait" },
  { name: "lg", min: "1024px", cols: 12, gutter: 24, margin: 40, use: "Tablet landscape, small laptop" },
  { name: "xl", min: "1280px", cols: 12, gutter: 32, margin: 64, use: "Desktop — the design target" },
  { name: "2xl", min: "1536px", cols: 12, gutter: 32, margin: 80, use: "Large desktop; content caps at 1440px" },
] as const;

/* ----------------------------------------------------------------- motion */

export const MOTION = [
  { name: "Instant", token: "--duration-instant", utility: "motion-instant", ms: 120, ease: "--ease-out-woohl", use: "Colour and opacity on hover" },
  { name: "Fast", token: "--duration-fast", utility: "motion-fast", ms: 180, ease: "--ease-out-woohl", use: "Buttons, toggles, tooltips" },
  { name: "Base", token: "--duration-base", utility: "motion-base", ms: 240, ease: "--ease-out-woohl", use: "Dropdowns, accordions, tab panels" },
  { name: "Slow", token: "--duration-slow", utility: "motion-slow", ms: 320, ease: "--ease-in-out-woohl", use: "Modals, drawers, page transitions" },
  { name: "Deliberate", token: "--duration-deliberate", utility: "motion-deliberate", ms: 480, ease: "--ease-in-out-woohl", use: "Onboarding, celebratory moments only" },
] as const;

export const EASING = [
  { token: "--ease-out-woohl", utility: "ease-out-woohl", curve: "cubic-bezier(0.22, 1, 0.36, 1)", use: "Things entering. Fast start, long settle." },
  { token: "--ease-in-out-woohl", utility: "ease-in-out-woohl", curve: "cubic-bezier(0.65, 0, 0.35, 1)", use: "Things moving between two states. Symmetrical." },
  { token: "--ease-spring", utility: "ease-spring", curve: "cubic-bezier(0.34, 1.56, 0.64, 1)", use: "One overshoot, for a moment worth celebrating. Rare." },
  { token: "linear", utility: "ease-linear", curve: "linear", use: "Progress bars and spinners only. Never for anything a person triggered." },
] as const;

/* ---------------------------------------------------------------- z-index */

export const Z_LAYERS = [
  { token: "--z-raised", utility: "z-raised", value: 10, use: "Hovered card, focused field, image overlay" },
  { token: "--z-sticky", utility: "z-sticky", value: 100, use: "Sticky headers, table headers, filter bars" },
  { token: "--z-dropdown", utility: "z-dropdown", value: 200, use: "Menus, comboboxes, autocomplete" },
  { token: "--z-overlay", utility: "z-overlay", value: 300, use: "Scrims behind a modal or drawer" },
  { token: "--z-modal", utility: "z-modal", value: 400, use: "Dialogs, drawers, command palette" },
  { token: "--z-popover", utility: "z-popover", value: 500, use: "Popovers that must clear an open dialog" },
  { token: "--z-toast", utility: "z-toast", value: 600, use: "Toasts" },
  { token: "--z-tooltip", utility: "z-tooltip", value: 700, use: "Tooltips — the top of the stack" },
] as const;

/* ----------------------------------------------------------------- themes */

export const THEMES = ["buyer", "seller", "bulk", "admin"] as const;
export type ThemeName = (typeof THEMES)[number];

export const APPEARANCES = ["light", "dark"] as const;
export type Appearance = (typeof APPEARANCES)[number];

export const THEME_DESCRIPTIONS: Record<ThemeName, string> = {
  buyer: "The storefront and app. Woohl Orange, warm neutrals, production surfaces.",
  seller: "The maker dashboard. Accent drops to Rust so small accent text passes AA.",
  bulk: "Wholesale. Paper-first, Cinnamon accent, colour reserved for state.",
  admin: "Internal operations. Ink-led; the accent is signal, not brand expression.",
};

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Tokens & brand"}],["$","$L1e",null,{"children":"Token metadata"}],["$","$L1f",null,{"children":"Human-readable descriptions of every token, for docs and swatch tables."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"tokens-meta"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/tokens-meta","source":"$23","highlighted":"$24","npm":[],"registry":[],"props":"$undefined"}]}]]}]]}]