{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hud-button",
  "title": "HUD button",
  "description": "HUD button is a production-ready hud component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "framer-motion",
    "next-themes"
  ],
  "files": [
    {
      "path": "components/bjork-ui/hud/hud-button.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"framer-motion\"\nimport type React from \"react\"\nimport type { CSSProperties } from \"react\"\nimport { useState } from \"react\"\nimport { useIsDarkTheme } from \"@/hooks/use-is-dark-theme\"\nimport { BJORK_SURFACE } from \"@/components/bjork-ui/_core/surface\"\n\nexport type HudButtonVariant = \"primary\" | \"secondary\" | \"ghost\"\n\ninterface HudButtonProps {\n  children: React.ReactNode\n  /**\n   * primary: ember fill (deep rust with light labels in light mode).\n   * secondary: the canon surface with a #232323 border and inset light.\n   * ghost: text only, lifts onto a surface on hover.\n   */\n  variant?: HudButtonVariant\n  /** Kept for existing call sites. Both values now draw the same shape family. */\n  style?: \"style1\" | \"style2\"\n  size?: \"small\" | \"default\" | \"large\"\n  onClick?: () => void\n  delay?: number\n  enableAnimations?: boolean\n}\n\nconst SIZES = {\n  small: { height: 32, padX: 12, fontSize: 11, tracking: \"0.12em\" },\n  default: { height: 40, padX: 18, fontSize: 12, tracking: \"0.14em\" },\n  large: { height: 52, padX: 26, fontSize: 13, tracking: \"0.16em\" },\n} as const\n\nconst RADIUS = 12\n\ninterface Tokens {\n  ink: string\n  bg: string\n  hoverBg: string\n  border: string\n  hoverBorder: string\n  shadow: string\n  hoverShadow: string\n  tick: string\n  tickHover: string\n  scan: string\n}\n\nfunction tokensFor(variant: HudButtonVariant, isDark: boolean): Tokens {\n  if (isDark) {\n    const surface = BJORK_SURFACE.dark\n    if (variant === \"primary\") {\n      return {\n        ink: \"#140803\",\n        bg: \"#ec5c13\",\n        hoverBg: \"#f36b24\",\n        border: \"#f47a3d\",\n        hoverBorder: \"#ff8a52\",\n        shadow: \"inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 12px 24px -14px rgba(236, 92, 19, 0.75)\",\n        hoverShadow: \"inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 30px -14px rgba(236, 92, 19, 0.85)\",\n        tick: \"rgba(20, 8, 3, 0.5)\",\n        tickHover: \"rgba(20, 8, 3, 0.9)\",\n        scan: \"rgba(20, 8, 3, 0.1)\",\n      }\n    }\n    if (variant === \"secondary\") {\n      return {\n        ink: \"#ededed\",\n        bg: surface.surfaceHover,\n        hoverBg: surface.surfaceActive,\n        border: surface.border,\n        hoverBorder: surface.borderStrong,\n        shadow: surface.shadowSurface,\n        hoverShadow: surface.shadowSurface,\n        tick: \"rgba(237, 237, 237, 0.34)\",\n        tickHover: \"#ec5c13\",\n        scan: \"rgba(237, 237, 237, 0.035)\",\n      }\n    }\n    return {\n      ink: \"rgba(237, 237, 237, 0.72)\",\n      bg: \"transparent\",\n      hoverBg: surface.surfaceHover,\n      border: \"transparent\",\n      hoverBorder: surface.border,\n      shadow: \"none\",\n      hoverShadow: surface.shadowSoft,\n      tick: \"transparent\",\n      tickHover: \"#ec5c13\",\n      scan: \"rgba(237, 237, 237, 0.03)\",\n    }\n  }\n\n  const surface = BJORK_SURFACE.light\n  if (variant === \"primary\") {\n    return {\n      ink: \"#fff8f0\",\n      bg: \"#b84a12\",\n      hoverBg: \"#a8430f\",\n      border: \"#a4420f\",\n      hoverBorder: \"#963a0c\",\n      shadow: \"inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 22px -14px rgba(120, 60, 20, 0.55)\",\n      hoverShadow: \"inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 26px -14px rgba(120, 60, 20, 0.6)\",\n      tick: \"rgba(255, 248, 240, 0.6)\",\n      tickHover: \"#fff8f0\",\n      scan: \"rgba(255, 248, 240, 0.09)\",\n    }\n  }\n  if (variant === \"secondary\") {\n    return {\n      ink: \"#171717\",\n      bg: surface.surface,\n      hoverBg: surface.surfaceHover,\n      border: surface.borderStrong,\n      hoverBorder: \"#d6c9b5\",\n      shadow: surface.shadowSurface,\n      hoverShadow: surface.shadowSurface,\n      tick: \"rgba(23, 23, 23, 0.3)\",\n      tickHover: \"#b84a12\",\n      scan: \"rgba(88, 72, 49, 0.05)\",\n    }\n  }\n  return {\n    ink: \"rgba(23, 23, 23, 0.72)\",\n    bg: \"transparent\",\n    hoverBg: surface.surfaceHover,\n    border: \"transparent\",\n    hoverBorder: surface.border,\n    shadow: \"none\",\n    hoverShadow: surface.shadowSoft,\n    tick: \"transparent\",\n    tickHover: \"#b84a12\",\n    scan: \"rgba(88, 72, 49, 0.04)\",\n  }\n}\n\ntype Corner = \"tl\" | \"tr\" | \"bl\" | \"br\"\n\n// Corner ticks sit inside the 1px border and draw the HUD bracket.\nconst TICKS: Record<Corner, CSSProperties> = {\n  tl: { top: 4, left: 4, borderWidth: \"1px 0 0 1px\" },\n  tr: { top: 4, right: 4, borderWidth: \"1px 1px 0 0\" },\n  bl: { bottom: 4, left: 4, borderWidth: \"0 0 1px 1px\" },\n  br: { bottom: 4, right: 4, borderWidth: \"0 1px 1px 0\" },\n}\n\nexport function HudButton({\n  children,\n  variant = \"primary\",\n  size = \"default\",\n  onClick,\n  delay = 0,\n  enableAnimations = true,\n}: HudButtonProps) {\n  const shouldReduceMotion = useReducedMotion()\n  const shouldAnimate = enableAnimations && !shouldReduceMotion\n  const [isHovered, setIsHovered] = useState(false)\n  const isDark = useIsDarkTheme()\n\n  const t = tokensFor(variant, isDark)\n  const s = SIZES[size]\n  const ease = shouldAnimate ? \"200ms ease-out\" : \"0ms\"\n\n  const buttonStyle: CSSProperties = {\n    height: s.height,\n    padding: `0 ${s.padX}px`,\n    borderRadius: RADIUS,\n    fontSize: s.fontSize,\n    letterSpacing: s.tracking,\n    color: t.ink,\n    background: isHovered ? t.hoverBg : t.bg,\n    border: `1px solid ${isHovered ? t.hoverBorder : t.border}`,\n    boxShadow: isHovered ? t.hoverShadow : t.shadow,\n    transition: `background-color ${ease}, border-color ${ease}, box-shadow ${ease}, color ${ease}`,\n  }\n\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={onClick}\n      onHoverStart={() => setIsHovered(true)}\n      onHoverEnd={() => setIsHovered(false)}\n      initial={shouldAnimate ? { opacity: 0, y: 6 } : false}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ type: \"spring\", stiffness: 380, damping: 30, mass: 0.8, delay: shouldAnimate ? delay : 0 }}\n      whileHover={shouldAnimate ? { y: -1 } : undefined}\n      whileTap={shouldAnimate ? { scale: 0.98 } : undefined}\n      className=\"relative inline-flex cursor-pointer select-none items-center justify-center overflow-hidden whitespace-nowrap font-mono uppercase outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ec5c13]\"\n      style={buttonStyle}\n    >\n      {(Object.keys(TICKS) as Corner[]).map((corner) => (\n        <span\n          key={corner}\n          aria-hidden\n          className=\"pointer-events-none absolute h-[5px] w-[5px] border-solid\"\n          style={{\n            ...TICKS[corner],\n            borderColor: isHovered ? t.tickHover : t.tick,\n            transition: `border-color ${ease}`,\n          }}\n        />\n      ))}\n\n      {/* Scanline detail: fades in on hover. Static under reduced motion. */}\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0\"\n        style={{\n          backgroundImage: `repeating-linear-gradient(0deg, ${t.scan} 0 1px, transparent 1px 3px)`,\n          opacity: isHovered ? 1 : 0,\n          transition: `opacity ${shouldAnimate ? \"240ms ease-out\" : \"0ms\"}`,\n        }}\n      />\n\n      <span className=\"relative z-[1]\">{children}</span>\n    </motion.button>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/hud/hud-button.tsx"
    },
    {
      "path": "hooks/use-is-dark-theme.ts",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { useTheme } from \"next-themes\"\n\n/**\n * Hydration-safe dark flag for components that paint SVG or inline colors.\n *\n * The server and the first client render both report dark (the default look).\n * The real theme is applied after mount. Reading `resolvedTheme` during the\n * first client render makes React keep the server-rendered attributes on\n * light pages, which leaves dark-only strokes and fills in place.\n */\nexport function useIsDarkTheme(): boolean {\n  const { resolvedTheme } = useTheme()\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  return mounted ? resolvedTheme !== \"light\" : true\n}\n",
      "type": "registry:hook",
      "target": "@hooks/use-is-dark-theme.ts"
    },
    {
      "path": "components/bjork-ui/_core/surface.ts",
      "content": "import type { CSSProperties } from \"react\";\nimport type { BjorkTone } from \"./palette\";\n\n// The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together.\nexport const BJORK_SURFACE = {\n  light: {\n    surface: \"#fffcf6\", surfaceMuted: \"rgba(250, 246, 237, 0.94)\", surfaceHover: \"#f5efe3\", surfaceActive: \"#efe7d8\",\n    panel: \"#f8f2e7\", menu: \"rgba(255, 252, 246, 0.98)\", field: \"rgba(255, 252, 246, 0.96)\",\n    fieldMuted: \"rgba(248, 242, 231, 0.82)\", fieldInset: \"rgba(239, 231, 216, 0.72)\",\n    border: \"#eee6db\", borderMuted: \"#f5ede2\", borderStrong: \"#e1d7c8\",\n    shadowSurface: \"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)\",\n    shadowSoft: \"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)\",\n    shadowPanel: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)\",\n    shadowMenu: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)\",\n    shadowInset: \"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)\",\n  },\n  dark: {\n    surface: \"#121212\", surfaceMuted: \"rgba(22, 22, 22, 0.92)\", surfaceHover: \"#161616\", surfaceActive: \"#202020\",\n    panel: \"#0d0d0d\", menu: \"rgba(18, 18, 18, 0.98)\", field: \"rgba(18, 18, 18, 0.95)\",\n    fieldMuted: \"rgba(18, 18, 18, 0.55)\", fieldInset: \"rgba(9, 9, 9, 0.75)\",\n    border: \"#232323\", borderMuted: \"#1c1c1c\", borderStrong: \"#343434\",\n    shadowSurface: \"inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)\",\n    shadowSoft: \"inset 0 1px 0 rgba(255, 255, 255, 0.045)\",\n    shadowPanel: \"inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)\",\n    shadowMenu: \"inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)\",\n    shadowInset: \"inset 0 1px 10px rgba(0, 0, 0, 0.45)\",\n  },\n} as const;\n\n/** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */\nexport function surfaceVars(tone: BjorkTone): CSSProperties {\n  const s = BJORK_SURFACE[tone];\n  return {\n    \"--bjork-surface\": s.surface, \"--bjork-surface-muted\": s.surfaceMuted, \"--bjork-surface-hover\": s.surfaceHover,\n    \"--bjork-surface-active\": s.surfaceActive, \"--bjork-panel\": s.panel, \"--bjork-menu\": s.menu, \"--bjork-field\": s.field,\n    \"--bjork-field-muted\": s.fieldMuted, \"--bjork-field-inset\": s.fieldInset, \"--bjork-border\": s.border,\n    \"--bjork-border-muted\": s.borderMuted, \"--bjork-border-strong\": s.borderStrong,\n    \"--bjork-shadow-surface\": s.shadowSurface, \"--bjork-shadow-soft\": s.shadowSoft, \"--bjork-shadow-panel\": s.shadowPanel,\n    \"--bjork-shadow-menu\": s.shadowMenu, \"--bjork-shadow-inset\": s.shadowInset,\n  } as CSSProperties;\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/surface.ts"
    },
    {
      "path": "components/bjork-ui/_core/palette.ts",
      "content": "export type BjorkTone = \"dark\" | \"light\";\n\n// Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks.\nexport const BJORK_PALETTE = {\n  dark: {\n    bg: \"#050505\", stage: \"#111111\", surface: \"#121212\", raised: \"#161616\", active: \"#202020\",\n    border: \"#232323\", borderStrong: \"#343434\",\n    text: \"#ededed\", textMedium: \"rgba(237,237,237,0.72)\", textMuted: \"rgba(237,237,237,0.6)\",\n    textSoft: \"rgba(237,237,237,0.5)\", textFaint: \"rgba(237,237,237,0.22)\", hair: \"rgba(237,237,237,0.12)\",\n    accent: \"#ec5c13\", accentInk: \"#ec5c13\", accentFill: \"#b84a12\", accentSoft: \"rgba(236,92,19,0.12)\", accentMuted: \"rgba(236,92,19,0.24)\",\n    accentFg: \"#fff2ea\", success: \"#4cc38a\", warning: \"#f2b544\", error: \"#ff5c4d\",\n  },\n  light: {\n    bg: \"#f7f5ef\", stage: \"#f7f5ef\", surface: \"#fffcf6\", raised: \"#f5efe3\", active: \"#efe7d8\",\n    border: \"#eee6db\", borderStrong: \"#e1d7c8\",\n    text: \"#171717\", textMedium: \"rgba(23,23,23,0.78)\", textMuted: \"rgba(23,23,23,0.68)\",\n    textSoft: \"rgba(23,23,23,0.62)\", textFaint: \"rgba(23,23,23,0.22)\", hair: \"rgba(23,23,23,0.10)\",\n    accent: \"#ec7d43\", accentInk: \"#b4531f\", accentFill: \"#ec7d43\", accentSoft: \"rgba(236,125,67,0.10)\", accentMuted: \"rgba(236,125,67,0.20)\",\n    accentFg: \"#3f2112\", success: \"#1f8a55\", warning: \"#a86b00\", error: \"#c8361f\",\n  },\n} as const;\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/palette.ts"
    }
  ],
  "cssVars": {
    "light": {
      "bjork-bg": "#f7f3ea",
      "bjork-surface": "#fffcf6",
      "bjork-surface-muted": "rgba(250, 246, 237, 0.94)",
      "bjork-surface-hover": "#f5efe3",
      "bjork-surface-active": "#efe7d8",
      "bjork-panel": "#f8f2e7",
      "bjork-menu": "rgba(255, 252, 246, 0.98)",
      "bjork-field": "rgba(255, 252, 246, 0.96)",
      "bjork-field-muted": "rgba(248, 242, 231, 0.82)",
      "bjork-field-inset": "rgba(239, 231, 216, 0.72)",
      "bjork-error-bg": "#fff0e8",
      "bjork-text": "#171717",
      "bjork-text-strong": "rgba(23, 23, 23, 0.9)",
      "bjork-text-medium": "rgba(23, 23, 23, 0.78)",
      "bjork-text-muted": "rgba(23, 23, 23, 0.68)",
      "bjork-text-soft": "rgba(23, 23, 23, 0.62)",
      "bjork-text-faint": "rgba(23, 23, 23, 0.22)",
      "bjork-inverted-text": "#fff8f0",
      "bjork-border": "#eee6db",
      "bjork-border-muted": "#f5ede2",
      "bjork-border-strong": "#e1d7c8",
      "bjork-thumb": "#a49b8e",
      "bjork-track": "#ded6ca",
      "bjork-accent": "#ec7d43",
      "bjork-accent-hover": "#f0935f",
      "bjork-accent-soft": "rgba(236, 125, 67, 0.1)",
      "bjork-accent-muted": "rgba(236, 125, 67, 0.2)",
      "bjork-accent-badge": "rgba(236, 125, 67, 0.16)",
      "bjork-accent-badge-foreground": "#8d421d",
      "bjork-accent-foreground": "#3f2112",
      "bjork-accent-fill": "#ec7d43",
      "bjork-accent-fill-hover": "#f0935f",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
      "bjork-ring-offset": "#f7f3ea"
    },
    "dark": {
      "bjork-bg": "#111111",
      "bjork-surface": "#121212",
      "bjork-surface-muted": "rgba(22, 22, 22, 0.92)",
      "bjork-surface-hover": "#161616",
      "bjork-surface-active": "#202020",
      "bjork-panel": "#0d0d0d",
      "bjork-menu": "rgba(18, 18, 18, 0.98)",
      "bjork-field": "rgba(18, 18, 18, 0.95)",
      "bjork-field-muted": "rgba(18, 18, 18, 0.55)",
      "bjork-field-inset": "rgba(9, 9, 9, 0.75)",
      "bjork-error-bg": "#130d0a",
      "bjork-text": "#ededed",
      "bjork-text-strong": "rgba(237, 237, 237, 0.9)",
      "bjork-text-medium": "rgba(237, 237, 237, 0.72)",
      "bjork-text-muted": "rgba(237, 237, 237, 0.6)",
      "bjork-text-soft": "rgba(237, 237, 237, 0.5)",
      "bjork-text-faint": "rgba(237, 237, 237, 0.22)",
      "bjork-inverted-text": "#080808",
      "bjork-border": "#232323",
      "bjork-border-muted": "#1c1c1c",
      "bjork-border-strong": "#343434",
      "bjork-thumb": "#626262",
      "bjork-track": "#090909",
      "bjork-accent": "#ec5c13",
      "bjork-accent-hover": "#f07832",
      "bjork-accent-soft": "rgba(236, 92, 19, 0.12)",
      "bjork-accent-muted": "rgba(236, 92, 19, 0.24)",
      "bjork-accent-badge": "#b84a12",
      "bjork-accent-badge-foreground": "#fff2ea",
      "bjork-accent-foreground": "#fff2ea",
      "bjork-accent-fill": "#b84a12",
      "bjork-accent-fill-hover": "#a84a14",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
      "bjork-ring-offset": "#080808"
    }
  },
  "css": {
    ".bjork-range": {
      "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)"
    },
    ".bjork-range::-webkit-slider-thumb": {
      "appearance": "none",
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-range::-moz-range-thumb": {
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-layered-button-accent, .bjork-layered-button-raised": {
      "position": "relative",
      "isolation": "isolate",
      "appearance": "none",
      "overflow": "hidden",
      "border": "0",
      "border-radius": "13px",
      "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
      "transition": "filter 150ms ease-out, box-shadow 150ms ease-out"
    },
    ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": {
      "position": "absolute",
      "inset": "0",
      "pointer-events": "none",
      "content": "\"\"",
      "border": "1.5px solid transparent",
      "border-radius": "inherit",
      "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box",
      "mix-blend-mode": "overlay",
      "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "-webkit-mask-clip": "padding-box, border-box",
      "mask-clip": "padding-box, border-box",
      "-webkit-mask-origin": "padding-box, border-box",
      "mask-origin": "padding-box, border-box",
      "-webkit-mask-composite": "xor",
      "mask-composite": "exclude"
    },
    ".bjork-layered-button-accent": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000040",
      "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)"
    },
    ".bjork-layered-button-raised": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))"
    },
    ".dark .bjork-layered-button-raised": {
      "color": "oklch(0.2574 0.0056 265)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))"
    },
    "@media (hover: hover)": {
      ".bjork-layered-button-accent:hover": {
        "filter": "brightness(1.08) saturate(1.04)"
      },
      ".bjork-layered-button-raised:hover": {
        "filter": "brightness(1.08) contrast(0.9)"
      }
    }
  },
  "meta": {
    "collection": "HUD",
    "registryUrl": "https://ui.isaiahbjork.com/hud-button.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/hud-button.json"
  },
  "type": "registry:component"
}