Components

Swatches, overlays, gradients, and semantic colors shared across Planner.

• --aa-min-contrast

  4.5

• --accent-1

  276 88% 59%

• --accent-1-contrast

  276 92% 88%

• --accent-1-foreground

  0 0% 100%

• --accent-1-hover

  hsl(var(--accent-1) / 0.14)

• --accent-1-soft

  276 88% 22%

• --accent-2

  168 88% 28%

• --accent-2-foreground

  0 0% 100%

• --accent-3

  318 82% 60%

• --accent-overlay

  hsl(var(--accent-1))

• --active

  hsl(var(--foreground) / 0.12)

• --aurora-g

  var(--accent-2)

• --aurora-g-light

  150 100% 85%

• --aurora-g-light-color

  hsl(var(--aurora-g-light))

• --aurora-p

  var(--accent-1)

• --aurora-p-light

  272 80% 85%

• --aurora-p-light-color

  hsl(var(--aurora-p-light))

• --backdrop-blob-1

  var(--lg-violet)

• --backdrop-blob-2

  var(--lg-cyan)

• --backdrop-blob-3

  var(--lg-pink)

• --backdrop-drip-1

  var(--backdrop-blob-1)

• --backdrop-drip-2

  var(--backdrop-blob-2)

• --backdrop-drip-3

  var(--backdrop-blob-3)

• --backdrop-grid-primary

  var(--accent-1)

• --backdrop-grid-secondary

  var(--accent-1)

• --background

  247 32% 14%

• --bg

  var(--background)

• --blob-radius-soft

  calc(var(--radius-2xl) + var(--spacing-2))

• --blob-surface

  color-mix(in oklab, hsl(var(--surface)) 70%, hsl(var(--surface-2)) 30%)

• --blob-surface-1

  hsl(var(--surface))

• --blob-surface-2

  hsl(var(--surface-2))

• --blob-surface-3

  hsl(var(--card))

• --border

  253 26% 28%

• --btn-bg

  transparent

• --btn-fg

  hsl(var(--foreground))

• --card

  249 28% 21%

• --card-foreground

  var(--foreground)

• --card-hairline

  color-mix(in oklab, hsl(var(--border)) 78%, hsl(var(--foreground)) 22%)

• --card-overlay-scanlines

  repeating-linear-gradient( to bottom, hsl(var(--foreground) / var(--texture-scanline-opacity, 0.06)) 0, hsl(var(--foreground) / var(--texture-scanline-opacity, 0.06)) var(--spacing-0-25), transparent var(--spacing-0-5), transparent calc(var(--spacing-0-5) + var(--spacing-0-25)) )

• --danger

  0 84% 60%

• --danger-foreground

  0 0% 100%

• --depth-shadow-inset

  var(--shadow-depth-inner)

• --drip-surface

  color-mix(in oklab, hsl(var(--accent-1)) 18%, hsl(var(--background)) 82%)

• --elevation-0

  none

• --elevation-1

  var(--shadow-outline-faint)

• --elevation-2

  var(--shadow-outline-subtle)

• --elevation-3

  var(--shadow-control)

• --elevation-card

  var(--shadow-outline-subtle)

• --elevation-card-pressed

  var(--shadow-control)

• --fg-muted

  var(--muted-foreground)

• --focus

  var(--theme-ring)

• --foreground

  258 24% 96%

• --glitch-accent-blur

  var(--spacing-0-5)

• --glitch-accent-color

  hsl(var(--accent-1) / 0.35)

• --glitch-chromatic-offset-light

  calc(var(--spacing-0-25) / 10)

• --glitch-chromatic-offset-medium

  calc(var(--spacing-0-25) * 3 / 20)

• --glitch-chromatic-offset-strong

  calc(var(--spacing-0-25) / 4)

• --glitch-fringe

  12deg

• --glitch-intensity

  1.0

• --glitch-intensity-default

  1.0

• --glitch-intensity-subtle

  calc(var(--glitch-intensity-default) * 0.68)

• --glitch-noise-contrast

  hsl(var(--foreground) / var(--texture-grain-opacity, 0.04))

• --glitch-noise-hover

  calc(var(--glitch-noise-level) * 1.3)

• --glitch-noise-level

  var(--glitch-static-opacity)

