{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "surfaces",
  "title": "Surfaces",
  "description": "Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with layered inset highlights and drops.",
  "cssVars": {
    "theme": {
      "color-surface-1": "var(--surface-1)",
      "color-surface-2": "var(--surface-2)",
      "color-surface-3": "var(--surface-3)",
      "color-surface-4": "var(--surface-4)",
      "color-surface-5": "var(--surface-5)",
      "color-surface-6": "var(--surface-6)",
      "color-surface-7": "var(--surface-7)",
      "color-surface-8": "var(--surface-8)",
      "shadow-surface-1": "var(--shadow-1)",
      "shadow-surface-2": "var(--shadow-2)",
      "shadow-surface-3": "var(--shadow-3)",
      "shadow-surface-4": "var(--shadow-4)",
      "shadow-surface-5": "var(--shadow-5)",
      "shadow-surface-6": "var(--shadow-6)",
      "shadow-surface-7": "var(--shadow-7)",
      "shadow-surface-8": "var(--shadow-8)"
    },
    "light": {
      "surface-1": "#FAFAFA",
      "surface-2": "#FCFCFC",
      "surface-3": "#FFFFFF",
      "surface-4": "#FFFFFF",
      "surface-5": "#FFFFFF",
      "surface-6": "#FFFFFF",
      "surface-7": "#FFFFFF",
      "surface-8": "#FFFFFF",
      "shadow-color": "rgb(0 0 0 / 0.06)",
      "shadow-1": "0 0 0 1px var(--shadow-color)",
      "shadow-2": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color)",
      "shadow-3": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color)",
      "shadow-4": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color)",
      "shadow-5": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color)",
      "shadow-6": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color)",
      "shadow-7": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color)",
      "shadow-8": "0 0 0 1px var(--shadow-color), 0 1px 1px -0.5px var(--shadow-color), 0 3px 3px -1.5px var(--shadow-color), 0 6px 6px -3px var(--shadow-color), 0 12px 12px -6px var(--shadow-color), 0 24px 24px -12px var(--shadow-color), 0 48px 48px -24px var(--shadow-color), 0 96px 96px -48px var(--shadow-color)"
    },
    "dark": {
      "surface-1": "#171717",
      "surface-2": "#1E1E1E",
      "surface-3": "#252525",
      "surface-4": "#2C2C2C",
      "surface-5": "#333333",
      "surface-6": "#3A3A3A",
      "surface-7": "#414141",
      "surface-8": "#484848",
      "dm-hi-base": "rgba(255,255,255,0.01)",
      "dm-hi-mid": "rgba(255,255,255,0.02)",
      "dm-hi-high": "rgba(255,255,255,0.04)",
      "dm-hi-peak": "rgba(255,255,255,0.06)",
      "dm-ring-base": "rgba(255,255,255,0.02)",
      "dm-ring-mid": "rgba(255,255,255,0.04)",
      "dm-ring-high": "rgba(255,255,255,0.06)",
      "dm-drop": "rgba(0,0,0,0.18)",
      "shadow-1": "inset 0 0 0 1px var(--dm-ring-base)",
      "shadow-2": "inset 0 1px 0 0 var(--dm-hi-base), inset 0 0 0 1px var(--dm-ring-base), 0 1px 1px -0.5px var(--dm-drop)",
      "shadow-3": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-base), 0 0 0 1px rgba(0,0,0,0.12), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop)",
      "shadow-4": "inset 0 1px 0 0 var(--dm-hi-mid), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.14), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop)",
      "shadow-5": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-mid), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop)",
      "shadow-6": "inset 0 1px 0 0 var(--dm-hi-high), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.18), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop)",
      "shadow-7": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.20), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop)",
      "shadow-8": "inset 0 1px 0 0 var(--dm-hi-peak), inset 0 0 0 1px var(--dm-ring-high), 0 0 0 1px rgba(0,0,0,0.22), 0 1px 1px -0.5px var(--dm-drop), 0 3px 3px -1.5px var(--dm-drop), 0 6px 6px -3px var(--dm-drop), 0 12px 12px -6px var(--dm-drop), 0 24px 24px -12px var(--dm-drop), 0 48px 48px -24px var(--dm-drop), 0 96px 96px -48px var(--dm-drop)"
    }
  },
  "categories": [
    "theme"
  ],
  "type": "registry:theme"
}