:root {
  --bg: oklch(0.965 0.012 78);
  --bg-soft: oklch(0.948 0.014 78);
  --surface: oklch(0.985 0.008 82);
  --surface-2: oklch(0.958 0.012 82);
  --border: oklch(0.865 0.018 77);
  --border-strong: oklch(0.79 0.022 77);

  --text: oklch(0.27 0.03 257);
  --text-soft: oklch(0.4 0.03 257);
  --muted: oklch(0.54 0.026 257);

  --accent: oklch(0.67 0.18 50);
  --accent-strong: oklch(0.61 0.19 44);
  --accent-dim: color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-ring: color-mix(in oklch, var(--accent) 28%, transparent);

  --ok: #0f766e;
  --warn: #b45309;

  --display: 'Manrope', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 8px;
  --pill: 999px;

  --shadow-sm: 0 1px 4px color-mix(in srgb, #0f172a 8%, transparent);
  --shadow-md: 0 10px 28px color-mix(in srgb, #0f172a 10%, transparent);
  --overlay-card-width: 336px;
}

html[data-theme='dark'] {
  --bg: oklch(0.2 0.02 255);
  --bg-soft: oklch(0.235 0.02 255);
  --surface: oklch(0.265 0.02 255);
  --surface-2: oklch(0.3 0.02 255);
  --border: oklch(0.38 0.02 255);
  --border-strong: oklch(0.48 0.03 255);

  --text: oklch(0.93 0.016 255);
  --text-soft: oklch(0.84 0.018 255);
  --muted: oklch(0.74 0.02 255);

  --accent: oklch(0.73 0.17 53);
  --accent-strong: oklch(0.76 0.15 58);
  --accent-dim: color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-ring: color-mix(in oklch, var(--accent) 34%, transparent);

  --ok: #10b981;
  --warn: #f59e0b;

  --shadow-sm: 0 1px 8px color-mix(in srgb, #000 44%, transparent);
  --shadow-md: 0 14px 32px color-mix(in srgb, #000 48%, transparent);
}