/* ワット桟 — design tokens
 * paper: #d12a7a magenta field (HSL 331 67 49) — unused hue band vs site49–54
 * ink: near-black plum · watt: deep magenta fill · port: chartreuse
 * display: Sora · body: Noto Sans JP
 */

:root {
  --color-paper: #d12a7a;
  --color-paper-2: #b81f68;
  --color-ink: #1c0712;
  --color-ink-soft: #3a1424;
  --color-watt: #5c1038;
  --color-watt-hi: #ffd6ea;
  --color-rail: #f7e4ed;
  --color-rail-ink: #1c0712;
  --color-port: #c8e04a;
  --color-port-ink: #1c2208;
  --color-tick: #5a1038;
  --color-cut: #8e2158;
  --color-focus: #c8e04a;
  --color-error: #3b0a18;
  --color-btn: #1c0712;
  --color-btn-ink: #ffd6ea;
  --color-btn-quiet: #f7e4ed;
  --color-pr: #1c0712;
  --color-pr-ink: #ffd6ea;
  --color-link: #1c0712;
  --color-scrim: #d12a7acc;

  --font-display: "Sora", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-mono: "Sora", ui-monospace, monospace;

  --text-display: clamp(3rem, 12vw, 7.5rem);
  --text-xl: clamp(1.375rem, 2.4vw, 1.75rem);
  --text-lg: 1.125rem;
  --text-body: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.875rem;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;

  --measure: 40rem;
  --rail-h: 3.25rem;
  --tick-gap: 12px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;

  --z-skip: 40;
  --radius: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #2a0c1c;
    --color-paper-2: #3d1228;
    --color-ink: #fbe8f1;
    --color-ink-soft: #f3c5d8;
    --color-watt: #f03a7a;
    --color-watt-hi: #1c0712;
    --color-rail: #3a1528;
    --color-rail-ink: #fbe8f1;
    --color-port: #d4f06a;
    --color-port-ink: #1c2208;
    --color-tick: #5c1838;
    --color-cut: #4a142c;
    --color-focus: #d4f06a;
    --color-error: #ffb3c8;
    --color-btn: #fbe8f1;
    --color-btn-ink: #2a0c1c;
    --color-btn-quiet: #3a1528;
    --color-pr: #14060d;
    --color-pr-ink: #fbe8f1;
    --color-link: #d4f06a;
    --color-scrim: #2a0c1ccc;
  }
}

html[data-theme="light"] {
  --color-paper: #d12a7a;
  --color-paper-2: #b81f68;
  --color-ink: #1c0712;
  --color-ink-soft: #3a1424;
  --color-watt: #5c1038;
  --color-watt-hi: #ffd6ea;
  --color-rail: #f7e4ed;
  --color-rail-ink: #1c0712;
  --color-port: #c8e04a;
  --color-port-ink: #1c2208;
  --color-tick: #5a1038;
  --color-cut: #8e2158;
  --color-focus: #c8e04a;
  --color-error: #3b0a18;
  --color-btn: #1c0712;
  --color-btn-ink: #ffd6ea;
  --color-btn-quiet: #f7e4ed;
  --color-pr: #1c0712;
  --color-pr-ink: #ffd6ea;
  --color-link: #1c0712;
  --color-scrim: #d12a7acc;
}

html[data-theme="dark"] {
  --color-paper: #2a0c1c;
  --color-paper-2: #3d1228;
  --color-ink: #fbe8f1;
  --color-ink-soft: #f3c5d8;
  --color-watt: #f03a7a;
  --color-watt-hi: #1c0712;
  --color-rail: #3a1528;
  --color-rail-ink: #fbe8f1;
  --color-port: #d4f06a;
  --color-port-ink: #1c2208;
  --color-tick: #5c1838;
  --color-cut: #4a142c;
  --color-focus: #d4f06a;
  --color-error: #ffb3c8;
  --color-btn: #fbe8f1;
  --color-btn-ink: #2a0c1c;
  --color-btn-quiet: #3a1528;
  --color-pr: #14060d;
  --color-pr-ink: #fbe8f1;
  --color-link: #d4f06a;
  --color-scrim: #2a0c1ccc;
}