{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tokens",
  "title": "Birchline Tokens",
  "description": "Design tokens (Tailwind v4 @theme layer + Bright scheme). Install first.",
  "files": [
    {
      "path": "src/registry/birchline-tokens.css",
      "content": "/* AUTO-GENERATED — do not edit by hand.\n   Source: tokens/birchline.tokens.mjs · Build: scripts/build-tokens.mjs (npm run tokens:build)\n\n   Three tiers: primitives → aliases → semantic, with mode overrides. A hex value\n   lives once (a primitive); everything above references it. Import after\n   `@import \"tailwindcss\";`. */\n\n@theme {\n  /* ═══ TIER 1 · PRIMITIVES ═══ */\n  --color-warm-50: #FAF9F5;\n  --color-warm-100: #F0EEE6;\n  --color-warm-150: #ECE8DE;\n  --color-warm-300: #D1CFC5;\n  --color-warm-350: #C6C1B4;\n  --color-warm-450: #9C978A;\n  --color-warm-500: #8B8578;\n  --color-warm-550: #726F66;\n  --color-warm-650: #4A453E;\n  --color-warm-680: #46433B;\n  --color-warm-700: #3E3A32;\n  --color-warm-720: #3D3D3A;\n  --color-warm-750: #37342C;\n  --color-warm-780: #34312B;\n  --color-warm-800: #302D27;\n  --color-warm-850: #262420;\n  --color-warm-900: #211F1B;\n  --color-warm-950: #1B1A17;\n  --color-warm-975: #141413;\n  --color-white: #FFFFFF;\n  --color-oat: #E3DACC;\n  --color-clay: #D97757;\n  --color-clay-hover: #C7684C;\n  --color-green-500: #5F7348;\n  --color-green-400: #8FB06B;\n  --color-bronze-500: #916426;\n  --color-bronze-400: #D69C4E;\n  --color-red-500: #B04A4A;\n  --color-red-400: #C9413F;\n  --color-red-hover: #9A3F3F;\n  --color-red-hover-dark: #B13937;\n  --color-blue-500: #526E92;\n  --color-blue-400: #7FA3D0;\n  --color-plum: #7B6B8A;\n  --color-teal: #5B8E8A;\n  --color-light-yellow: #F5E6B8;\n  --color-highlight-dark: #4A3C18;\n\n  /* Legacy aliases — existing names, sourced from the ramp/hues. */\n  --color-ivory: var(--color-warm-50);\n  --color-ink: var(--color-warm-975);\n  --color-gray-100: var(--color-warm-100);\n  --color-gray-300: var(--color-warm-300);\n  --color-gray-500: var(--color-warm-550);\n  --color-gray-700: var(--color-warm-720);\n  --color-green: var(--color-green-500);\n  --color-bronze: var(--color-bronze-500);\n  --color-red: var(--color-red-500);\n  --color-blue: var(--color-blue-500);\n\n  /* ═══ TIER 2 · SEMANTIC (light) ═══ */\n  --color-success: var(--color-green-500);\n  --color-warning: var(--color-bronze-500);\n  --color-danger: var(--color-red-500);\n  --color-danger-hover: var(--color-red-hover);\n  --color-info: var(--color-blue-500);\n  --color-highlight: var(--color-light-yellow);\n  --color-background: var(--color-warm-50);\n  --color-foreground: var(--color-warm-975);\n  --color-card: var(--color-white);\n  --color-card-foreground: var(--color-warm-975);\n  --color-popover: var(--color-white);\n  --color-popover-foreground: var(--color-warm-975);\n  --color-primary: var(--color-clay);\n  --color-primary-hover: var(--color-clay-hover);\n  --color-primary-foreground: var(--color-white);\n  --color-secondary: var(--color-warm-100);\n  --color-secondary-foreground: var(--color-warm-720);\n  --color-muted: var(--color-warm-100);\n  --color-muted-foreground: var(--color-warm-550);\n  --color-accent: var(--color-warm-100);\n  --color-accent-foreground: var(--color-warm-720);\n  --color-border: var(--color-warm-300);\n  --color-input: var(--color-warm-300);\n  --color-ring: var(--color-clay);\n  --color-skeleton: var(--color-warm-100);\n  --color-skeleton-highlight: var(--color-white);\n\n  /* ── Typography ── */\n  --font-serif: ui-serif, Georgia, serif;\n  --font-sans: system-ui, -apple-system, sans-serif;\n  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;\n\n  /* ── Border Radius ── */\n  --radius-xs: 4px;\n  --radius-sm: 8px;\n  --radius-md: 12px;\n  --radius-lg: 20px;\n\n  /* ── Shadows ── */\n  --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06);\n  --shadow-md: 0 4px 10px rgba(20, 20, 19, 0.08);\n  --shadow-lg: 0 12px 28px rgba(20, 20, 19, 0.12);\n\n  /* ── Spacing (aliases) ── */\n  --spacing-sp-1: 4px;\n  --spacing-sp-2: 8px;\n  --spacing-sp-3: 12px;\n  --spacing-sp-4: 16px;\n  --spacing-sp-5: 24px;\n  --spacing-sp-6: 32px;\n  --spacing-sp-7: 48px;\n  --spacing-sp-8: 64px;\n}\n\n/* ── Alternative \"Bright\" scheme — overrides accent-hue primitives only. ── */\n:root[data-theme=\"bright\"] {\n  --color-clay: #D05E38;\n  --color-green-500: #658E3B;\n  --color-bronze-500: #C2822A;\n  --color-red-500: #C9413F;\n  --color-blue-500: #608AD5;\n  --color-plum: #9B67B6;\n  --color-teal: #5DB2AC;\n}\n\n/* ── Dark mode — remaps semantic + shifting aliases to dark primitives. ── */\n:root[data-mode=\"dark\"] {\n  --color-background: var(--color-warm-950);\n  --color-foreground: var(--color-warm-150);\n  --color-card: var(--color-warm-850);\n  --color-card-foreground: var(--color-warm-150);\n  --color-popover: var(--color-warm-850);\n  --color-popover-foreground: var(--color-warm-150);\n  --color-secondary: var(--color-warm-850);\n  --color-secondary-foreground: var(--color-warm-350);\n  --color-muted: var(--color-warm-900);\n  --color-muted-foreground: var(--color-warm-450);\n  --color-accent: var(--color-warm-800);\n  --color-accent-foreground: var(--color-warm-150);\n  --color-border: var(--color-warm-650);\n  --color-input: var(--color-warm-750);\n  --color-skeleton: var(--color-warm-780);\n  --color-skeleton-highlight: var(--color-warm-680);\n  --color-success: var(--color-green-400);\n  --color-warning: var(--color-bronze-400);\n  --color-danger: var(--color-red-400);\n  --color-danger-hover: var(--color-red-hover-dark);\n  --color-info: var(--color-blue-400);\n  --color-highlight: var(--color-highlight-dark);\n  --color-gray-300: var(--color-warm-680);\n  --color-gray-500: var(--color-warm-500);\n}\n\n/* ── Skeleton shimmer ──\n   A highlight band sweeps across the base fill. Both colours come from the\n   --color-skeleton* tokens, so it adapts to palette + mode automatically. The\n   band is an ::after overlay clipped to the element's rounded shape. */\n.bl-skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--color-skeleton);\n}\n.bl-skeleton::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  /* Fade to the base fill (not `transparent`) so the band edges never pick up a\n     muddy transparent-black tint on dark surfaces. */\n  background-image: linear-gradient(\n    90deg,\n    var(--color-skeleton),\n    var(--color-skeleton-highlight),\n    var(--color-skeleton)\n  );\n  animation: bl-skeleton-shimmer 1.6s ease-in-out infinite;\n}\n@keyframes bl-skeleton-shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .bl-skeleton::after {\n    animation: none;\n  }\n}\n",
      "type": "registry:file",
      "target": "src/styles/birchline-tokens.css"
    }
  ],
  "type": "registry:file"
}