• --glitch-noise-primary

  hsl(var(--accent-1) / var(--texture-grain-opacity, 0.04))

• --glitch-noise-secondary

  hsl(var(--ring) / var(--texture-grain-opacity, 0.04))

• --glitch-overlay-opacity-card

  var(--theme-scanline-opacity-moderate, 0.06)

• --glitch-pixel

  var(--glitch-noise-level)

• --glitch-ring-blur

  var(--space-2)

• --glitch-ring-color

  hsl(var(--ring) / 0.55)

• --glow

  296 96% 56%

• --glow-active

  hsl(var(--glow))

• --glow-primary

  hsl(var(--primary) / 0.55)

• --glow-soft

  var(--accent-1) / 0.25

• --glow-strong

  var(--ring) / 0.55

• --gradient-brandmark-fill

  linear-gradient(180deg, hsl(var(--accent-1)), hsl(var(--accent-2)))

• --gradient-brandmark-halo

  radial-gradient(circle at 50% 50%, hsl(var(--glow) / 0.7), transparent 70%)

• --gradient-chrome-divider

  linear-gradient( 90deg, hsl(var(--glow) / 0.75), hsl(var(--accent-2)), hsl(var(--glow) / 0.75) )

• --gradient-nav-underline-glow

  linear-gradient( 90deg, hsl(var(--glow) / 0.6), hsl(var(--accent-2)), hsl(var(--glow) / 0.6) )

• --grid-color

  var(--accent-1)

• --grid-size

  calc(var(--space-6) - var(--space-1))

• --hardstuck-background

  120 58% 9%

• --hardstuck-border

  120 42% 22%

• --hardstuck-foreground

  120 60% 72%

• --hero-divider-blur

  calc(var(--spacing-1) * 1.5)

• --hero-illustration-blur

  calc(var(--space-4) + var(--space-1))

• --highlight

  0 0% 100%

• --hover

  hsl(var(--foreground) / 0.08)

• --icon-fg

  250 96% 84%

• --icon-size

  var(--icon-size-md)

• --icon-size-2xl

  76px

• --icon-size-lg

  24px

• --icon-size-md

  18px

• --icon-size-sm

  16px

• --icon-size-xl

  32px

• --icon-size-xs

  14px

• --icon-stroke-100

  var(--spacing-0-5)

• --icon-stroke-150

  calc(var(--spacing-0-5) * 1.25)

• --input

  249 26% 15%

• --lav-deep

  318 82% 60%

• --layout-gutter-lg

  var(--spacing-6)

• --layout-gutter-md

  var(--spacing-5)

• --layout-gutter-sm

  var(--spacing-4)

• --layout-quick-action-min

  calc(var(--spacing-8) * 3)

• --layout-quick-action-tooltip-max

  calc(var(--spacing-8) * 5)

• --lg-black

  var(--background)

• --lg-cyan

  var(--accent-2)

• --lg-pink

  var(--lav-deep)

• --lg-violet

  var(--ring)

• --line

  var(--border)

• --muted

  248 22% 19%

• --muted-foreground

  248 18% 74%

• --neon

  var(--glow)

• --neon-soft

  hsl(var(--neon))

• --noir-background

  352 68% 10%

• --noir-border

  352 44% 24%

• --noir-foreground

  0 0% 94%

• --panel

  var(--card)

• --pillar-comms-end

  var(--primary)

• --pillar-comms-start

  var(--lav-deep)

• --pillar-positioning-end

  var(--primary)

• --pillar-positioning-start

  var(--accent-2)

• --pillar-tempo-end

  var(--accent-1)

• --pillar-tempo-start

  var(--ring)

• --pillar-trading-end

  var(--accent-1)

• --pillar-trading-start

  var(--lav-deep)

• --pillar-vision-end

  var(--accent-2)

• --pillar-vision-start

  var(--success)

• --pillar-wave-end

  var(--accent-2)

• --pillar-wave-start

  var(--accent-1)

• --primary

  262 88% 60%

• --primary-foreground

  0 0% 100%

• --primary-soft

  262 88% 20%

• --retro-grid-step

  24px

• --ring

  262 88% 66%

• --ring-contrast

  hsl(var(--ring))

• --ring-diameter-l

  calc(var(--space-8) * 3.5)

• --ring-diameter-m

  var(--space-8)

