:root {
  color-scheme: light dark;

  --bg: light-dark(#f6f4ef, #111217);
  --surface: light-dark(#ffffff, #191b22);
  --surface-2: light-dark(#f1eee7, #20232c);
  --surface-3: light-dark(#e9e5dc, #292d38);
  --ink: light-dark(#1b1c21, #edece8);
  --ink-2: light-dark(#474a53, #c0c0c7);
  --ink-3: light-dark(#62656f, #9d9ea8);
  --line: light-dark(#e2ddd3, #2b2e38);
  --line-strong: light-dark(#cbc4b6, #3d4150);
  --accent: light-dark(#2e3d8f, #a7b4ff);
  --accent-hover: light-dark(#24317a, #c2cbff);
  --accent-ink: light-dark(#ffffff, #10131c);
  --accent-soft: light-dark(#e7eaf7, #232a4a);
  --vermilion: light-dark(#b23a1f, #ff9c80);
  --error: light-dark(#b3261e, #ff8a80);
  --error-soft: light-dark(#fbe9e7, #3a1f1d);
  --success: light-dark(#1d6b39, #7ed99a);
  --success-soft: light-dark(#e4f3e8, #17301f);

  --n5: light-dark(#2d6f3b, #85d197);
  --n4: light-dark(#2853ad, #97b6ff);
  --n3: light-dark(#a84c0d, #f5ab6e);
  --n5-bg: light-dark(#dcefdf, #1f3626);
  --n4-bg: light-dark(#dde7f8, #1f2c47);
  --n3-bg: light-dark(#fbe3cf, #432d1b);
  --badge-fg: light-dark(#ffffff, #111217);

  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --text-glyph: clamp(4.5rem, 3.5rem + 5vw, 7.5rem);
  --leading-tight: 1.25;
  --leading: 1.6;
  --leading-jp: 1.9;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --gutter: clamp(1rem, .6rem + 1.6vw, 2rem);
  --content-max: 1160px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px light-dark(rgb(27 28 33 / .06), rgb(0 0 0 / .4));
  --shadow-md: 0 1px 2px light-dark(rgb(27 28 33 / .05), rgb(0 0 0 / .35)), 0 8px 24px -12px light-dark(rgb(27 28 33 / .18), rgb(0 0 0 / .6));
  --shadow-lg: 0 2px 4px light-dark(rgb(27 28 33 / .05), rgb(0 0 0 / .35)), 0 24px 48px -24px light-dark(rgb(27 28 33 / .28), rgb(0 0 0 / .7));

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --header-h: 60px;
  --tabbar-h: 64px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

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

@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #f6f4ef;
    --surface: #ffffff;
    --surface-2: #f1eee7;
    --surface-3: #e9e5dc;
    --ink: #1b1c21;
    --ink-2: #474a53;
    --ink-3: #62656f;
    --line: #e2ddd3;
    --line-strong: #cbc4b6;
    --accent: #2e3d8f;
    --accent-hover: #24317a;
    --accent-ink: #ffffff;
    --accent-soft: #e7eaf7;
    --vermilion: #b23a1f;
    --error: #b3261e;
    --error-soft: #fbe9e7;
    --success: #1d6b39;
    --success-soft: #e4f3e8;
    --n5: #2d6f3b;
    --n4: #2853ad;
    --n3: #a84c0d;
    --n5-bg: #dcefdf;
    --n4-bg: #dde7f8;
    --n3-bg: #fbe3cf;
    --badge-fg: #ffffff;
    --shadow-sm: 0 1px 2px rgb(27 28 33 / .06);
    --shadow-md: 0 1px 2px rgb(27 28 33 / .05), 0 8px 24px -12px rgb(27 28 33 / .18);
    --shadow-lg: 0 2px 4px rgb(27 28 33 / .05), 0 24px 48px -24px rgb(27 28 33 / .28);
  }

  :root[data-theme="dark"] {
    --bg: #111217;
    --surface: #191b22;
    --surface-2: #20232c;
    --surface-3: #292d38;
    --ink: #edece8;
    --ink-2: #c0c0c7;
    --ink-3: #9d9ea8;
    --line: #2b2e38;
    --line-strong: #3d4150;
    --accent: #a7b4ff;
    --accent-hover: #c2cbff;
    --accent-ink: #10131c;
    --accent-soft: #232a4a;
    --vermilion: #ff9c80;
    --error: #ff8a80;
    --error-soft: #3a1f1d;
    --success: #7ed99a;
    --success-soft: #17301f;
    --n5: #85d197;
    --n4: #97b6ff;
    --n3: #f5ab6e;
    --n5-bg: #1f3626;
    --n4-bg: #1f2c47;
    --n3-bg: #432d1b;
    --badge-fg: #111217;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -12px rgb(0 0 0 / .6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .35), 0 24px 48px -24px rgb(0 0 0 / .7);
  }
}

@supports not (color: light-dark(#000, #fff)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #111217;
      --surface: #191b22;
      --surface-2: #20232c;
      --surface-3: #292d38;
      --ink: #edece8;
      --ink-2: #c0c0c7;
      --ink-3: #9d9ea8;
      --line: #2b2e38;
      --line-strong: #3d4150;
      --accent: #a7b4ff;
      --accent-hover: #c2cbff;
      --accent-ink: #10131c;
      --accent-soft: #232a4a;
      --vermilion: #ff9c80;
      --error: #ff8a80;
      --error-soft: #3a1f1d;
      --success: #7ed99a;
      --success-soft: #17301f;
      --n5: #85d197;
      --n4: #97b6ff;
      --n3: #f5ab6e;
      --n5-bg: #1f3626;
      --n4-bg: #1f2c47;
      --n3-bg: #432d1b;
      --badge-fg: #111217;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
      --shadow-md: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -12px rgb(0 0 0 / .6);
      --shadow-lg: 0 2px 4px rgb(0 0 0 / .35), 0 24px 48px -24px rgb(0 0 0 / .7);
    }
  }
}