@layer reset, base, components, utilities;

@layer base {
  :root {
    color-scheme: light dark;

    --color-canvas: light-dark(oklch(98% 0.005 260), oklch(18% 0.01 260));
    --color-surface: light-dark(oklch(100% 0 0), oklch(23% 0.012 260));
    --color-surface-tint: light-dark(oklch(96% 0.008 260), oklch(27% 0.014 260));
    --color-ink: light-dark(oklch(22% 0.02 260), oklch(94% 0.01 260));
    --color-ink-muted: light-dark(oklch(50% 0.02 260), oklch(70% 0.015 260));
    --color-border: light-dark(oklch(90% 0.01 260), oklch(32% 0.015 260));
    --color-brand: light-dark(oklch(50% 0.17 265), oklch(72% 0.14 265));
    --color-brand-fill: oklch(50% 0.17 265);
    --color-negative: light-dark(oklch(52% 0.19 25), oklch(70% 0.16 25));
    --color-negative-fill: oklch(55% 0.2 25);
    --color-negative-tint: light-dark(oklch(95% 0.03 25), oklch(30% 0.06 25));
    --color-positive: light-dark(oklch(50% 0.13 150), oklch(75% 0.13 150));
    --color-positive-tint: light-dark(oklch(95% 0.04 150), oklch(30% 0.05 150));
    --color-on-fill: oklch(100% 0 0);

    --content-max-inline-size: 64rem;
    --gutter: 1rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-card: 0 1px 2px oklch(from var(--color-ink) l c h / 8%);
    --shadow-focus: 0 0 0 3px oklch(from var(--color-brand) l c h / 35%);
  }
}