• --ring-diameter-s

  var(--space-6)

• --ring-diameter-xs

  var(--space-5)

• --ring-inset

  calc(var(--space-3) / 2)

• --ring-muted

  248 22% 24%

• --ring-size-1

  var(--spacing-0-5)

• --ring-size-2

  var(--spacing-1)

• --ring-stroke-l

  var(--ring-size-2)

• --ring-stroke-m

  var(--ring-size-2)

• --ring-stroke-s

  var(--ring-size-1)

• --ring-stroke-xs

  var(--ring-size-1)

• --scanline

  var(--glitch-scanline)

• --seg-active-base

  hsl(var(--card))

• --shadow-color

  263 78% 56%

• --shell-max

  var(--shell-width)

• --shell-width

  1280px

• --skeleton-bg

  hsl(var(--muted) / 0.6)

• --skeleton-fill

  hsl(var(--foreground) / 0.08)

• --stat-bad

  var(--danger)

• --stat-good

  var(--success)

• --stat-warn

  var(--warning)

• --state-danger-border

  color-mix(in oklab, hsl(var(--danger)) 62%, hsl(var(--border)))

• --state-danger-surface

  color-mix(in oklab, hsl(var(--danger)) 18%, hsl(var(--surface)))

• --state-success-border

  color-mix(in oklab, hsl(var(--success)) 65%, hsl(var(--border)))

• --state-success-surface

  color-mix(in oklab, hsl(var(--success)) 18%, hsl(var(--surface)))

• --state-warning-border

  color-mix(in oklab, hsl(var(--warning)) 60%, hsl(var(--border)))

• --state-warning-surface

  color-mix(in oklab, hsl(var(--warning)) 20%, hsl(var(--surface)))

• --success

  160 72% 48%

• --success-foreground

  0 0% 100%

• --success-glow

  160 72% 38% / 0.6

• --success-soft

  var(--success) / 0.2

• --surface

  248 24% 18%

• --surface-2

  248 24% 18%

• --surface-streak

  240 16% 16%

• --surface-vhs

  210 22% 10%

• --team-blue

  200 100% 60%

• --team-red

  0 85% 60%

• --text

  var(--foreground)

• --text-on-accent

  hsl(var(--foreground))

• --theme-ring

  hsl(var(--ring))

• --tone-bot

  195 75% 56%

• --tone-jg

  152 52% 44%

• --tone-mid

  265 72% 62%

• --tone-sup

  320 72% 60%

• --tone-top

  38 92% 60%

• --warning

  43 96% 56%

• --warning-foreground

  0 0% 100%

• --warning-soft

  var(--warning) / 0.1

• --warning-soft-strong

  var(--warning) / 0.2

• --danger-surface-foreground

  var(--danger-foreground)

• --glitch-card-surface-bottom

  hsl(var(--panel) / 0.66)

• --glitch-card-surface-top

  hsl(var(--card) / 0.78)

• --surface-card-soft

  linear-gradient(180deg, hsl(var(--card) / 0.65), hsl(var(--card) / 0.45))

• --surface-card-strong

  linear-gradient(180deg, hsl(var(--card) / 0.85), hsl(var(--card) / 0.65))

• --surface-card-strong-active

  linear-gradient(180deg, hsl(var(--card) / 0.8), hsl(var(--card) / 0.6))

• --surface-card-strong-empty

  linear-gradient(180deg, hsl(var(--card) / 0.6), hsl(var(--card) / 0.5))

• --surface-card-strong-hover

  linear-gradient(180deg, hsl(var(--card) / 0.95), hsl(var(--card) / 0.75))

• --surface-card-strong-today

  linear-gradient(180deg, hsl(var(--card) / 0.9), hsl(var(--card) / 0.7))

• --surface-overlay-soft

  0.12

• --surface-overlay-strong

  0.2

• --surface-rail-accent

  linear-gradient(180deg, hsl(var(--accent-1)), hsl(var(--primary)))

• --edge-iris

  conic-gradient( from 180deg, hsl(262 88% 60% / 0), hsl(262 88% 60% / 0.72), hsl(var(--accent-3) / 0.72), hsl(318 82% 60% / 0.7), hsl(262 88% 60% / 0) )

