/* DIGIGMA design system — moodboard tokens.
   Isolated. Live pages keep prototype/shared/tokens.css until a later lot imports this file.
   --washi is a texture URL. Page fill is --paper / --washi-color.
   html.is-play.ds-root beats shared/play.css so play pages inherit this palette. */

.ds-root,
[data-ds-theme="light"],
html.is-play.ds-root,
html.is-play.ds-root[data-ds-theme="light"] {
  color-scheme: light;

  --washi-color: #FCE9B8;
  --paper: #FCE9B8;
  --paper-bright: #FFF9E8;
  --paper-wash: #F9E6B8;
  --paper-shade: #FFF6DF;
  --sumi: #2B2419;
  --ink: #2B2419;
  --ink-strong: #201A12;
  --ink-soft: #FCE9B8;
  --ivory: #FFF9E8;
  --muted: #6A5638;
  --note: #856B42;
  --sand: #DDBB72;

  --gris: #F9E6B8;
  --line: #DDBB72;
  --line-strong: #D28F08;
  --hairline: color-mix(in srgb, var(--ink) 16%, transparent);

  --indigo: #3547B3;
  --indigo-hover: #2A3896;
  --indigo-soft: color-mix(in srgb, #3547B3 16%, var(--paper));
  --indigo-glow: color-mix(in srgb, #3547B3 28%, var(--paper));
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);

  --header-bg: #FFF6E4;
  --header-line: #E4C98A;
  --header-ink: #2B2419;
  --header-theme: #FFF6E4;
  --motif-digits-size: 900px 640px;
  --motif-digits-size-compact: 1100px 780px;

  --game-sudoku: #3547B3;
  --game-killer: #D45E3D;
  --game-binary: #2E8B7A;
  --game-futoshiki: #C88708;
  --game-kakuro: #6B5B95;
  --game-codebreaker: #E07A5F;

  --cta: #946526;
  --cta-hover: #7E541F;
  --cta-ink: #FFF9E8;
  --premium: #62417A;
  --premium-hover: #4E3363;
  --premium-soft: color-mix(in srgb, #62417A 16%, var(--paper));
  --premium-ink: #F4D675;
  --motif-wave: url("/brand/seigaiha.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");
  --motif-digits: url("/brand/digits.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");
  --motif-digits-dark: url("/brand/digits-dark.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");

  --matcha: #7F9252;
  --matcha-soft: color-mix(in srgb, #7F9252 16%, var(--paper));
  --ok: var(--matcha);

  --vermillon: #D45E3D;
  --vermillion: #D45E3D;
  --vermillon-soft: color-mix(in srgb, #D45E3D 14%, var(--paper));
  --bad: var(--vermillon);

  --entry: var(--indigo);
  --same: var(--matcha-soft);
  --sel: var(--indigo);
  --sel-bg: var(--indigo-soft);
  --hi: var(--paper-wash);
  --cell: var(--paper-bright);
  --given: var(--ink-strong);

  --washi: url("/brand/washi.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");
  --ink-stroke: url("/brand/ink-stroke.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");

  --font-display: "Sora", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-digits: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font: var(--font-sans);

  --weight-given: 800;
  --weight-entry: 500;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-board: 2px;

  --shadow-1: 0 1px 1px rgba(45, 36, 27, 0.08);
  --shadow-card: 0 1px 2px rgba(45, 36, 27, 0.08), 0 10px 28px rgba(45, 36, 27, 0.10);
  --shadow-hover: 0 2px 6px rgba(45, 36, 27, 0.10), 0 14px 32px rgba(45, 36, 27, 0.12);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo);

  --motif-opacity: 0.04;
  --motion: 180ms;
  --motion-slow: 280ms;

  /* Mobile-first page measure: ~95% of the viewport, centered. */
  --mobile-content-width: 95%;
  --mobile-gutter: 2.5%;

  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --btn: transparent;
  --btn-hover: var(--paper-wash);
  --gold: var(--indigo);
  --gold-fill: var(--indigo);
  --gold-border: var(--indigo);
  --gold-hover: var(--indigo-hover);

  --board-cell: #FFF6DC;
  --board-cell-hi: color-mix(in srgb, var(--ink) 5%, var(--board-cell));
  --board-cell-same: color-mix(in srgb, #5F8F3E 16%, var(--board-cell));
  --board-cell-same-note: color-mix(in srgb, #5F8F3E 9%, var(--board-cell));
  --board-cell-sel: color-mix(in srgb, var(--play-ring-active) 18%, var(--board-cell));
  --board-cell-hover: var(--paper-wash);
  --board-cell-ok: var(--matcha-soft);
  --board-cell-bad: var(--vermillon-soft);
  --board-line: color-mix(in srgb, var(--ink) 18%, var(--line));
  --board-line-strong: var(--ink);
  --board-frame: var(--ink);
  --board-given: #140F0A;
  --board-given-fill: #D6BE8E;
  --board-entry: #2438C9;
  --board-note: var(--note);
  --board-digit-ok: #3F6A2C;
  --board-digit-bad: var(--vermillon);
  --board-cage: color-mix(in srgb, var(--ink) 36%, var(--line));
  --board-cage-sum: var(--ink-strong);
  --board-cage-a: color-mix(in srgb, var(--indigo) 6%, var(--board-cell));
  --board-cage-b: color-mix(in srgb, var(--vermillon) 5%, var(--board-cell));
  --board-cage-c: color-mix(in srgb, var(--matcha) 6%, var(--board-cell));
  --play-ring-active: #19D65A;
  --play-ring-same: #5F8F3E;
  --play-halo-active: color-mix(in srgb, var(--play-ring-active) 28%, transparent);
  --play-halo-same: color-mix(in srgb, #5F8F3E 20%, transparent);
  --board-bin-0: var(--ink);
  --board-bin-1: var(--indigo);
  --board-bin-warn: var(--vermillon-soft);
  --board-bin-warn-line: var(--vermillon);
  --board-key: var(--paper-bright);
  --board-key-line: var(--line);
  --board-clock: var(--ink);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
}

.ds-root[data-ds-theme="dark"],
[data-ds-theme="dark"],
html.is-play.ds-root[data-ds-theme="dark"] {
  color-scheme: dark;

  --washi-color: #241A14;
  --paper: #241A14;
  --paper-bright: #3A2C22;
  --paper-wash: #30241C;
  --paper-shade: #443328;
  --sumi: #241A14;
  --ink: #F3E9D8;
  --ink-strong: #F7F0E2;
  --ink-soft: #241A14;
  --ivory: #F3E9D8;
  --muted: #CDBDA3;
  --note: #B8A88C;
  --sand: #E0C078;

  --gris: #443328;
  --line: #66513E;
  --line-strong: #E0C078;
  --hairline: color-mix(in srgb, var(--ivory) 16%, transparent);

  --indigo: #8E9BE8;
  --indigo-hover: #A4AEEE;
  --indigo-soft: color-mix(in srgb, #8E9BE8 20%, var(--paper));
  --indigo-glow: color-mix(in srgb, #8E9BE8 30%, var(--paper));
  --accent: var(--indigo);
  --accent-soft: var(--indigo-soft);
  --accent-hover: var(--indigo-hover);

  --header-bg: #2A2218;
  --header-line: #5A4A32;
  --header-ink: #F3E9D8;
  --header-theme: #2A2218;
  --motif-digits-size: 900px 640px;
  --motif-digits-size-compact: 1100px 780px;

  --game-sudoku: #8E9BE8;
  --game-killer: #E07A5A;
  --game-binary: #5BA89A;
  --game-futoshiki: #D28F08;
  --game-kakuro: #A890C8;
  --game-codebreaker: #E07A5F;

  --cta: #946526;
  --cta-hover: #7E541F;
  --cta-ink: #FFF9E8;
  --premium: #9B7BB3;
  --premium-hover: #B396C8;
  --premium-soft: color-mix(in srgb, #9B7BB3 22%, var(--paper));
  --premium-ink: #F4D675;
  --motif-digits: url("/brand/digits-dark.svg?v=851a8c2ad02a7c5abcc0b0619c547ae99aa57c00");

  --matcha: #9AAB6A;
  --matcha-soft: color-mix(in srgb, #9AAB6A 18%, var(--paper));
  --ok: var(--matcha);

  --vermillon: #E07A5A;
  --vermillion: #E07A5A;
  --vermillon-soft: color-mix(in srgb, #E07A5A 16%, var(--paper));
  --bad: var(--vermillon);

  --entry: var(--indigo);
  --same: var(--matcha-soft);
  --sel: var(--indigo);
  --sel-bg: var(--indigo-soft);
  --hi: var(--paper-wash);
  --cell: var(--paper-bright);
  --given: var(--ink-strong);

  --shadow-1: 0 1px 1px rgba(18, 10, 6, 0.36);
  --shadow-card: 0 1px 2px rgba(18, 10, 6, 0.36), 0 12px 28px rgba(18, 10, 6, 0.42);
  --shadow-hover: 0 2px 8px rgba(18, 10, 6, 0.40), 0 16px 36px rgba(18, 10, 6, 0.46);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--indigo);

  --bg: var(--paper);
  --bg-2: var(--paper-bright);
  --btn-hover: var(--paper-bright);
  --gold: var(--indigo);
  --gold-fill: var(--indigo);
  --gold-border: var(--indigo);
  --gold-hover: var(--indigo-hover);

  --board-cell: #443328;
  --board-cell-hi: color-mix(in srgb, var(--ink) 7%, var(--board-cell));
  --board-cell-same: color-mix(in srgb, #9AAB6A 18%, var(--board-cell));
  --board-cell-same-note: color-mix(in srgb, #9AAB6A 11%, var(--board-cell));
  --board-cell-sel: color-mix(in srgb, var(--play-ring-active) 22%, var(--board-cell));
  --board-cell-hover: var(--paper-wash);
  --board-cell-ok: var(--matcha-soft);
  --board-cell-bad: var(--vermillon-soft);
  --board-line: var(--line);
  --board-line-strong: var(--line-strong);
  --board-frame: var(--line-strong);
  --board-given: #F7F0E2;
  --board-given-fill: #5A4634;
  --board-entry: #9AABF5;
  --board-note: var(--note);
  --board-digit-ok: #C5D88A;
  --board-digit-bad: var(--vermillon);
  --board-cage: color-mix(in srgb, var(--ivory) 38%, var(--line));
  --board-cage-sum: var(--ivory);
  --board-cage-a: color-mix(in srgb, var(--indigo) 12%, var(--board-cell));
  --board-cage-b: color-mix(in srgb, var(--vermillon) 10%, var(--board-cell));
  --board-cage-c: color-mix(in srgb, var(--matcha) 11%, var(--board-cell));
  --play-ring-active: #3EEA72;
  --play-ring-same: #9AAB6A;
  --play-halo-active: color-mix(in srgb, var(--play-ring-active) 32%, transparent);
  --play-halo-same: color-mix(in srgb, #9AAB6A 24%, transparent);
  --board-bin-0: var(--ink);
  --board-bin-1: var(--indigo);
  --board-bin-warn: var(--vermillon-soft);
  --board-bin-warn-line: var(--vermillon);
  --board-key: var(--paper-bright);
  --board-key-line: var(--line);
  --board-clock: var(--ink);
  --grid-thin: var(--board-line);
  --grid-strong: var(--board-line-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ds-root,
  [data-ds-theme="light"],
  [data-ds-theme="dark"] {
    --motion: 0ms;
    --motion-slow: 0ms;
  }
}