:root {
  color-scheme: light dark;

  --c-bg: oklch(98.5% 0.004 240);
  --c-surface: #fff;
  --c-text: oklch(25% 0.02 250);
  --c-muted: oklch(45% 0.02 250);
  --c-line: oklch(89% 0.008 250);
  --c-accent: oklch(45% 0.11 235);
  --c-accent-text: #fff;
  --c-soft: oklch(95% 0.025 235);
  --c-ok: oklch(42% 0.11 150);
  --c-warn: oklch(45% 0.12 70);
  --varjo: 0 1px 2px oklch(0% 0 0 / 0.06), 0 12px 32px oklch(0% 0 0 / 0.1);

  --fontti: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fontti-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 10px;
  --gap: clamp(0.75rem, 2vw, 1.25rem);
  --osio-vali: clamp(2.5rem, 2rem + 4vw, 5rem);
  --leveys: 68rem;

  accent-color: var(--c-accent);

  
  --vari-vaalea: var(--c-bg);
  --vari-tausta: var(--c-surface);
  --vari-hero: var(--c-soft);
  --vari-teksti: var(--c-text);
  --vari-teksti-himmea: var(--c-muted);
  --vari-teksti-tummalla: var(--c-accent-text);
  --vari-korostus: var(--c-accent);
  --vari-korostus-2-tumma: var(--c-warn);
  --vari-reuna: var(--c-line);
  --vari-varjo: oklch(0% 0 0 / 0.1);
  --fontti-otsikko: var(--fontti);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: oklch(19% 0.012 250);
    --c-surface: oklch(24% 0.014 250);
    --c-text: oklch(93% 0.008 250);
    --c-muted: oklch(75% 0.015 250);
    --c-line: oklch(36% 0.015 250);
    --c-accent: oklch(78% 0.1 230);
    --c-accent-text: oklch(20% 0.03 250);
    --c-soft: oklch(30% 0.04 240);
    --c-ok: oklch(80% 0.13 150);
    --c-warn: oklch(83% 0.13 80);
    --varjo: 0 1px 2px oklch(0% 0 0 / 0.3), 0 12px 32px oklch(0% 0 0 / 0.35);
  }
}