{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tokens",
  "title": "WAIMAKERS brand tokens",
  "description": "The brand values themselves: the raw palette, the type, space, radius and motion scale, and the semantic roles — what a colour MEANS on a surface — set for light and redefined for dark under a prefers-color-scheme query. Install this before any component: the `theme` item maps shadcn's variables onto these roles and carries none of their values, so without the file a mapped variable resolves to nothing. Served verbatim from the one source in packages/ui, so the reasoning and the measured contrast ratios arrive with the values. Import it from your Tailwind entry, above the components that read it.",
  "files": [
    {
      "path": "src/styles/tokens.css",
      "content": ":root {\n  --cream: #f8f5f0;\n  --cream-2: #f2eee6;\n  --paper: #ffffff;\n  --ink: #1a1a1a;\n  --ink-2: #3a3a3a;\n  --ink-3: #6b6b6b;\n  --orange: #ff6635;\n  --orange-deep: #e55020;\n  --orange-tint: #ffe9df;\n  --navy: #0a1628;\n  --teal: #1a3a52;\n  --peach: #ffa67e;\n  --amber: #cc6b3d;\n  --fog: #e8e6e0;\n  --mist: #b8b5af;\n  --slate: #3d4148;\n  --graphite: #595959;\n\n  --red: oklch(0.577 0.245 27.325);\n  --red-light: oklch(0.65 0.2 27.325);\n  --green: #40715b;\n  --green-light: oklch(0.78 0.105 160);\n}\n\n:root {\n  --font-display: \"League Spartan\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-body: \"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n\n  --font-mono: ui-monospace, \"SF Mono\", SFMono-Regular, Menlo, Consolas, monospace;\n\n  --fw-black: 900;\n  --fw-extrabold: 800;\n  --fw-bold: 700;\n  --fw-semibold: 600;\n  --fw-medium: 500;\n  --fw-regular: 400;\n\n  --text-title: clamp(30px, 5vw, 38px);\n  --text-h2: 24px;\n  --text-h3: 19px;\n  --text-lede: clamp(17px, 1.5vw, 21px);\n  --text-body: clamp(15px, 1.4vw, 17px);\n  --text-small: 13.5px;\n  --text-eyebrow: 12px;\n\n  --tracking-eyebrow: 0.2em;\n  --tracking-tight: -0.02em;\n  --tracking-code: 0.08em;\n  --leading-body: 1.6;\n\n  --leading-title: 1.1;\n\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 12px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 32px;\n  --space-7: 48px;\n  --space-8: 64px;\n  --space-9: 96px;\n\n  --shell-max: 460px;\n  --shell-max-wide: 880px;\n  --shell-gutter: clamp(20px, 5vw, 40px);\n\n  --radius-sm: 10px;\n  --radius: 14px;\n  --radius-lg: 22px;\n  --radius-card: 18px;\n  --radius-pill: 999px;\n\n  --ease: cubic-bezier(0.16, 1, 0.3, 1);\n  --dur-micro: 80ms;\n  --dur-fast: 120ms;\n  --dur-base: 220ms;\n  --dur-slow: 360ms;\n\n  --z-sticky: 30;\n  --z-overlay: 40;\n  --z-modal: 50;\n  --z-toast: 100;\n\n  --wordmark-w: 158px;\n}\n\n:root {\n  --btn-primary-bg: var(--orange);\n  --btn-primary-bg-hover: var(--orange-deep);\n\n  --btn-primary-fg: var(--ink);\n}\n\n:root {\n  color-scheme: light;\n\n  --ground: var(--cream);\n  --surface: var(--paper);\n  --surface-sunken: var(--cream-2);\n  --surface-raised: var(--paper);\n\n  --text: var(--ink);\n  --text-muted: var(--ink-2);\n  --text-subtle: var(--ink-3);\n\n  --border: rgb(26 26 26 / 10%);\n  --border-strong: rgb(26 26 26 / 18%);\n  --border-control: color-mix(in srgb, var(--ink-3) 85%, var(--paper));\n\n  --accent: var(--orange);\n  --accent-strong: var(--orange-deep);\n  --accent-wash: var(--orange-tint);\n\n  --accent-text: var(--text);\n\n  --focus-ring: var(--text);\n\n  --chart-series-1: var(--orange-deep);\n  --chart-series-2: var(--text-subtle);\n\n  --scrim: rgb(26 26 26 / 45%);\n\n  --danger: var(--red);\n  --danger-strong: color-mix(in srgb, var(--red) 85%, var(--ink));\n  --danger-wash: color-mix(in srgb, var(--red) 8%, var(--paper));\n  --danger-fg: var(--paper);\n  --danger-text: color-mix(in srgb, var(--red) 80%, var(--ink));\n\n  --ok: var(--green);\n  --ok-wash: color-mix(in srgb, var(--green) 10%, var(--paper));\n  --ok-text: var(--green);\n\n  --attention: var(--orange);\n  --attention-wash: var(--orange-tint);\n  --attention-text: color-mix(in srgb, var(--orange-deep) 75%, var(--ink));\n\n  --info: var(--teal);\n  --info-wash: color-mix(in srgb, var(--teal) 8%, var(--paper));\n  --info-text: var(--teal);\n\n  --shadow-card: 0 4px 8px rgb(26 26 26 / 5%), 0 24px 50px -28px rgb(26 26 26 / 30%);\n  --shadow-sm: 0 1px 2px rgb(26 26 26 / 5%);\n  --shadow-overlay: 0 2px 6px rgb(26 26 26 / 6%), 0 16px 36px -12px rgb(26 26 26 / 24%);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    color-scheme: dark;\n\n    --ground: var(--navy);\n\n    --surface: color-mix(in srgb, var(--teal) 30%, var(--navy));\n    --surface-sunken: color-mix(in srgb, var(--navy) 60%, #000000);\n    --surface-raised: color-mix(in srgb, var(--teal) 55%, var(--navy));\n\n    --text: var(--cream);\n    --text-muted: var(--mist);\n\n    --text-subtle: color-mix(in srgb, var(--mist) 78%, var(--navy));\n\n    --border: rgb(248 245 240 / 14%);\n    --border-strong: rgb(248 245 240 / 24%);\n    --border-control: color-mix(in srgb, var(--mist) 60%, var(--navy));\n\n    --accent: var(--orange);\n    --accent-strong: var(--peach);\n\n    --accent-wash: color-mix(in srgb, var(--orange) 16%, var(--navy));\n\n    --accent-text: var(--orange);\n\n    --focus-ring: var(--text);\n\n    --chart-series-1: var(--orange);\n    --chart-series-2: var(--text-subtle);\n\n    --scrim: rgb(0 0 0 / 60%);\n\n    --danger: var(--red-light);\n    --danger-strong: color-mix(in srgb, var(--red-light) 85%, var(--cream));\n    --danger-wash: color-mix(in srgb, var(--red-light) 16%, var(--navy));\n    --danger-fg: var(--ink);\n    --danger-text: color-mix(in srgb, var(--red-light) 70%, var(--cream));\n\n    --ok: var(--green-light);\n    --ok-wash: color-mix(in srgb, var(--green) 24%, var(--navy));\n    --ok-text: var(--green-light);\n\n    --attention: var(--orange);\n    --attention-wash: var(--accent-wash);\n    --attention-text: var(--orange);\n\n    --info: color-mix(in srgb, var(--teal) 40%, var(--cream));\n    --info-wash: color-mix(in srgb, var(--teal) 70%, var(--navy));\n    --info-text: color-mix(in srgb, var(--teal) 40%, var(--cream));\n\n    --shadow-card: 0 24px 50px -30px rgb(0 0 0 / 70%);\n    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);\n    --shadow-overlay: 0 2px 6px rgb(0 0 0 / 40%), 0 20px 44px -12px rgb(0 0 0 / 70%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n  }\n}\n",
      "type": "registry:file",
      "target": "src/styles/tokens.css"
    }
  ],
  "type": "registry:file"
}