:root {
  --radius: 18px;
  --fs: 14px;
  --pad: 11px 15px;
  --row-pad: 12px 14px;
  --gap: 20px;
  --shadow: 0 12px 32px -8px oklch(30% 0.08 251 / .25);
  --sb-bg: oklch(20% 0.03 251); --sb-text: oklch(75% 0.02 251); --sb-active: var(--primary); --sb-active-text: #fff;

  --bg: oklch(97.5% 0.006 251);
  --surface: oklch(100% 0 0);
  --surface2: oklch(98.5% 0.004 251);
  --text: oklch(25% 0.03 251);
  --muted: oklch(55% 0.02 251);
  --border: oklch(91% 0.012 251);
  --primary: oklch(55% 0.21 251);
  --primary-strong: oklch(48% 0.23 251);
  --primary-soft: oklch(55% 0.21 251 / .10);
  --accent: oklch(70% 0.15 360);
  --ok: oklch(62% 0.17 150);
  --warn: oklch(72% 0.15 75);
  --danger: oklch(58% 0.21 25);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: oklch(18% 0.015 251);
  --surface: oklch(23% 0.018 251);
  --surface2: oklch(26% 0.02 251);
  --text: oklch(92% 0.01 251);
  --muted: oklch(68% 0.02 251);
  --border: oklch(32% 0.02 251);
  --primary: oklch(68% 0.18 251);
  --primary-strong: oklch(75% 0.16 251);
  --primary-soft: oklch(68% 0.18 251 / .15);
  --accent: oklch(75% 0.13 360);
  --ok: oklch(70% 0.15 150);
  --warn: oklch(78% 0.13 75);
  --danger: oklch(65% 0.19 25);
  color-scheme: dark;
  }
}