/* Liquid Glass · theme tokens */

@property --bg0 {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}
@property --bg1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #0a0a0c;
}
@property --bg2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #141416;
}
@property --bg-radial-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a1a1d;
}
@property --txt {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f4f5;
}
@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #b8b8c0;
}
@property --muted2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #9c9ca6;
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f4f5;
}
@property --on-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #09090b;
}
@property --chip-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f4f4f5;
}
@property --chip-bg-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #d4d4d8;
}
@property --chip-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #09090b;
}
@property --glass-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.055);
}
@property --glass-brd {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.12);
}
@property --glass-hi {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.22);
}
@property --inset-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.045);
}
@property --inset-brd {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, 0.08);
}

:root,
html[data-theme="monochrome"] {
  color-scheme: dark;
  --theme-color: #000000;
  --bg0: #000000;
  --bg1: #0a0a0c;
  --bg2: #141416;
  --bg-radial-top: #1a1a1d;
  --txt: #f4f4f5;
  --muted: #b8b8c0;
  --muted2: #9c9ca6;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #f4f4f5;
  --accent-rgb: 244, 244, 245;
  --on-accent: #09090b;
  --accent-soft: rgba(244, 244, 245, 0.12);
  --focus-ring: rgba(244, 244, 245, 0.78);
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-brd: rgba(255, 255, 255, 0.12);
  --glass-hi: rgba(255, 255, 255, 0.22);
  --inset-bg: rgba(255, 255, 255, 0.045);
  --inset-brd: rgba(255, 255, 255, 0.08);
  --inset-hi: rgba(255, 255, 255, 0.12);
  --scroll-rgb: 255, 255, 255;
  --fx-dot-rgb: 255, 255, 255;
  --fg-rgb: 255, 255, 255;
  --chip-fg: #09090b;
  --chip-bg: #f4f4f5;
  --chip-bg-2: #d4d4d8;
  --blob-1: #ffffff;
  --blob-2: #cfcfcf;
  --blob-3: #9a9a9a;
  --shadow-rgb: 0, 0, 0;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --blur: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --control-h: 40px;
  --control-h-lg: 44px;
  --touch: 44px;
  --sidebar-w: 220px;
  --content-max: 1180px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --font-xs: 0.75rem;
  --font-sm: 0.8125rem;
  --font-md: 0.875rem;
  --font-lg: 1.125rem;
  --font-xl: clamp(1.35rem, 2vw, 1.75rem);
  --shadow-panel: inset 0 1px 0 var(--glass-hi), 0 16px 40px rgba(0, 0, 0, 0.48);
  --ok: #4ade80;
  --ok-rgb: 74, 222, 128;
  --ok-glow: rgba(74, 222, 128, 0.45);
  --warn: #fbbf24;
  --warn-rgb: 251, 191, 36;
  --err: #f87171;
  --err-rgb: 248, 113, 113;
  --err-glow: rgba(248, 113, 113, 0.45);
}

/* Warm gray light theme — linen, not paper-white. */
html[data-theme="haze"] {
  color-scheme: light;
  --theme-color: #c4bfb6;
  --bg0: #b7b2a9;
  --bg1: #c4bfb6;
  --bg2: #d0cbc3;
  --bg-radial-top: #d8d3cb;
  --txt: #2c2b29;
  --muted: #5a5650;
  --muted2: #6e6a64;
  --line: rgba(48, 44, 40, 0.14);
  --accent: #3d3b38;
  --accent-rgb: 61, 59, 56;
  --on-accent: #ece7de;
  --accent-soft: rgba(61, 59, 56, 0.1);
  --focus-ring: rgba(61, 59, 56, 0.55);
  --glass-bg: rgba(48, 44, 40, 0.068);
  --glass-brd: rgba(48, 44, 40, 0.13);
  --glass-hi: rgba(255, 250, 242, 0.4);
  --inset-bg: rgba(48, 44, 40, 0.05);
  --inset-brd: rgba(48, 44, 40, 0.1);
  --inset-hi: rgba(255, 250, 242, 0.22);
  --scroll-rgb: 48, 44, 40;
  --fx-dot-rgb: 48, 44, 40;
  --fg-rgb: 48, 44, 40;
  --chip-fg: #ece7de;
  --chip-bg: #3d3b38;
  --chip-bg-2: #2e2c2a;
  --blob-1: #8a8478;
  --blob-2: #7a8480;
  --blob-3: #9a8e82;
  --shadow-rgb: 48, 44, 40;
  --shadow-panel: inset 0 1px 0 var(--glass-hi), 0 18px 42px rgba(48, 44, 40, 0.14);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    transition:
      --bg0 0.5s ease,
      --bg1 0.5s ease,
      --bg2 0.5s ease,
      --bg-radial-top 0.5s ease,
      --txt 0.4s ease,
      --muted 0.4s ease,
      --muted2 0.4s ease,
      --accent 0.4s ease,
      --on-accent 0.4s ease,
      --chip-bg 0.4s ease,
      --chip-bg-2 0.4s ease,
      --chip-fg 0.4s ease,
      --glass-bg 0.5s ease,
      --glass-brd 0.45s ease,
      --glass-hi 0.45s ease,
      --inset-bg 0.45s ease,
      --inset-brd 0.45s ease,
      background 0.5s ease,
      color 0.4s ease;
  }
  body,
  .bg,
  .glass,
  .glass-inset,
  .card,
  .sidebar,
  .runbar,
  .theme-swatch,
  .theme-swatch-preview {
    transition:
      background 0.5s ease,
      background-color 0.5s ease,
      border-color 0.45s ease,
      box-shadow 0.45s ease,
      color 0.4s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .bg,
  .glass,
  .glass-inset,
  .card,
  .sidebar,
  .runbar,
  .theme-swatch,
  .theme-swatch-preview {
    transition: none;
  }
}