• --gradient-blob-primary

  radial-gradient(120% 120% at 50% 10%, hsl(var(--surface) / 0.85), hsl(var(--surface-2) / 0.35), transparent 85%)

• --gradient-drip-overlay

  radial-gradient(60% 40% at 10% 0%, hsl(var(--backdrop-drip-1) / 0.2), transparent 60%), radial-gradient(50% 35% at 100% 5%, hsl(var(--backdrop-drip-2) / 0.18), transparent 60%), radial-gradient(55% 35% at 50% 120%, hsl(var(--backdrop-drip-3) / 0.14), transparent 65%), radial-gradient(120% 100% at 50% 100%, hsl(var(--backdrop-drip-shadow) / 0.35), transparent 70%)

• --gradient-drip-overlay-compact

  radial-gradient(125% 85% at 18% -20%, hsl(var(--backdrop-drip-1) / 0.28), transparent 65%), radial-gradient(115% 85% at 82% -15%, hsl(var(--backdrop-drip-2) / 0.24), transparent 62%), radial-gradient(120% 95% at 50% 110%, hsl(var(--backdrop-drip-3) / 0.16), transparent 70%)

• --gradient-glitch-overlay

  linear-gradient(120deg, hsl(var(--accent-1) / 0.12) 0%, transparent 58%, hsl(var(--ring) / 0.16) 100%), var(--card-overlay-scanlines)

• --gradient-glitch-primary

  linear-gradient(135deg, hsl(var(--accent-1) / 0.35), hsl(var(--accent-2) / 0.3))

• --gradient-glitch-rail

  linear-gradient(180deg, hsl(var(--primary) / 0.6) 0%, hsl(var(--accent-1) / 0.45) 45%, hsl(var(--ring) / 0.6) 100%)

• --gradient-hero-action-halo

  radial-gradient(120% 95% at 50% 0%, hsl(var(--accent-1) / 0.24), transparent 65%)

• --gradient-hero-slot-highlight

  radial-gradient(circle at top left, var(--depth-glow-highlight-medium) 0%, transparent 62%)

• --gradient-hero-slot-shadow

  radial-gradient(circle at bottom right, var(--depth-glow-shadow-medium) 0%, transparent 65%)

• --gradient-hero-topline

  linear-gradient(90deg, hsl(var(--accent-1) / 0.28), transparent 55%, hsl(var(--accent-2) / 0.32))

• --gradient-panel-tilt-bright

  linear-gradient(140deg, hsl(var(--card) / 0.98), hsl(var(--surface-2) / 0.82))

• --gradient-panel-tilt-muted

  linear-gradient(140deg, hsl(var(--card) / 0.94), hsl(var(--surface-2) / 0.72))

• --gradient-panel-tilt-strong

  linear-gradient(140deg, hsl(var(--card) / 0.95), hsl(var(--surface-2) / 0.78))

• --review-result-loss-gradient

  linear-gradient( 90deg, hsl(var(--danger) / 0.24), hsl(var(--primary) / 0.2) )

• --review-result-win-gradient

  linear-gradient( 90deg, hsl(var(--success) / 0.22), hsl(var(--accent-1) / 0.18) )

• --seg-active-grad

  linear-gradient( 90deg, hsl(var(--primary-soft) / 0.85), hsl(var(--accent-1-soft) / 0.85), hsl(var(--accent-2) / 0.8) )

• --card-elev-1

  var(--shadow-outline-faint), var(--shadow-outer-sm)

• --card-elev-2

  var(--shadow-outline-subtle), var(--shadow-outer-md)

• --card-elev-3

  var(--shadow-outline-subtle), var(--shadow-outer-lg)

• --depth-focus-ring-active

  0 0 0 calc(var(--hairline-w) * 1) hsl(var(--ring)) var(--shadow-glow-lg)

• --depth-focus-ring-rest

  0 0 0 0 hsl(var(--ring) / 0), 0 0 0 0 hsl(var(--ring) / 0)

• --depth-glow-highlight-medium

  hsl(var(--highlight) / 0.35)

• --depth-glow-highlight-soft

  hsl(var(--highlight) / 0.08)

• --depth-glow-highlight-strong

  hsl(var(--highlight) / 0.55)

• --depth-glow-shadow-medium

  hsl(var(--shadow-color) / 0.28)

