:root {
  --c-bg: var(--theme-bg);
  --c-surface: var(--theme-surface);
  --c-surface-2: var(--theme-surface-2);
  --c-text: var(--theme-text);
  --c-muted: var(--theme-muted);
  --c-border: var(--theme-border);

  --c-primary: var(--theme-primary);
  --c-primary-2: var(--theme-primary-2);
  --c-danger: var(--theme-danger);
  --c-warning: var(--theme-warning);
  --c-success: var(--theme-success);
  --c-link: var(--theme-link);

  --c-card: var(--c-surface);
  --c-chip: var(--c-surface-2);

  --c-icon-filter: var(--theme-icon-filter, brightness(0));
}

/* ─── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-surface-2);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-primary);
}

* {
  scrollbar-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)) var(--c-surface-2);
  scrollbar-width: thin;
}

html,
body {
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in srgb, var(--c-primary) 10%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 100%, color-mix(in srgb, var(--c-primary) 6%, transparent) 0%, transparent 50%),
    var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  line-height: var(--line-normal);
}

h1, h2, h3, h4 {
  font-family: var(--font-fantasy);
  letter-spacing: 0.04em;
}

.surface {
  background: var(--c-surface);
  border: var(--border-1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}