{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interface-tuning",
  "type": "registry:style",
  "extends": "none",
  "title": "Interface Tuning Kit",
  "description": "Thirty-one interface details from shipping products. CSS utilities and motion tokens for typography, geometry, motion, surfaces, and interaction. Companion kit to the field guide at https://daniasyrofi.com/writing/details-that-make-interfaces-feel-better/.",
  "author": "Muhammad Dani Asyrofi <https://daniasyrofi.com>",
  "homepage": "https://daniasyrofi.com/writing/details-that-make-interfaces-feel-better/",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "cssVars": {
    "theme": {
      "--ease-out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
      "--ease-out-quint": "cubic-bezier(0.22, 1, 0.36, 1)",
      "--ease-curtain": "cubic-bezier(0.76, 0, 0.24, 1)",
      "--ease-spring-out": "cubic-bezier(0.34, 1.56, 0.64, 1)",
      "--d-micro": "150ms",
      "--d-small": "300ms",
      "--d-medium": "600ms",
      "--d-large": "900ms",
      "--stagger-word": "40ms",
      "--stagger-line": "100ms"
    }
  },
  "css": {
    "@utility tnum": {
      "font-variant-numeric": "tabular-nums slashed-zero"
    },
    "@utility balance": {
      "text-wrap": "balance"
    },
    "@utility pretty": {
      "text-wrap": "pretty"
    },
    "@utility font-smooth": {
      "-webkit-font-smoothing": "antialiased",
      "-moz-osx-font-smoothing": "grayscale",
      "text-rendering": "optimizeLegibility"
    },
    "@utility focus-ring": {
      "outline": "2px solid transparent",
      "outline-offset": "2px"
    },
    "@utility card-elevated": {
      "border": "1px solid color-mix(in oklab, currentColor 8%, transparent)",
      "box-shadow": "0 1px 2px color-mix(in oklab, currentColor 4%, transparent), 0 8px 24px color-mix(in oklab, currentColor 5%, transparent)"
    },
    "@utility glass": {
      "backdrop-filter": "blur(20px) saturate(180%)",
      "-webkit-backdrop-filter": "blur(20px) saturate(180%)"
    },
    "@utility skeleton": {
      "background": "linear-gradient(90deg, color-mix(in oklab, currentColor 6%, transparent) 0%, color-mix(in oklab, currentColor 12%, transparent) 50%, color-mix(in oklab, currentColor 6%, transparent) 100%)",
      "background-size": "200% 100%",
      "animation": "it-skeleton 1.8s var(--ease-out-expo) infinite"
    },
    "@utility hairline": {
      "border": "1px solid color-mix(in oklab, currentColor 8%, transparent)"
    },
    "@layer base": {
      ":focus-visible": {
        "outline-color": "var(--ring, currentColor)",
        "outline-offset": "2px"
      },
      "::view-transition-old(root), ::view-transition-new(root)": {
        "animation-duration": "420ms",
        "animation-timing-function": "var(--ease-out-expo)"
      },
      "@media (prefers-reduced-motion: reduce)": {
        "*, *::before, *::after": {
          "animation-duration": "0.01ms !important",
          "animation-iteration-count": "1 !important",
          "transition-duration": "0.01ms !important",
          "scroll-behavior": "auto !important"
        }
      }
    },
    "@keyframes it-skeleton": {
      "0%": { "background-position": "200% 0" },
      "100%": { "background-position": "-200% 0" }
    }
  }
}