{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neon-tokens",
  "title": "Neon Theme Tokens",
  "description": "Neon palette and design tokens for Tailwind v4.",
  "files": [
    {
      "path": "src/styles/tokens.css",
      "content": "/*\n * Neon UI theme tokens (Tailwind v4, shadcn convention).\n *\n * Canonical shadcn CSS variables (--background, --primary, --card, ...) set to\n * the Neon palette per https://neon.com/brand: brand green on near-black. Any\n * shadcn/ui component dropped into a consuming app inherits the Neon look with\n * no extra work. The logo asset is never recolored or derived from these vars.\n*/\n\n@import \"shadcn/tailwind.css\";\n\n/* Typography base: macOS renders text heavier than intended, so smooth\n   once at the root; font-synthesis off so a missing weight or italic\n   fails visibly instead of rendering a faked face. */\n@layer base {\n  body {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-synthesis: none;\n  }\n}\n@keyframes neon-skeleton-pulse {\n  0%,\n  100% {\n    opacity: 0.72;\n  }\n\n  50% {\n    opacity: 1;\n  }\n}\n\n:root {\n  --radius: 0.5rem;\n\n  --background: #ffffff;\n  --foreground: #0c0d0d;\n  --card: #ffffff;\n  --card-foreground: #0c0d0d;\n  --popover: #ffffff;\n  --popover-foreground: #0c0d0d;\n  --primary: #00a36f;\n  --primary-foreground: #ffffff;\n  --secondary: #f3f4f6;\n  --secondary-foreground: #0c0d0d;\n  --muted: #f3f4f6;\n  --muted-foreground: #5b6472;\n  --accent: #f3f4f6;\n  --accent-foreground: #0c0d0d;\n  --destructive: #e5484d;\n  --destructive-foreground: #ffffff;\n  --border: #e5e7eb;\n  --input: #e5e7eb;\n  --ring: #00a36f;\n\n  /* Neon compute lifecycle + status accents */\n  --neon: #00b37a;\n  --status-active: #00b37a;\n  --status-sleeping: #6b7280;\n  --status-scaling: #d97706;\n\n  /* Chart ramp: one hue, five clear steps of lightness. Stacked bands are\n     told apart by value, not by hue, so the palette can stay the Neon\n     green family without becoming unreadable. Bands are separated by a\n     hairline in --card; see lib/consumption METRIC_COLORS.\n     Keep in sync with the copy in apps/docs/theme.css. */\n  --chart-1: #34c79a;\n  --chart-2: #00a870;\n  --chart-3: #008054;\n  --chart-4: #005c3e;\n  --chart-5: #0d3a2a;\n\n  --sidebar: #ffffff;\n  --sidebar-foreground: #0c0d0d;\n  --sidebar-primary: #00a36f;\n  --sidebar-primary-foreground: #ffffff;\n  --sidebar-accent: #f3f4f6;\n  --sidebar-accent-foreground: #0c0d0d;\n  --sidebar-border: #e5e7eb;\n  --sidebar-ring: #00a36f;\n}\n\n.dark {\n  --background: #0c0d0d;\n  --foreground: #f3f4f6;\n  --card: #131414;\n  --card-foreground: #f3f4f6;\n  --popover: #1a1b1b;\n  --popover-foreground: #f3f4f6;\n  --primary: #00e599;\n  --primary-foreground: #0c0d0d;\n  --secondary: #1a1b1b;\n  --secondary-foreground: #f3f4f6;\n  --muted: #1a1b1b;\n  --muted-foreground: #9ca3af;\n  --accent: #1a1b1b;\n  --accent-foreground: #f3f4f6;\n  --destructive: #ef4444;\n  --destructive-foreground: #ffffff;\n  --border: #262727;\n  --input: #262727;\n  --ring: #00e599;\n\n  --neon: #00e599;\n  --status-active: #00e599;\n  --status-sleeping: #6b7280;\n  --status-scaling: #f59e0b;\n\n  --chart-1: #7ff5cf;\n  --chart-2: #00e599;\n  --chart-3: #00a870;\n  --chart-4: #0a6647;\n  --chart-5: #14362b;\n\n  --sidebar: #131414;\n  --sidebar-foreground: #f3f4f6;\n  --sidebar-primary: #00e599;\n  --sidebar-primary-foreground: #0c0d0d;\n  --sidebar-accent: #1a1b1b;\n  --sidebar-accent-foreground: #f3f4f6;\n  --sidebar-border: #262727;\n  --sidebar-ring: #00e599;\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  --color-neon: var(--neon);\n  --color-status-active: var(--status-active);\n  --color-status-sleeping: var(--status-sleeping);\n  --color-status-scaling: var(--status-scaling);\n\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n\n  --radius-sm: max(0px, calc(var(--radius) - 4px));\n  --radius-md: max(0px, calc(var(--radius) - 2px));\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n/* Scroll-aware edge fade + thin scrollbar for scrolling panels.\n   Vendored from shadcn's scroll-fade utility (ui.shadcn.com/docs/utils/scroll-fade)\n   as plain CSS: crisp edges at rest ends, faded edges mid-scroll. */\n@property --neon-scroll-fade-t {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n\n@property --neon-scroll-fade-b {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n\n@keyframes neon-scroll-fade-reveal-t {\n  from {\n    --neon-scroll-fade-t: 0px;\n  }\n\n  to {\n    --neon-scroll-fade-t: 32px;\n  }\n}\n\n@keyframes neon-scroll-fade-reveal-b {\n  from {\n    --neon-scroll-fade-b: 32px;\n  }\n\n  to {\n    --neon-scroll-fade-b: 0px;\n  }\n}\n\n.neon-scroll-fade {\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--neon-scroll-fade-t, 0px),\n    #000 calc(100% - var(--neon-scroll-fade-b, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--neon-scroll-fade-t, 0px),\n    #000 calc(100% - var(--neon-scroll-fade-b, 0px)),\n    transparent 100%\n  );\n  scrollbar-color: var(--border) transparent;\n  scrollbar-width: thin;\n}\n\n.neon-scroll-fade::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.neon-scroll-fade::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.neon-scroll-fade::-webkit-scrollbar-thumb {\n  background: var(--border);\n  border-radius: 999px;\n}\n\n.neon-scroll-fade::-webkit-scrollbar-thumb:hover {\n  background: var(--muted-foreground);\n}\n\n.neon-scroll-fade::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n/* Panels that auto-scroll (log tails) hide the scrollbar while they are pinned\n   to the end: the thumb reports a position the reader does not control, and it\n   slides on every new line. Scrolling still works; the bar returns as soon as\n   the reader scrolls away and takes over. */\n.neon-scroll-pinned {\n  scrollbar-width: none;\n}\n\n.neon-scroll-pinned::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n\n@supports (animation-timeline: scroll()) {\n  .neon-scroll-fade {\n    animation:\n      neon-scroll-fade-reveal-t 1ms ease-in-out,\n      neon-scroll-fade-reveal-b 1ms ease-in-out;\n    animation-fill-mode: both;\n    animation-range:\n      0 96px,\n      calc(100% - 96px) 100%;\n    animation-timeline: scroll(self y), scroll(self y);\n  }\n}\n\n@supports not (animation-timeline: scroll()) {\n  .neon-scroll-fade {\n    --neon-scroll-fade-t: 0px;\n    --neon-scroll-fade-b: 0px;\n  }\n}\n\n/*\n * Neon mark shimmer: the brand mark masked over the shadcn shimmer gradient.\n * Mirrors the `shimmer` utility (same gradient, same linear timeline via\n * --shimmer-* variables) but clips to the mark instead of text, so an icon\n * and a `shimmer` label mounted together sweep in perfect sync.\n */\n@keyframes neon-shimmer {\n  from {\n    background-position: 100% 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n\n.neon-mark-shimmer {\n  --_spread: var(--shimmer-spread, calc(3ch + 40px));\n  --_base: currentColor;\n  --_highlight: var(\n    --shimmer-color,\n    oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))\n  );\n  animation: neon-shimmer var(--shimmer-duration, 2s) linear infinite;\n  background-image: linear-gradient(\n    calc(90deg + var(--shimmer-angle, 20deg)),\n    var(--_base) calc(50% - var(--_spread)),\n    color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n      calc(50% - var(--_spread) * 0.5),\n    var(--_highlight) 50%,\n    color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n      calc(50% + var(--_spread) * 0.5),\n    var(--_base) calc(50% + var(--_spread))\n  );\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-size: calc(200% + var(--_spread) * 2) 100%;\n  display: inline-block;\n  mask: var(--neon-mark-uri) center / contain no-repeat;\n  -webkit-mask: var(--neon-mark-uri) center / contain no-repeat;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-mark-shimmer {\n    animation: none;\n    background-image: none;\n    background-color: currentColor;\n  }\n}\n\n/*\n * Status breathe: a slow inhale/exhale for in-flight status dots. The dot\n * dims and swells a soft glow on a 2.6s ease-in-out cycle — alive, not\n * blinking. Static and fully lit under reduced motion.\n */\n@keyframes neon-status-breathe {\n  0%,\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n    opacity: 0.45;\n  }\n  50% {\n    box-shadow: 0 0 6px 1px color-mix(in oklch, currentColor 45%, transparent);\n    opacity: 1;\n  }\n}\n\n.neon-status-breathe {\n  animation: neon-status-breathe 2.6s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-status-breathe {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n/*\n * Card wash: a grainy gradient rising from the bottom edge, colored by\n * currentColor so the status hue drives it. The base layer is a smooth\n * color fade; ::after dithers it with the same fractal noise MetricCard\n * draws over its trend (baseFrequency 0.7, octaves 2, seed 7). Gradient\n * first, grain as texture — never a static field.\n */\n.neon-card-wash {\n  background: linear-gradient(\n    to top,\n    color-mix(in oklch, currentColor 70%, transparent),\n    transparent 85%\n  );\n}\n\n.neon-card-wash::after {\n  background-color: currentColor;\n  content: \"\";\n  inset: 0;\n  mask-composite: intersect;\n  mask-image:\n    url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2' seed='7' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23n)'/%3E%3C/svg%3E\"),\n    linear-gradient(to top, black, transparent);\n  mask-repeat: repeat, no-repeat;\n  mask-size:\n    48px 48px,\n    100% 100%;\n  opacity: 0.6;\n  position: absolute;\n  transition: mask-position 900ms ease-out;\n  -webkit-mask-composite: source-in;\n  -webkit-mask-image:\n    url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2' seed='7' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='48' height='48' filter='url(%23n)'/%3E%3C/svg%3E\"),\n    linear-gradient(to top, black, transparent);\n  -webkit-mask-repeat: repeat, no-repeat;\n  -webkit-mask-size:\n    48px 48px,\n    100% 100%;\n}\n\n[data-slot=\"app-card\"]:hover .neon-card-wash::after {\n  mask-position:\n    0 -10px,\n    0 0;\n  -webkit-mask-position:\n    0 -10px,\n    0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-card-wash::after,\n  [data-slot=\"app-card\"]:hover .neon-card-wash::after {\n    mask-position:\n      0 0,\n      0 0;\n    transition: none;\n    -webkit-mask-position:\n      0 0,\n      0 0;\n  }\n}\n\n/*\n * Stripe march: the EmptyState hairline stripes on the move — a slow\n * barber-pole for in-flight actions. Static under reduced motion.\n */\n@keyframes neon-stripe-march {\n  from {\n    background-position: 0 0;\n  }\n  to {\n    background-position: 9.9px 0;\n  }\n}\n\n.neon-stripe-march {\n  animation: neon-stripe-march 700ms linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-stripe-march {\n    animation: none;\n  }\n}\n\n/*\n * Submit pulse: a primary ring blooms off the surface once at the moment\n * of commitment, then dissolves. The reward beat for submitting.\n */\n@keyframes neon-submit-pulse {\n  from {\n    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 45%, transparent);\n  }\n  to {\n    box-shadow: 0 0 0 14px transparent;\n  }\n}\n\n.neon-submit-pulse {\n  animation: neon-submit-pulse 700ms cubic-bezier(0.22, 1, 0.36, 1) 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-submit-pulse {\n    animation: none;\n  }\n}\n\n/* AuthForm: the valid check draws itself in, stroke first to last. */\n@keyframes neon-check-draw {\n  from {\n    stroke-dashoffset: 1;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n.neon-check-draw {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 0;\n  animation: neon-check-draw 300ms cubic-bezier(0.23, 1, 0.32, 1) 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-check-draw {\n    animation: none;\n  }\n}\n\n/* PreviewFrame: the refresh glyph turns once to acknowledge the click. */\n@keyframes neon-spin-once {\n  from {\n    rotate: 0deg;\n  }\n  to {\n    rotate: 360deg;\n  }\n}\n\n/*\n * Hold shake: the destructive hold trembles, and the tremble grows as\n * the fill approaches commitment. Amplitude rides a registered custom\n * property so it can transition smoothly from 0 over the whole hold —\n * barely a shiver at the start, unmistakable by the end. The jitter\n * mixes axes and never repeats a direction twice, so it reads as\n * strain rather than a metronome. Off entirely under reduced motion.\n */\n@property --neon-shake-amp {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n\n@keyframes neon-hold-shake {\n  0%,\n  100% {\n    translate: 0 0;\n  }\n  12% {\n    translate: calc(var(--neon-shake-amp) * -1)\n      calc(var(--neon-shake-amp) * 0.4);\n  }\n  25% {\n    translate: var(--neon-shake-amp) calc(var(--neon-shake-amp) * -0.3);\n  }\n  38% {\n    translate: calc(var(--neon-shake-amp) * -0.7)\n      calc(var(--neon-shake-amp) * -0.5);\n  }\n  50% {\n    translate: calc(var(--neon-shake-amp) * 0.9)\n      calc(var(--neon-shake-amp) * 0.3);\n  }\n  62% {\n    translate: calc(var(--neon-shake-amp) * -1)\n      calc(var(--neon-shake-amp) * -0.2);\n  }\n  75% {\n    translate: calc(var(--neon-shake-amp) * 0.6)\n      calc(var(--neon-shake-amp) * 0.5);\n  }\n  88% {\n    translate: calc(var(--neon-shake-amp) * -0.4)\n      calc(var(--neon-shake-amp) * -0.4);\n  }\n}\n\n.neon-hold-shake {\n  animation: neon-hold-shake 260ms linear infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .neon-hold-shake {\n    animation: none;\n  }\n}\n",
      "type": "registry:style"
    }
  ],
  "type": "registry:style"
}