/* トクマス / 日々の紙。Theme values are also documented in design/DESIGN.md. */
:root {
  color-scheme: light;
  --paper: #f4f0e6;
  --surface: #fffcf5;
  --surface-raised: #ffffff;
  --surface-sunken: #eae4d6;
  --ink: #292c28;
  --muted: #62645b;
  --line: #ccc6b8;
  --line-strong: #85877c;
  --vermillion: #aa392b;
  --on-accent: #ffffff;
  --stamp: #aa392b;
  --indigo: #305d72;
  --indigo-soft: #e5eef1;
  --madder: #943d4e;
  --madder-soft: #f7e8e9;
  --leaf: #48613b;
  --leaf-soft: #e8efdf;
  --gold: #775612;
  --gold-soft: #f4e9c9;
  --error: #a32425;
  --error-soft: #fbe5df;
  --selected: #cde1eb;
  --related: #edf2f3;
  --same: #dce8ee;
  --focus: #135879;
  --grid: #666c64;
  --block: #343c36;
  --on-block: #ffffff;
  --ng-fill: #343c36;
  --on-ng-fill: #ffffff;
  --shadow: 0 2px 0 #292c2812, 0 8px 28px #292c2806;
  --shadow-dialog: 0 16px 64px #171b2740;
  --font-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-editorial: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.7rem, 3vw, 2.5rem);
  --text-hero: clamp(2rem, 4vw, 3.25rem);
  --leading: 1.85;
  --board-number: clamp(1.25rem, 4.8vw, 2rem);
  --board-kana: clamp(1.125rem, 4.4vw, 1.8rem);
  --board-note: clamp(.5625rem, 1.7vw, .8125rem);
  --board-max: 32rem;
  --ng-max: 34rem;
  --tap: 2.875rem;
  --content-max: 75rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-sm: .25rem;
  --radius: .625rem;
  --radius-lg: 1rem;
  --duration: 160ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #212622; --surface: #2a302b; --surface-raised: #323a33; --surface-sunken: #1b211d;
    --ink: #f3efdf; --muted: #b8bcad; --line: #4d574d; --line-strong: #899481;
    --vermillion: #f49a85; --on-accent: #28251f; --stamp: #f49a85;
    --indigo: #a3cee1; --indigo-soft: #293f49; --madder: #f0b0bb; --madder-soft: #483238;
    --leaf: #bbd29d; --leaf-soft: #35422d; --gold: #e4c57e; --gold-soft: #443c27;
    --error: #ffb3a6; --error-soft: #51312d; --selected: #355563; --related: #303d3f; --same: #304955;
    --focus: #b3dfef; --grid: #9ca795; --block: #101611; --on-block: #f3efdf;
    --ng-fill: #bbd29d; --on-ng-fill: #212622;
    --shadow: 0 2px 0 #00000030, 0 8px 28px #0000000c; --shadow-dialog: 0 16px 64px #00000080;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #212622; --surface: #2a302b; --surface-raised: #323a33; --surface-sunken: #1b211d;
  --ink: #f3efdf; --muted: #b8bcad; --line: #4d574d; --line-strong: #899481;
  --vermillion: #f49a85; --on-accent: #28251f; --stamp: #f49a85;
  --indigo: #a3cee1; --indigo-soft: #293f49; --madder: #f0b0bb; --madder-soft: #483238;
  --leaf: #bbd29d; --leaf-soft: #35422d; --gold: #e4c57e; --gold-soft: #443c27;
  --error: #ffb3a6; --error-soft: #51312d; --selected: #355563; --related: #303d3f; --same: #304955;
  --focus: #b3dfef; --grid: #9ca795; --block: #101611; --on-block: #f3efdf;
  --ng-fill: #bbd29d; --on-ng-fill: #212622;
  --shadow: 0 2px 0 #00000030, 0 8px 28px #0000000c; --shadow-dialog: 0 16px 64px #00000080;
}
:root[data-size="large"] {
  font-size: 112.5%;
  --tap: 3rem;
  --board-number: clamp(1.4rem, 5.3vw, 2.25rem);
  --board-kana: clamp(1.25rem, 4.8vw, 2rem);
  --board-note: clamp(.625rem, 1.8vw, .875rem);
  --board-max: 35rem;
  --ng-max: 37rem;
  --gutter: clamp(.75rem, 2vw, 2rem);
}