{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tokens",
  "type": "registry:file",
  "title": "Design tokens",
  "description": "The design tokens Facade UI needs: shadcn colour names, plus --facade-* variables for heading sizes, section spacing and animation. The default colours are Tailwind's orange and stone. Import the file in your globals.css.",
  "categories": [
    "theme"
  ],
  "files": [
    {
      "path": "src/tokens/globals.css",
      "type": "registry:file",
      "target": "styles/facade-tokens.css",
      "content": "/**\n * Facade UI — design tokens.\n *\n * Two token families live here:\n *\n * 1. shadcn-compatible names (`--background`, `--primary`, `--radius`, …). Facade\n *    sections only ever reference these, so dropping a section into an existing\n *    shadcn project makes it inherit that project's theme with zero edits.\n * 2. Marketing-specific tokens under a `--facade-` prefix (display type, section\n *    rhythm, motion) that shadcn does not define and that would otherwise collide.\n *\n * The default palette is Tailwind's orange on stone. Two values are not a plain\n * step, both for contrast: `--primary-foreground` is ink (white on orange 600\n * is 3.6:1), and `--input` is darkened until it clears 3:1. `--primary` is for\n * fills, icons and rings, never running text. More presets are in `themes.css`.\n */\n\n@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* ---------------------------------------------------------------- shadcn */\n  --radius: 0.625rem;\n\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.147 0.004 49.25); /* stone 950 */\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.147 0.004 49.25);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.147 0.004 49.25);\n  --primary: oklch(0.646 0.222 41.116); /* orange 600 */\n  --primary-foreground: oklch(0.147 0.004 49.25); /* ink, not white */\n  --secondary: oklch(0.97 0.001 106.424); /* stone 100 */\n  --secondary-foreground: oklch(0.216 0.006 56.043); /* stone 900 */\n  --muted: oklch(0.97 0.001 106.424);\n  --muted-foreground: oklch(0.444 0.011 73.639); /* stone 600 */\n  --accent: oklch(0.954 0.038 75.164); /* orange 100 */\n  --accent-foreground: oklch(0.47 0.157 37.304); /* orange 800 */\n  --destructive: oklch(0.577 0.245 27.325); /* red 600 */\n  --destructive-foreground: oklch(0.985 0.001 106.423); /* stone 50 */\n  --border: oklch(0.923 0.003 48.717); /* stone 200 */\n  /*\n   * `--input` is the border of a form control, not a divider, so it has to\n   * clear 3:1 against the background on its own (WCAG 1.4.11). That is a good\n   * deal darker than `--border`, and deliberately so — a hairline is decorative,\n   * the edge of a text field is the only thing identifying it as one.\n   */\n  --input: oklch(0.664 0.01 56.259);\n  --ring: oklch(0.646 0.222 41.116);\n\n  /* ---------------------------------------------------------------- facade */\n  --facade-font-sans:\n    ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n    sans-serif;\n  --facade-font-mono:\n    ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n\n  /* Fluid display scale. Marketing headlines should not need breakpoint juggling. */\n  --facade-text-display-sm: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);\n  --facade-text-display-md: clamp(2.25rem, 1.75rem + 2.4vw, 3rem);\n  --facade-text-display-lg: clamp(2.75rem, 1.95rem + 3.8vw, 4rem);\n  --facade-text-display-xl: clamp(3.25rem, 2.1rem + 5.4vw, 5.5rem);\n\n  --facade-leading-display: 1.08;\n  --facade-tracking-display: -0.022em;\n\n  /* Vertical rhythm. `--facade-section-y` is the default band padding. */\n  --facade-section-y-sm: clamp(2.5rem, 1.75rem + 3vw, 4rem);\n  --facade-section-y: clamp(3.5rem, 2.25rem + 5vw, 7rem);\n  --facade-section-y-lg: clamp(5rem, 3rem + 8vw, 10rem);\n\n  --facade-container-max: 80rem;\n  --facade-container-gutter: 1.25rem;\n\n  /* Motion. Durations are read by FacadeMotionProvider and fed to MotionConfig. */\n  --facade-duration-fast: 150ms;\n  --facade-duration-base: 320ms;\n  --facade-duration-slow: 620ms;\n  --facade-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --facade-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n  --facade-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);\n  --facade-motion-distance: 1rem;\n}\n\n.dark {\n  --background: oklch(0.147 0.004 49.25); /* stone 950 */\n  --foreground: oklch(0.985 0.001 106.423); /* stone 50 */\n  --card: oklch(0.216 0.006 56.043); /* stone 900 */\n  --card-foreground: oklch(0.985 0.001 106.423);\n  --popover: oklch(0.268 0.007 34.298); /* stone 800 */\n  --popover-foreground: oklch(0.985 0.001 106.423);\n  --primary: oklch(0.705 0.213 47.604); /* orange 500 */\n  --primary-foreground: oklch(0.147 0.004 49.25);\n  --secondary: oklch(0.268 0.007 34.298);\n  --secondary-foreground: oklch(0.985 0.001 106.423);\n  --muted: oklch(0.268 0.007 34.298);\n  --muted-foreground: oklch(0.709 0.01 56.259); /* stone 400 */\n  --accent: oklch(0.266 0.079 36.259); /* orange 950 */\n  --accent-foreground: oklch(0.837 0.128 66.29); /* orange 300 */\n  --destructive: oklch(0.704 0.191 22.216); /* red 400 */\n  --destructive-foreground: oklch(0.147 0.004 49.25);\n  --border: oklch(1 0 0 / 12%);\n  --input: oklch(0.553 0.013 58.071); /* stone 500 */\n  --ring: oklch(0.705 0.213 47.604);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --radius-2xl: calc(var(--radius) + 10px);\n\n  --font-sans: var(--facade-font-sans);\n  --font-mono: var(--facade-font-mono);\n\n  /* `text-display-lg` and friends. */\n  --text-display-sm: var(--facade-text-display-sm);\n  --text-display-sm--line-height: var(--facade-leading-display);\n  --text-display-sm--letter-spacing: var(--facade-tracking-display);\n  --text-display-md: var(--facade-text-display-md);\n  --text-display-md--line-height: var(--facade-leading-display);\n  --text-display-md--letter-spacing: var(--facade-tracking-display);\n  --text-display-lg: var(--facade-text-display-lg);\n  --text-display-lg--line-height: var(--facade-leading-display);\n  --text-display-lg--letter-spacing: var(--facade-tracking-display);\n  --text-display-xl: var(--facade-text-display-xl);\n  --text-display-xl--line-height: var(--facade-leading-display);\n  --text-display-xl--letter-spacing: var(--facade-tracking-display);\n\n  /* `py-section`, `max-w-facade`. */\n  --spacing-section-sm: var(--facade-section-y-sm);\n  --spacing-section: var(--facade-section-y);\n  --spacing-section-lg: var(--facade-section-y-lg);\n  --spacing-gutter: var(--facade-container-gutter);\n  --container-facade: var(--facade-container-max);\n\n  /* `ease-facade-out`, `duration-facade-base`. */\n  --ease-facade-out: var(--facade-ease-out);\n  --ease-facade-in-out: var(--facade-ease-in-out);\n  --ease-facade-spring: var(--facade-ease-spring);\n}\n\n/**\n * `duration-facade-*` — Tailwind v4 has no `--duration-*` theme namespace, so the\n * three motion durations are exposed as explicit utilities instead.\n */\n@utility duration-facade-fast {\n  transition-duration: var(--facade-duration-fast);\n}\n@utility duration-facade-base {\n  transition-duration: var(--facade-duration-base);\n}\n@utility duration-facade-slow {\n  transition-duration: var(--facade-duration-slow);\n}\n\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    border-color: var(--color-border);\n  }\n\n  body {\n    background-color: var(--color-background);\n    color: var(--color-foreground);\n    font-family: var(--font-sans);\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n  }\n\n  /* Every interactive element in the registry relies on this ring. */\n  :focus-visible {\n    outline: 2px solid var(--color-ring);\n    outline-offset: 2px;\n  }\n\n  /*\n   * Belt and braces alongside MotionConfig reducedMotion=\"user\": kills CSS\n   * transitions and scroll behaviour for users who ask for less motion.\n   */\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    ::before,\n    ::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/docs/theming"
}