@layer reset, tokens, base, components, pages;

@layer tokens {
  :root {
    --color-bg: oklch(98% 0.005 80);
    --color-bg-elevated: oklch(100% 0 0);
    --color-fg: oklch(20% 0.01 80);
    --color-fg-muted: oklch(45% 0.015 80);
    --color-fg-subtle: oklch(48% 0.015 80);
    --color-border: oklch(88% 0.005 80);
    --color-border-subtle: oklch(93% 0.005 80);
    --color-accent: oklch(58% 0.19 215);
    --color-accent-hover: oklch(50% 0.21 215);

    --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.25rem;
    --text-display: 4rem;

    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    --content-width: 640px;
    --gutter: clamp(1rem, 4vw, 4rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 120ms;
    --duration-base: 220ms;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: oklch(15% 0.005 80);
      --color-bg-elevated: oklch(19% 0.005 80);
      --color-fg: oklch(92% 0.01 80);
      --color-fg-muted: oklch(70% 0.015 80);
      --color-fg-subtle: oklch(68% 0.015 80);
      --color-border: oklch(28% 0.005 80);
      --color-border-subtle: oklch(22% 0.005 80);
      --color-accent: oklch(74% 0.18 215);
      --color-accent-hover: oklch(82% 0.18 215);
    }
  }

  :root[data-theme="dark"] {
    --color-bg: oklch(15% 0.005 80);
    --color-bg-elevated: oklch(19% 0.005 80);
    --color-fg: oklch(92% 0.01 80);
    --color-fg-muted: oklch(70% 0.015 80);
    --color-fg-subtle: oklch(68% 0.015 80);
    --color-border: oklch(28% 0.005 80);
    --color-border-subtle: oklch(22% 0.005 80);
    --color-accent: oklch(74% 0.18 215);
    --color-accent-hover: oklch(82% 0.18 215);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-base: 0ms;
    }
  }
}