:root {
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --radius-lg: 18px;
  --gap: 16px;
  --pad: 18px;
  --transition-fast: 0.18s;
  --transition-default: 0.24s;
  --accent: #3fbfb2;
  --accent-hover: #5fd1c6;
  --accent-soft: rgba(63, 191, 178, 0.16);
  --accent-muted: rgba(63, 191, 178, 0.35);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.18);
  --panel-heading: rgba(230, 242, 241, 0.85);
  --heading-strong: var(--panel-heading);
  --label-strong: var(--text-soft);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #04070c;
  --bg-subtle: #0b111a;
  --content-bg: #060b12;
  --text: #e6f2f1;
  --text-muted: rgba(230, 242, 241, 0.62);
  --text-soft: rgba(230, 242, 241, 0.48);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.12);
  --panel-bg: linear-gradient(180deg, rgba(21, 30, 42, 0.94), rgba(10, 16, 24, 0.94));
  --panel-border: rgba(255, 255, 255, 0.04);
  --panel-glow: radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 70%);
  --panel-shadow: 0 24px 48px rgba(4, 8, 14, 0.55);
  --topbar-bg: rgba(7, 11, 17, 0.88);
  --topbar-border: rgba(255, 255, 255, 0.04);
  --sidebar-bg: rgba(6, 10, 16, 0.95);
  --sidebar-border: rgba(255, 255, 255, 0.04);
  --sidebar-text: rgba(230, 242, 241, 0.84);
  --sidebar-text-muted: rgba(230, 242, 241, 0.58);
  --sidebar-active-bg: rgba(63, 191, 178, 0.14);
  --sidebar-active-bar: #3fbfb2;
  --input-bg: linear-gradient(180deg, rgba(16,23,33,0.9), rgba(11,16,24,0.9));
  --input-border: rgba(255, 255, 255, 0.06);
  --input-placeholder: rgba(230, 242, 241, 0.45);
  --chip-bg: linear-gradient(180deg, rgba(24, 32, 42, 0.92), rgba(12, 18, 26, 0.92));
  --chip-border: rgba(255, 255, 255, 0.07);
  --chip-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  --bucket-allowed-bg: linear-gradient(180deg, rgba(18, 34, 33, 0.9), rgba(8, 18, 20, 0.92));
  --bucket-allowed-border: rgba(63,191,178,0.18);
  --bucket-allowed-shadow: inset 0 1px rgba(63,191,178,0.16);
  --bucket-not-bg: linear-gradient(180deg, rgba(15,21,30,0.82), rgba(9,13,20,0.88));
  --bucket-not-border: rgba(255, 255, 255, 0.06);
  --drawer-bg: rgba(12, 18, 26, 0.98);
  --drawer-border: rgba(255, 255, 255, 0.05);
  --toast-bg: linear-gradient(180deg, rgba(16,24,33,0.94), rgba(8,12,18,0.94));
  --toast-border: rgba(255, 255, 255, 0.06);
  --danger: #ff8787;
  --danger-soft: rgba(255, 135, 135, 0.2);
  --panel-heading: rgba(230, 242, 241, 0.85);
  --heading-strong: rgba(230, 242, 241, 0.92);
  --label-strong: rgba(230, 242, 241, 0.6);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f9;
  --bg-subtle: #e6ebf1;
  --content-bg: #f7f9fc;
  --text: #102333;
  --text-muted: rgba(16, 35, 51, 0.62);
  --text-soft: rgba(16, 35, 51, 0.48);
  --border-subtle: rgba(16, 35, 51, 0.08);
  --border-strong: rgba(16, 35, 51, 0.18);
  --panel-bg: linear-gradient(180deg, #ffffff, #f3f7fb);
  --panel-border: rgba(16, 35, 51, 0.08);
  --panel-glow: radial-gradient(circle at top, rgba(16,35,51,0.06), transparent 70%);
  --panel-shadow: 0 18px 36px rgba(16, 35, 51, 0.12);
  --topbar-bg: rgba(247, 249, 252, 0.92);
  --topbar-border: rgba(16, 35, 51, 0.08);
  --sidebar-bg: rgba(244, 248, 251, 0.96);
  --sidebar-border: rgba(16, 35, 51, 0.08);
  --sidebar-text: rgba(16, 35, 51, 0.9);
  --sidebar-text-muted: rgba(16, 35, 51, 0.62);
  --sidebar-active-bg: rgba(63, 191, 178, 0.18);
  --sidebar-active-bar: #3fbfb2;
  --input-bg: linear-gradient(180deg, #ffffff, #f4f7f9);
  --input-border: rgba(16, 35, 51, 0.16);
  --input-placeholder: rgba(16, 35, 51, 0.45);
  --chip-bg: linear-gradient(180deg, #f9fcfd, #ecf4f3);
  --chip-border: rgba(16, 35, 51, 0.12);
  --chip-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
  --bucket-allowed-bg: linear-gradient(180deg, #ecfaf7, #def3ef);
  --bucket-allowed-border: rgba(63,191,178,0.32);
  --bucket-allowed-shadow: inset 0 1px rgba(63,191,178,0.2);
  --bucket-not-bg: linear-gradient(180deg, #ffffff, #eef2f8);
  --bucket-not-border: rgba(16, 35, 51, 0.1);
  --drawer-bg: rgba(255, 255, 255, 0.98);
  --drawer-border: rgba(16, 35, 51, 0.08);
  --toast-bg: linear-gradient(180deg, #ffffff, #eef3f8);
  --toast-border: rgba(16, 35, 51, 0.12);
  --danger: #d35454;
  --danger-soft: rgba(211, 84, 84, 0.18);
  --panel-heading: rgba(16, 35, 51, 0.74);
  --heading-strong: rgba(16, 35, 51, 0.88);
  --label-strong: rgba(16, 35, 51, 0.58);
}