{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "creance-base",
  "title": "Creance base",
  "description": "Shared helpers, base styles and the design tokens every Creance component uses.",
  "files": [
    {
      "path": "creance-base/LiveRegion.tsx",
      "content": "'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * A polite live region. The message is set a beat after mount because screen readers only announce\n * changes to a region that already exists in the DOM.\n */\nexport function LiveRegion({ message }: { message: string }) {\n  const [text, setText] = useState('');\n  useEffect(() => {\n    const id = setTimeout(() => setText(message), 150);\n    return () => clearTimeout(id);\n  }, [message]);\n  return (\n    <div role=\"status\" className=\"cr-visually-hidden\">\n      {text}\n    </div>\n  );\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/LiveRegion.tsx"
    },
    {
      "path": "creance-base/VisuallyHidden.tsx",
      "content": "import type { HTMLAttributes } from 'react';\n\n/** Content for screen readers only. */\nexport function VisuallyHidden(props: HTMLAttributes<HTMLSpanElement>) {\n  return <span className=\"cr-visually-hidden\" {...props} />;\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/VisuallyHidden.tsx"
    },
    {
      "path": "creance-base/base.css",
      "content": ".cr-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n.cr-icon {\n  flex: none;\n  vertical-align: -0.125em;\n}\n\n/*\n * Glass layers, public so apps can use them. Each is a tint at a layer opacity with a bright\n * hairline edge and a top highlight. All turn solid with no blur under prefers-reduced-transparency,\n * prefers-contrast: more, or data-transparency=\"reduce\" on the root.\n *   .cr-window   the frame of a screen: most translucent, strongest blur\n *   .cr-surface  a tile inside a window (cards, rows, panels): no blur of its own\n *   .cr-glass    a sheet that floats above (requests, bars, drawers)\n *   .cr-popover  menus, tooltips, popovers: nearly opaque so text stays crisp\n */\n.cr-window,\n.cr-glass,\n.cr-popover {\n  border: 1px solid var(--cr-color-glass-edge);\n  box-shadow: var(--cr-shadow-md), inset 0 1px 0 var(--cr-color-glass-highlight);\n}\n\n.cr-window {\n  background-color: var(--cr-color-glass-window);\n  -webkit-backdrop-filter: var(--cr-glass-filter-window);\n  backdrop-filter: var(--cr-glass-filter-window);\n}\n\n.cr-glass,\n.cr-popover {\n  background-color: var(--cr-color-glass-sheet);\n  -webkit-backdrop-filter: var(--cr-glass-filter-sheet);\n  backdrop-filter: var(--cr-glass-filter-sheet);\n  box-shadow: var(--cr-shadow-sheet), inset 0 1px 0 var(--cr-color-glass-highlight);\n}\n\n.cr-popover {\n  background-color: var(--cr-color-glass-popover);\n}\n\n.cr-surface {\n  border: 1px solid var(--cr-color-glass-edge);\n  background-color: var(--cr-color-glass-tile);\n  box-shadow: var(--cr-shadow-card);\n}\n\n/* Titles: the system face, bold and tightly tracked. */\n.cr-display {\n  font-family: var(--cr-font-family-display);\n  font-weight: var(--cr-font-weight-bold);\n  letter-spacing: var(--cr-font-tracking-title);\n}\n",
      "type": "registry:file",
      "target": "@lib/creance/base.css"
    },
    {
      "path": "creance-base/cx.ts",
      "content": "// Shared base styles (.cr-visually-hidden, .cr-icon). Imported here because every component imports cx;\n// an import in index.ts alone gets tree-shaken, since index.ts only re-exports.\nimport './base.css';\n\n/** Joins class names, skipping falsy values. */\nexport function cx(...names: Array<string | false | null | undefined>): string {\n  return names.filter(Boolean).join(' ');\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/cx.ts"
    },
    {
      "path": "creance-base/deprecate.ts",
      "content": "// Bundlers replace process.env.NODE_ENV in apps; this file never imports Node types.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nfunction isProduction(): boolean {\n  try {\n    return process.env.NODE_ENV === 'production';\n  } catch {\n    // No bundler and no `process`: treat as development.\n    return false;\n  }\n}\n\nconst warned = new Set<string>();\n\n/** Warns once per key, outside production. */\nexport function deprecate(key: string, message: string): void {\n  if (isProduction() || warned.has(key)) return;\n  warned.add(key);\n  console.warn(`[creance] ${message}`);\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/deprecate.ts"
    },
    {
      "path": "creance-base/formatDuration.ts",
      "content": "/** 12s, 2m 05s, 1h 02m. */\nexport function formatDuration(ms: number): string {\n  const s = Math.max(0, Math.floor(ms / 1000));\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  if (m < 60) return `${m}m ${String(s % 60).padStart(2, '0')}s`;\n  return `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, '0')}m`;\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/formatDuration.ts"
    },
    {
      "path": "creance-base/icons.tsx",
      "content": "// Small inline icons. Decorative only: every use sits next to visible text.\nimport type { SVGProps } from 'react';\n\ntype IconProps = SVGProps<SVGSVGElement>;\n\nfunction Icon({ children, ...props }: IconProps) {\n  return (\n    <svg\n      className=\"cr-icon\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const CheckIcon = (p: IconProps) => <Icon {...p}><path d=\"M3 8.5l3 3 7-7\" /></Icon>;\nexport const CrossIcon = (p: IconProps) => <Icon {...p}><path d=\"M4 4l8 8M12 4l-8 8\" /></Icon>;\nexport const PauseIcon = (p: IconProps) => <Icon {...p}><circle cx=\"8\" cy=\"8\" r=\"6\" /><path d=\"M8 5v3.5l2 1.5\" /></Icon>;\nexport const BlockedIcon = (p: IconProps) => <Icon {...p}><circle cx=\"8\" cy=\"8\" r=\"6\" /><path d=\"M4 12l8-8\" /></Icon>;\nexport const AlertIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 2l6.5 11.5h-13z\" /><path d=\"M8 6.5v3M8 11.5v.01\" /></Icon>;\nexport const DotIcon = (p: IconProps) => <Icon {...p}><circle cx=\"8\" cy=\"8\" r=\"3.5\" fill=\"currentColor\" stroke=\"none\" /></Icon>;\nexport const ChevronIcon = (p: IconProps) => <Icon {...p}><path d=\"M6 4l4 4-4 4\" /></Icon>;\nexport const RetryIcon = (p: IconProps) => <Icon {...p}><path d=\"M13 8a5 5 0 1 1-1.5-3.5M13 2.5v3h-3\" /></Icon>;\nexport const ShieldIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 1.5l5 2v4c0 3.3-2.2 5.8-5 7-2.8-1.2-5-3.7-5-7v-4z\" /></Icon>;\nexport const ArrowDownIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 3v10M4 9l4 4 4-4\" /></Icon>;\nexport const ChevronDownIcon = (p: IconProps) => <Icon {...p}><path d=\"M4 6l4 4 4-4\" /></Icon>;\nexport const InfoIcon = (p: IconProps) => <Icon {...p}><circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M8 7.5v4M8 4.8v.01\" /></Icon>;\nexport const ChevronLeftIcon = (p: IconProps) => <Icon {...p}><path d=\"M10 4l-4 4 4 4\" /></Icon>;\nexport const SearchIcon = (p: IconProps) => <Icon {...p}><circle cx=\"7\" cy=\"7\" r=\"4.5\" /><path d=\"M10.5 10.5l3 3\" /></Icon>;\nexport const CopyIcon = (p: IconProps) => <Icon {...p}><rect x=\"5\" y=\"5\" width=\"8\" height=\"8\" rx=\"2\" /><path d=\"M3 10V4a1 1 0 0 1 1-1h6\" /></Icon>;\nexport const PlusIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 3v10M3 8h10\" /></Icon>;\nexport const SunIcon = (p: IconProps) => <Icon {...p}><circle cx=\"8\" cy=\"8\" r=\"3\" /><path d=\"M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1\" /></Icon>;\nexport const MoonIcon = (p: IconProps) => <Icon {...p}><path d=\"M13 9.5A5.5 5.5 0 0 1 6.5 3a5.5 5.5 0 1 0 6.5 6.5z\" /></Icon>;\nexport const MonitorIcon = (p: IconProps) => <Icon {...p}><rect x=\"2\" y=\"3\" width=\"12\" height=\"8\" rx=\"1.5\" /><path d=\"M6 14h4M8 11v3\" /></Icon>;\nexport const ThumbIcon = (p: IconProps) => <Icon {...p}><path d=\"M5 7l2.5-5c1 0 1.8.8 1.6 1.8L8.7 6.5H12a1.5 1.5 0 0 1 1.5 1.8l-.8 4.5A1.5 1.5 0 0 1 11.2 14H5zM2 7h3v7H2z\" /></Icon>;\nexport const DotsIcon = (p: IconProps) => <Icon {...p}><circle cx=\"3.5\" cy=\"8\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"8\" cy=\"8\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12.5\" cy=\"8\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" /></Icon>;\nexport const PlayIcon = (p: IconProps) => <Icon {...p}><path d=\"M5 3.5v9l7.5-4.5z\" fill=\"currentColor\" /></Icon>;\nexport const PauseBarsIcon = (p: IconProps) => <Icon {...p}><path d=\"M5.5 3.5v9M10.5 3.5v9\" strokeWidth=\"2.2\" /></Icon>;\nexport const VolumeIcon = (p: IconProps) => <Icon {...p}><path d=\"M3 6h2.5L9 3v10L5.5 10H3z\" /><path d=\"M11.5 5.5a3.5 3.5 0 0 1 0 5\" /></Icon>;\nexport const MutedIcon = (p: IconProps) => <Icon {...p}><path d=\"M3 6h2.5L9 3v10L5.5 10H3z\" /><path d=\"M11.5 6l3 4M14.5 6l-3 4\" /></Icon>;\nexport const ExpandIcon = (p: IconProps) => <Icon {...p}><path d=\"M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10\" /></Icon>;\nexport const StopIcon = (p: IconProps) => <Icon {...p}><rect x=\"4\" y=\"4\" width=\"8\" height=\"8\" rx=\"1.5\" fill=\"currentColor\" stroke=\"none\" /></Icon>;\nexport const MenuIcon = (p: IconProps) => <Icon {...p}><path d=\"M2.5 4.5h11M2.5 8h11M2.5 11.5h11\" /></Icon>;\nexport const SidebarIcon = (p: IconProps) => <Icon {...p}><rect x=\"2.2\" y=\"2.8\" width=\"11.6\" height=\"10.4\" rx=\"2.2\" /><path d=\"M6.2 2.8v10.4\" /></Icon>;\nexport const SendIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 13V3.5M4 7.5l4-4 4 4\" /></Icon>;\nexport const SparkIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 2.5v3M8 10.5v3M2.5 8h3M10.5 8h3M4.300 4.300l1.900 1.900M9.800 9.800l1.900 1.900M4.300 11.700l1.900-1.900M9.800 6.200l1.900-1.900\" /></Icon>;\nexport const FileIcon = (p: IconProps) => <Icon {...p}><path d=\"M4 2.5h5l3 3V13a.5.5 0 0 1-.5.5h-7.500a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z\" /><path d=\"M9 2.5v3h3\" /></Icon>;\nexport const ImageIcon = (p: IconProps) => <Icon {...p}><rect x=\"2.5\" y=\"3\" width=\"11\" height=\"10\" rx=\"2\" /><circle cx=\"6\" cy=\"6.5\" r=\"1.200\" /><path d=\"M3 12l3.500-3.500 2.500 2.500 2-2 2.500 2.500\" /></Icon>;\nexport const ArrowUpIcon = (p: IconProps) => <Icon {...p}><path d=\"M8 13V3M4 7l4-4 4 4\" /></Icon>;\nexport const MinusIcon = (p: IconProps) => <Icon {...p}><path d=\"M3 8h10\" /></Icon>;\n",
      "type": "registry:lib",
      "target": "@lib/creance/icons.tsx"
    },
    {
      "path": "creance-base/useNow.ts",
      "content": "'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * The current time, read just after mount and then every `interval` ms while `ticking`.\n * Undefined until mounted: a clock read while rendering differs between the server and the browser,\n * and Next.js refuses it when prerendering.\n */\nexport function useNow(interval: number, ticking = true): number | undefined {\n  const [now, setNow] = useState<number>();\n  useEffect(() => {\n    const tick = () => setNow(Date.now());\n    const first = setTimeout(tick, 0);\n    const id = ticking ? setInterval(tick, interval) : undefined;\n    return () => {\n      clearTimeout(first);\n      clearInterval(id);\n    };\n  }, [interval, ticking]);\n  return now;\n}\n",
      "type": "registry:lib",
      "target": "@lib/creance/useNow.ts"
    },
    {
      "path": "creance-base/tokens.css",
      "content": "/* Generated by @creance-ui/tokens. Do not edit. */\n:root {\n  color-scheme: light;\n  --cr-gray-0: #ffffff;\n  --cr-gray-50: #f5f5f7;\n  --cr-gray-100: #e9ebef;\n  --cr-gray-200: #cdd0d6;\n  --cr-gray-300: #a3a8b0;\n  --cr-gray-400: #7a8089;\n  --cr-gray-500: #5f6368;\n  --cr-gray-600: #4a4e54;\n  --cr-gray-700: #3c4043;\n  --cr-gray-750: #3a3e48;\n  --cr-gray-800: #2c2f38;\n  --cr-gray-850: #1c1e24;\n  --cr-gray-900: #1d1d1f;\n  --cr-gray-950: #101216;\n  --cr-blue-300: #4da3ff;\n  --cr-blue-500: #0071e3;\n  --cr-blue-600: #0062c4;\n  --cr-blue-700: #004f9e;\n  --cr-red-300: #ff7b72;\n  --cr-red-400: #ff6961;\n  --cr-red-500: #d0342c;\n  --cr-red-600: #c5221f;\n  --cr-red-700: #b3261e;\n  --cr-space-0: 0px;\n  --cr-space-1: 4px;\n  --cr-space-2: 8px;\n  --cr-space-3: 12px;\n  --cr-space-4: 16px;\n  --cr-space-5: 20px;\n  --cr-space-6: 24px;\n  --cr-space-8: 32px;\n  --cr-space-10: 40px;\n  --cr-space-12: 48px;\n  --cr-radius-sm: 8px;\n  --cr-radius-md: 12px;\n  --cr-radius-lg: 18px;\n  --cr-radius-xl: 22px;\n  --cr-radius-2xl: 28px;\n  --cr-radius-full: 9999px;\n  --cr-font-family-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  --cr-font-family-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  --cr-font-family-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;\n  --cr-font-size-xs: 12px;\n  --cr-font-size-sm: 13px;\n  --cr-font-size-md: 15px;\n  --cr-font-size-lg: 16px;\n  --cr-font-size-xl: 20px;\n  --cr-font-size-2xl: 24px;\n  --cr-font-size-3xl: 30px;\n  --cr-font-size-4xl: 44px;\n  --cr-font-weight-regular: 400;\n  --cr-font-weight-medium: 500;\n  --cr-font-weight-semibold: 600;\n  --cr-font-weight-bold: 700;\n  --cr-font-line-height-tight: 1.25;\n  --cr-font-line-height-normal: 1.5;\n  --cr-font-tracking-tight: -0.01em;\n  --cr-font-tracking-title: -0.022em;\n  --cr-motion-duration-fast: 120ms;\n  --cr-motion-duration-base: 200ms;\n  --cr-motion-duration-slow: 320ms;\n  --cr-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --cr-motion-easing-spring: cubic-bezier(0.32, 0.72, 0, 1);\n  --cr-focus-width: 3px;\n  --cr-focus-offset: 2px;\n  --cr-glass-opacity-window: 32%;\n  --cr-glass-opacity-tile: 50%;\n  --cr-glass-opacity-sheet: 62%;\n  --cr-glass-opacity-popover: 80%;\n  --cr-glass-opacity-control: 70%;\n  --cr-glass-filter-window: blur(40px) saturate(170%);\n  --cr-glass-filter-sheet: blur(24px) saturate(180%);\n  --cr-control-height-md: 44px;\n  --cr-control-height-sm: 36px;\n  --cr-color-bg-subtle: rgb(0 0 0 / 0.05);\n  --cr-color-bg-overlay: rgb(30 40 60 / 0.18);\n  --cr-color-glass-edge: rgb(255 255 255 / 0.7);\n  --cr-color-glass-highlight: rgb(255 255 255 / 0.85);\n  --cr-color-text-link: #0066cc;\n  --cr-color-border-default: rgb(0 0 0 / 0.1);\n  --cr-color-border-strong: rgb(0 0 0 / 0.22);\n  --cr-color-focus: rgb(0 113 227 / 0.55);\n  --cr-color-accent-subtle: rgb(0 113 227 / 0.12);\n  --cr-color-ink-subtle: rgb(0 0 0 / 0.07);\n  --cr-color-tether-slack: rgb(29 29 31 / 0.22);\n  --cr-color-sky-star: rgb(29 29 31 / 0);\n  --cr-color-status-running-bg: rgb(0 0 0 / 0.06);\n  --cr-color-status-blocked-bg: rgb(0 0 0 / 0.04);\n  --cr-color-status-done-bg: rgb(0 0 0 / 0.04);\n  --cr-color-risk-low-bg: rgb(0 0 0 / 0.04);\n  --cr-color-risk-medium-bg: rgb(0 0 0 / 0.06);\n  --cr-color-diff-added-bg: rgb(0 0 0 / 0.06);\n  --cr-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);\n  --cr-shadow-card: 0 2px 6px rgb(30 40 60 / 0.06);\n  --cr-shadow-md: 0 30px 80px rgb(30 40 60 / 0.18), 0 2px 6px rgb(30 40 60 / 0.06);\n  --cr-shadow-sheet: 0 20px 50px rgb(30 40 60 / 0.16);\n  --cr-shadow-accent: 0 6px 16px rgb(0 113 227 / 0.28);\n  --cr-gradient-canvas: radial-gradient(60% 55% at 12% 18%, #c9d6ea, transparent 70%), radial-gradient(50% 55% at 88% 12%, #ddd3ea, transparent 70%), radial-gradient(70% 60% at 70% 95%, #cfdde6, transparent 70%);\n  --cr-gradient-horizon: radial-gradient(80% 50% at 50% 100%, rgb(30 40 60 / 0.05), transparent 70%);\n  --cr-color-bg-canvas: var(--cr-gray-100);\n  --cr-color-bg-surface: var(--cr-gray-0);\n  --cr-color-bg-raised: var(--cr-gray-0);\n  --cr-color-bg-inverse: var(--cr-gray-900);\n  --cr-color-glass-tint: var(--cr-gray-0);\n  --cr-color-text-default: var(--cr-gray-900);\n  --cr-color-text-secondary: var(--cr-gray-700);\n  --cr-color-text-muted: var(--cr-gray-500);\n  --cr-color-text-inverse: var(--cr-gray-0);\n  --cr-color-accent-bg: var(--cr-blue-500);\n  --cr-color-accent-bg-hover: var(--cr-blue-600);\n  --cr-color-accent-bg-active: var(--cr-blue-700);\n  --cr-color-accent-fg: var(--cr-gray-0);\n  --cr-color-ink-bg: var(--cr-gray-900);\n  --cr-color-ink-bg-hover: var(--cr-gray-700);\n  --cr-color-ink-fg: var(--cr-gray-0);\n  --cr-color-danger-bg: var(--cr-red-600);\n  --cr-color-danger-bg-hover: var(--cr-red-700);\n  --cr-color-danger-fg: var(--cr-gray-0);\n  --cr-color-danger-text: var(--cr-red-600);\n  --cr-color-tether-taut: var(--cr-gray-900);\n  --cr-color-status-running-fg: var(--cr-gray-700);\n  --cr-color-status-waiting-fg: var(--cr-gray-0);\n  --cr-color-status-waiting-bg: var(--cr-gray-900);\n  --cr-color-status-blocked-fg: var(--cr-gray-500);\n  --cr-color-status-done-fg: var(--cr-gray-500);\n  --cr-color-status-failed-fg: var(--cr-red-700);\n  --cr-color-status-failed-bg: color-mix(in srgb, var(--cr-red-600) 9%, transparent);\n  --cr-color-risk-low-fg: var(--cr-gray-500);\n  --cr-color-risk-medium-fg: var(--cr-gray-700);\n  --cr-color-risk-high-fg: var(--cr-red-700);\n  --cr-color-risk-high-bg: color-mix(in srgb, var(--cr-red-600) 9%, transparent);\n  --cr-color-diff-added-fg: var(--cr-gray-700);\n  --cr-color-diff-removed-bg: color-mix(in srgb, var(--cr-red-600) 8%, transparent);\n  --cr-color-diff-removed-fg: var(--cr-red-700);\n  --cr-shadow-glow: var(--cr-shadow-sheet);\n  --cr-color-glass-window: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-window), transparent);\n  --cr-color-glass-tile: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-tile), transparent);\n  --cr-color-glass-sheet: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-sheet), transparent);\n  --cr-color-glass-popover: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-popover), transparent);\n  --cr-color-glass-control: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-control), transparent);\n  --cr-color-glass-surface: var(--cr-color-glass-sheet);\n}\n\n\n:root:where([data-theme=\"dark\"], .dark) {\n  color-scheme: dark;\n  --cr-color-bg-subtle: rgb(255 255 255 / 0.07);\n  --cr-color-bg-overlay: rgb(0 0 0 / 0.5);\n  --cr-color-glass-tint: rgb(40 43 52);\n  --cr-color-glass-edge: rgb(255 255 255 / 0.12);\n  --cr-color-glass-highlight: rgb(255 255 255 / 0.1);\n  --cr-color-border-default: rgb(255 255 255 / 0.12);\n  --cr-color-border-strong: rgb(255 255 255 / 0.26);\n  --cr-color-focus: rgb(77 163 255 / 0.7);\n  --cr-color-accent-subtle: rgb(77 163 255 / 0.18);\n  --cr-color-ink-subtle: rgb(255 255 255 / 0.1);\n  --cr-color-tether-slack: rgb(245 245 247 / 0.22);\n  --cr-color-sky-star: rgb(255 255 255 / 0.5);\n  --cr-color-status-running-bg: rgb(255 255 255 / 0.08);\n  --cr-color-status-blocked-bg: rgb(255 255 255 / 0.06);\n  --cr-color-status-done-bg: rgb(255 255 255 / 0.06);\n  --cr-color-risk-low-bg: rgb(255 255 255 / 0.06);\n  --cr-color-risk-medium-bg: rgb(255 255 255 / 0.08);\n  --cr-color-diff-added-bg: rgb(255 255 255 / 0.08);\n  --cr-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);\n  --cr-shadow-card: 0 2px 6px rgb(0 0 0 / 0.3);\n  --cr-shadow-md: 0 30px 80px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.13);\n  --cr-shadow-sheet: 0 20px 50px rgb(0 0 0 / 0.35);\n  --cr-shadow-accent: 0 6px 16px rgb(0 113 227 / 0.35);\n  --cr-gradient-canvas: radial-gradient(60% 55% at 12% 18%, #1c2840, transparent 70%), radial-gradient(50% 55% at 88% 12%, #2a2140, transparent 70%), radial-gradient(70% 60% at 70% 95%, #17282f, transparent 70%);\n  --cr-gradient-horizon: radial-gradient(80% 50% at 50% 100%, rgb(255 255 255 / 0.04), transparent 70%);\n  --cr-color-bg-canvas: var(--cr-gray-950);\n  --cr-color-bg-surface: var(--cr-gray-850);\n  --cr-color-bg-raised: var(--cr-gray-800);\n  --cr-color-bg-inverse: var(--cr-gray-50);\n  --cr-color-glass-window: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-window), transparent);\n  --cr-color-glass-tile: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-tile), transparent);\n  --cr-color-glass-sheet: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-sheet), transparent);\n  --cr-color-glass-popover: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-popover), transparent);\n  --cr-color-glass-control: color-mix(in srgb, var(--cr-color-glass-tint) var(--cr-glass-opacity-control), transparent);\n  --cr-color-text-default: var(--cr-gray-50);\n  --cr-color-text-secondary: var(--cr-gray-200);\n  --cr-color-text-muted: var(--cr-gray-300);\n  --cr-color-text-inverse: var(--cr-gray-900);\n  --cr-color-text-link: var(--cr-blue-300);\n  --cr-color-accent-bg: var(--cr-blue-500);\n  --cr-color-accent-bg-hover: var(--cr-blue-600);\n  --cr-color-accent-bg-active: var(--cr-blue-700);\n  --cr-color-accent-fg: var(--cr-gray-0);\n  --cr-color-ink-bg: var(--cr-gray-50);\n  --cr-color-ink-bg-hover: var(--cr-gray-200);\n  --cr-color-ink-fg: var(--cr-gray-900);\n  --cr-color-danger-bg: var(--cr-red-500);\n  --cr-color-danger-bg-hover: var(--cr-red-600);\n  --cr-color-danger-fg: var(--cr-gray-0);\n  --cr-color-danger-text: var(--cr-red-400);\n  --cr-color-tether-taut: var(--cr-gray-50);\n  --cr-color-status-running-fg: var(--cr-gray-200);\n  --cr-color-status-waiting-fg: var(--cr-gray-900);\n  --cr-color-status-waiting-bg: var(--cr-gray-50);\n  --cr-color-status-blocked-fg: var(--cr-gray-300);\n  --cr-color-status-done-fg: var(--cr-gray-300);\n  --cr-color-status-failed-fg: var(--cr-red-300);\n  --cr-color-status-failed-bg: color-mix(in srgb, var(--cr-red-400) 14%, transparent);\n  --cr-color-risk-low-fg: var(--cr-gray-300);\n  --cr-color-risk-medium-fg: var(--cr-gray-200);\n  --cr-color-risk-high-fg: var(--cr-red-300);\n  --cr-color-risk-high-bg: color-mix(in srgb, var(--cr-red-400) 14%, transparent);\n  --cr-color-diff-added-fg: var(--cr-gray-200);\n  --cr-color-diff-removed-bg: color-mix(in srgb, var(--cr-red-400) 14%, transparent);\n  --cr-color-diff-removed-fg: var(--cr-red-300);\n  --cr-shadow-glow: var(--cr-shadow-sheet);\n  --cr-color-glass-surface: var(--cr-color-glass-sheet);\n}\n\n/* Solid surfaces and no blur when the person asks for less transparency or more contrast. */\n@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {\n  :root:root {\n  --cr-glass-opacity-window: 100%;\n  --cr-glass-opacity-tile: 100%;\n  --cr-glass-opacity-sheet: 100%;\n  --cr-glass-opacity-popover: 100%;\n  --cr-glass-opacity-control: 100%;\n  --cr-glass-filter-window: none;\n  --cr-glass-filter-sheet: none;\n  }\n}\n:root[data-transparency=\"reduce\"] {\n  --cr-glass-opacity-window: 100%;\n  --cr-glass-opacity-tile: 100%;\n  --cr-glass-opacity-sheet: 100%;\n  --cr-glass-opacity-popover: 100%;\n  --cr-glass-opacity-control: 100%;\n  --cr-glass-filter-window: none;\n  --cr-glass-filter-sheet: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root:root {\n    --cr-motion-duration-fast: 0ms;\n    --cr-motion-duration-base: 0ms;\n    --cr-motion-duration-slow: 0ms;\n  }\n}\n",
      "type": "registry:file",
      "target": "@lib/creance/tokens.css"
    }
  ],
  "docs": "Import lib/creance/tokens.css once, in your root layout (with your own import alias, for example @/lib/creance/tokens.css). Edit it to retheme. Like the rest of a shadcn app, it goes dark with the .dark class (or data-theme=\"dark\"); to follow the system, let next-themes set the class.",
  "type": "registry:lib"
}