• --depth-glow-shadow-soft

  hsl(var(--shadow-color) / 0.14)

• --depth-glow-shadow-strong

  hsl(var(--shadow-color) / 0.42)

• --depth-shadow-inner

  var(--shadow-depth-inner)

• --depth-shadow-outer

  var(--shadow-depth-outer)

• --depth-shadow-outer-strong

  var(--shadow-depth-outer-strong)

• --depth-shadow-soft

  var(--shadow-depth-soft)

• --glow-ring

  0 0 0 calc(var(--spacing-0-5)) hsl(var(--ring) / 0.5), 0 0 var(--spacing-3) hsl(var(--ring) / 0.22)

• --glow-ring-md

  0 0 0 calc(var(--spacing-0-5)) hsl(var(--ring) / 0.5), 0 0 var(--spacing-2) hsl(var(--ring) / 0.2)

• --glow-ring-sm

  0 0 0 calc(var(--spacing-0-25)) hsl(var(--ring) / 0.45)

• --neo-depth-lg

  var(--spacing-4)

• --neo-depth-md

  var(--spacing-3)

• --neo-depth-sm

  var(--spacing-1)

• --neo-highlight

  color-mix(in oklab, hsl(var(--ring)) 18%, hsl(var(--card)))

• --neo-surface

  color-mix(in oklab, hsl(var(--card)) 88%, hsl(var(--panel)) 12%)

• --neo-surface-alt

  color-mix(in oklab, hsl(var(--panel)) 82%, hsl(var(--card)) 18%)

• --shadow-inner-lg

  inset 0 var(--spacing-0-5) var(--spacing-2) hsl(var(--shadow-color) / 0.36)

• --shadow-inner-md

  inset 0 var(--spacing-0-25) var(--spacing-1) hsl(var(--shadow-color) / 0.28)

• --shadow-inner-sm

  inset 0 var(--spacing-0-125) var(--spacing-0-5) hsl(var(--shadow-color) / 0.18)

• --shadow-outer-lg

  0 var(--spacing-4) var(--spacing-7) hsl(var(--shadow-color) / 0.36)

• --shadow-outer-md

  0 var(--spacing-3) var(--spacing-6) hsl(var(--shadow-color) / 0.3)

• --shadow-outer-sm

  0 var(--spacing-2) var(--spacing-4) hsl(var(--shadow-color) / 0.24)

• --shadow-outer-xl

  0 var(--spacing-5) var(--spacing-8) hsl(var(--shadow-color) / 0.45)

State opacities and utility helpers for disabled, loading, and hidden surfaces.

• --backdrop-grid-opacity

  0.1

• --card-noise-opacity

  0.06

• --disabled

  0.5

• --glitch-halo-opacity

  0.28

• --glitch-intensity-backdrop-blob-1

  0.18

• --glitch-intensity-backdrop-blob-2

  0.16

• --glitch-intensity-backdrop-blob-3

  0.12

• --glitch-intensity-backdrop-drip-1

  0.23

• --glitch-intensity-backdrop-drip-2

  0.2

• --glitch-intensity-backdrop-drip-3

  0.16

• --glitch-intensity-backdrop-shadow

  0.38

• --glitch-intensity-hero-rail

  0.74

• --glitch-overlay-button-opacity

  0.42

• --glitch-overlay-button-opacity-reduced

  0.28

• --glitch-static-opacity

  0.054

• --gradient-noise-opacity

  0.1

• --gradient-noise-overlay-opacity

  0.06

• --grid-alpha

  0.1

• --hero-illustration-opacity

  0.84

• --loading

  0.6

• --neo-glow-strength

  0.45

• --neon-outline-opacity

  0.35

• --retro-grid-opacity

  0.15

• --texture-grain-opacity

  0.04

• --texture-scanline-opacity

  0.06

• --visually-hidden-top

  -9999px

Spacing scale, gutters, and control dimensions for layout rhythm.

• --control-h

  var(--control-h-md)

• --control-h-lg

  48px

• --control-h-md

  40px

• --control-h-sm

  32px

• --control-h-xl

  56px

• --control-h-xs

  24px

• --control-px

  var(--spacing-3)

• --hairline-w

  1px

• --header-stack

  calc(var(--spacing-8) + var(--spacing-4))

