/* Design-Tokens. Farbwelt: Washi-Papier, Sumi-Tusche, Shu-Zinnoberrot (Torii), Ai-Indigo. */
:root {
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Sans', sans-serif;
  --font-serif: 'Noto Serif JP', 'Noto Serif CJK JP', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --tabbar-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
  --bg: #F6F3EC;
  --surface: #FFFDF8;
  --surface-2: #EFEAE0;
  --glass: rgba(255, 253, 248, .86);
  --ink: #1E1C1A;
  --ink-2: #5E5952;
  --line: rgba(30, 28, 26, .12);
  --accent: #C8432B;
  --accent-soft: rgba(200, 67, 43, .10);
  --on-accent: #FFFFFF;
  --indigo: #2C4A6E;
  --danger: #B3261E;
  --shadow-1: 0 1px 2px rgba(30, 28, 26, .08), 0 4px 14px rgba(30, 28, 26, .08);
  --shadow-2: 0 -2px 10px rgba(30, 28, 26, .06), 0 -14px 40px rgba(30, 28, 26, .10);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #14161A;
  --surface: #1D2025;
  --surface-2: #272B31;
  --glass: rgba(29, 32, 37, .86);
  --ink: #F1ECE3;
  --ink-2: #A9A297;
  --line: rgba(255, 255, 255, .10);
  --accent: #E2614A;
  --accent-soft: rgba(226, 97, 74, .16);
  --on-accent: #1A0D09;
  --indigo: #8FB0D8;
  --danger: #F2827A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 -2px 10px rgba(0, 0, 0, .3), 0 -14px 40px rgba(0, 0, 0, .45);
}