:root {
  color-scheme: dark;

  --ink-0: #0c0b0a;
  --ink-1: #151311;
  --ink-2: #211d19;
  --ink-3: #2a2521;
  --line: #332c26;
  --line-soft: #241f1b;

  --fg: #f4eee7;
  --fg-dim: #a89c90;
  --fg-faint: #989084;

  --accent: #e4794a;
  --accent-soft: rgba(228, 121, 74, 0.14);
  --accent-ink: #1a0e07;

  --ok: #7fa98b;
  --warn: #d9a441;
  --danger: #d9614f;
  --danger-soft: rgba(217, 97, 79, 0.14);
  --on-danger: #fff5f2;

  --font-body: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-21: 21px;
  --fs-26: 26px;

  --sp-1: 4px;
  --sp-2: 9px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 28px;
  --sp-6: 40px;

  --pad-x: clamp(28px, 6vw, 40px);
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 16px;

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --tap: 44px;
  --header-h: 52px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ink-0: #f7f4f0;
    --ink-1: #fffdfb;
    --ink-2: #f1ece6;
    --ink-3: #e7e0d8;
    --line: #ddd4ca;
    --line-soft: #e8e0d8;
    --fg: #1d1a17;
    --fg-dim: #6b6157;
    --fg-faint: #6f675c;
    --accent: #b9501f;
    --accent-soft: rgba(185, 80, 31, 0.1);
    --accent-ink: #fff8f3;
    --ok: #3f7a58;
    --warn: #9a6c12;
    --danger: #b23a28;
    --danger-soft: rgba(178, 58, 40, 0.1);
    --on-danger: #fff5f2;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}