• --space-1

  var(--spacing-1)

• --space-10

  calc(var(--space-8) + var(--space-2))

• --space-11

  calc(var(--space-8) + var(--space-3))

• --space-12

  calc(var(--space-8) + var(--space-4))

• --space-16

  calc(var(--space-8) * 2)

• --space-2

  var(--spacing-2)

• --space-3

  var(--spacing-3)

• --space-4

  var(--spacing-4)

• --space-5

  var(--spacing-5)

• --space-6

  var(--spacing-6)

• --space-7

  var(--spacing-7)

• --space-8

  var(--spacing-8)

• --space-9

  calc(var(--space-8) + var(--space-1))

• --spacing-0-125

  calc(var(--spacing-1) / 8)

• --spacing-0-25

  calc(var(--spacing-1) / 4)

• --spacing-0-5

  calc(var(--spacing-1) / 2)

• --spacing-0-75

  calc(var(--spacing-1) * 0.75)

• --spacing-1

  4px

• --spacing-2

  8px

• --spacing-3

  12px

• --spacing-4

  16px

• --spacing-5

  24px

• --spacing-6

  32px

• --spacing-7

  48px

• --spacing-8

  64px

Corner radii applied to cards, surfaces, and interactive controls.

• --card-radius

  var(--radius-xl)

• --control-radius

  var(--radius-xl)

• --radius-2xl

  24px

• --radius-full

  9999px

• --radius-lg

  12px

• --radius-md

  8px

• --radius-sm

  6px

• --radius-xl

  16px

Font sizes and weight tokens that shape headings and UI text.

• --control-fs

  Aa

  var(--font-ui)

• --font-body

  Aa

  19px

• --font-label

  Aa

  12px

• --font-size-md

  Aa

  var(--font-body)

• --font-title

  Aa

  24px

• --font-title-lg

  Aa

  30px

• --font-ui

  Aa

  15px

• --font-weight-bold

  Aa

  800

Elevation, outline, and glow shadows for surfaces and interactions.

• --backdrop-blob-shadow

  var(--lg-black)

• --backdrop-drip-shadow

  var(--backdrop-blob-shadow)

• --blob-surface-shadow

  hsl(var(--shadow-color) / 0.4)

• --btn-primary-active-shadow

  inset 0 0 0 calc(var(--space-1) / 4) hsl(var(--accent-1) / 0.6)

• --btn-primary-hover-shadow

  0 calc(var(--space-1) / 2) calc(var(--space-3) / 2) calc(-1 * var(--space-1) / 4) hsl(var(--accent-1) / 0.25)

• --glitch-accent-shadow

  0 0 var(--glitch-accent-blur) var(--glitch-accent-color)

• --glitch-ring-shadow

  0 0 var(--glitch-ring-blur) var(--glitch-ring-color)

• --pillar-comms-shadow

  var(--primary) / 0.35

• --pillar-positioning-shadow

  var(--accent-2) / 0.35

• --pillar-tempo-shadow

  var(--ring) / 0.35

• --pillar-trading-shadow

  var(--lav-deep) / 0.35

• --pillar-vision-shadow

  var(--success) / 0.35

• --pillar-wave-shadow

  var(--accent-1) / 0.35

• --shadow

  0 12px 34px hsl(258 42% 6% / 0.32)

• --shadow-badge

  inset 0 var(--hairline-w) 0 hsl(var(--foreground) / 0.06), 0 0 0 var(--hairline-w) hsl(var(--card-hairline) / 0.35), 0 var(--spacing-3) var(--spacing-4) hsl(var(--shadow-color) / 0.18)

• --shadow-control

  inset 0 var(--spacing-1) var(--spacing-2) 0 color-mix(in oklab, hsl(var(--shadow-color)) 18%, hsl(var(--background)) 82%), var(--shadow-outline-subtle)

• --shadow-control-hover

  0 var(--spacing-1) var(--spacing-2) hsl(var(--shadow-color) / 0.3)

• --shadow-depth-inner

  inset var(--spacing-1) var(--spacing-1) var(--spacing-3) hsl(var(--panel) / 0.85), inset calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-3) hsl(var(--foreground) / 0.08)

