:root {
  --gofun: #FFFFFB;
  --sumi: #231815;
  --nibi: #656765;
  --ginnezumi: #91989F;
  --jc-cyan: #00A0E9;
  --jc-magenta: #E4007F;
  --jc-yellow: #FFF100;
  --srgb-red: #FF0000;
  --srgb-green: #00FF00;
  --srgb-blue: #0000FF;

  --plate-1: var(--ink);
  --plate-2: var(--signal-1);
  --plate-3: var(--signal-2);
  --plate-4: var(--signal-3);
  --misregister: 0.4mm;
  --fringe: calc(var(--misregister) * -1) 0 var(--signal-1), var(--misregister) 0 var(--signal-2);

  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-text: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;

  --step--1: 0.7071rem;
  --step-0: 1rem;
  --step-1: 1.4142rem;
  --step-2: 2rem;
  --step-3: 2.8284rem;
  --step-4: 4rem;
  --step-5: 5.6569rem;
  --step-6: 8rem;
  --step-7: 11.3137rem;
  --step-8: 16rem;

  --space-xs: 0.5rem;
  --space-s: 0.7071rem;
  --space-m: 1rem;
  --space-l: 1.4142rem;
  --space-xl: 2rem;
  --space-2xl: 2.8284rem;
  --space-3xl: 4rem;
  --space-4xl: 5.6569rem;
  --space-5xl: 8rem;

  --ease-jo-ha-kyu: cubic-bezier(.7, 0, .84, 0);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-micro: 180ms;
  --dur-glitch: 180ms;
  --dur-print: 1200ms;
  --dur-switch-out: 140ms;
  --dur-switch-in: 160ms;
}

@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --ease-jo-ha-kyu: linear(0, 0.02 20%, 0.08 40%, 0.2 60%, 0.42 80%, 0.68 90%, 1);
  }
}

:root[data-theme="papel"] {
  color-scheme: light;
  --bg: var(--gofun);
  --ink: var(--sumi);
  --ink-2: var(--nibi);
  --line: var(--ginnezumi);
  --signal-1: var(--jc-cyan);
  --signal-2: var(--jc-magenta);
  --signal-3: var(--jc-yellow);
  --plate-blend: multiply;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-theme="luz"] {
  color-scheme: dark;
  --bg: var(--sumi);
  --ink: var(--gofun);
  --ink-2: var(--ginnezumi);
  --line: var(--nibi);
  --signal-1: var(--srgb-red);
  --signal-2: var(--srgb-green);
  --signal-3: var(--srgb-blue);
  --plate-blend: screen;
  --texture: repeating-linear-gradient(0deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 3px);
}