• --shadow-depth-outer

  calc(var(--spacing-3)) calc(var(--spacing-3)) var(--spacing-5) hsl(var(--panel) / 0.72), calc(var(--spacing-3) * -1) calc(var(--spacing-3) * -1) var(--spacing-5) hsl(var(--foreground) / 0.06)

• --shadow-depth-outer-strong

  var(--spacing-4) var(--spacing-4) var(--spacing-6) hsl(var(--panel) / 0.72), calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-6) hsl(var(--foreground) / 0.08)

• --shadow-depth-soft

  calc(var(--spacing-2)) calc(var(--spacing-2)) var(--spacing-4) hsl(var(--panel) / 0.6), calc(var(--spacing-2) * -1) calc(var(--spacing-2) * -1) var(--spacing-4) hsl(var(--foreground) / 0.07)

• --shadow-dropdown

  0 12px 40px hsl(var(--shadow-color) / 0.55)

• --shadow-glow-current

  0 0 var(--spacing-2) currentColor

• --shadow-glow-lg

  0 0 var(--spacing-5) var(--glow-active)

• --shadow-glow-md

  0 0 var(--spacing-4) var(--glow-active)

• --shadow-glow-sm

  0 0 var(--spacing-2) var(--glow-active)

• --shadow-glow-xl

  0 var(--spacing-2) var(--spacing-6) var(--glow-active)

• --shadow-inset-contrast

  inset 0 0 0 var(--hairline-w) var(--ring-contrast)

• --shadow-inset-hairline

  inset 0 0 0 var(--hairline-w) hsl(var(--card-hairline))

• --shadow-nav-active

  0 0 0 var(--hairline-w) hsl(var(--ring) / 0.35), 0 var(--spacing-2) var(--spacing-6) hsl(var(--ring) / 0.2)

• --shadow-neo-sm

  calc(var(--spacing-1)) calc(var(--spacing-1)) calc(var(--spacing-2)) hsl(var(--panel) / 0.72), calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) calc(var(--spacing-2)) hsl(var(--foreground) / 0.06)

• --shadow-neon

  0 0 calc(var(--space-2)) hsl(var(--neon) / 0.55), 0 0 calc(var(--space-4)) hsl(var(--neon-soft) / 0.35), calc(var(--spacing-0-5)) calc(var(--spacing-0-5) * -1) calc(var(--space-3)) hsl(var(--neon) / 0.3), calc(var(--spacing-0-5) * -1.25) calc(var(--spacing-0-5) * 1.25) calc(var(--space-4)) hsl(var(--neon-soft) / 0.24), 0 calc(var(--spacing-1)) calc(var(--space-5)) hsl(var(--neon-soft) / 0.18)

• --shadow-neon-soft

  0 0 var(--spacing-2) var(--neon), 0 0 var(--spacing-4) var(--neon-soft)

• --shadow-neon-strong

  0 0 var(--spacing-3) var(--neon), 0 0 var(--spacing-5) var(--neon-soft)

• --shadow-outline-faint

  0 0 0 var(--hairline-w) hsl(var(--border) / 0.08)

• --shadow-outline-subtle

  0 0 0 var(--hairline-w) hsl(var(--border) / 0.12)

• --shadow-ring

  0 0 var(--spacing-3) hsl(var(--ring))

Durations and easing curves for animated transitions.

• --dur-chill

  220ms

• --dur-quick

  140ms

• --dur-slow

  420ms

• --ease-motion-glitch

  cubic-bezier(0.2, 0.8, 0.2, 1)

• --ease-out

  cubic-bezier(0.16, 1, 0.3, 1)

• --glitch-duration

  450ms

• --glitch-rgb-shift

  drop-shadow(calc(var(--glitch-chromatic-offset-light) * -1) 0 0 hsl(var(--accent-1) / 0.45)) drop-shadow(var(--glitch-chromatic-offset-light) 0 0 hsl(var(--ring) / 0.45))

• --glitch-scanline

  glitch-scanline calc(var(--glitch-duration) * 1.2) steps(2, end) infinite

• --glow-pulse

  glow-pulse var(--dur-slow) var(--ease-out) infinite alternate

• --motion-duration-lg

  var(--dur-slow)

• --motion-duration-md

  var(--dur-chill)

• --motion-duration-sm

  var(--dur-quick)

• --motion-ease-glitch

  var(--ease-motion-glitch)