/* Mosaic Puzzle — design tokens & primitives
 * ---------------------------------------------------------------------------
 * A quiet-luxury "atelier" system: alabaster & espresso grounds, a brass
 * accent used sparingly, heritage jewel tile colors, and a Fraunces / Jost
 * type pairing. The board is treated like a framed artwork. See DESIGN.md.
 *
 * UI tokens adapt to light/dark. The four game colors (--c0..--c3) are FIXED
 * across themes — they encode game state and mirror COLORS in the engine.
 */

:root {
  /* Grounds & ink — warm alabaster with espresso ink */
  --bg: #e9e5db;
  --panel: #f6f3ec;
  --panel-2: #efe9dd;
  --ink: #26221c;
  --muted: #7c7365;
  --line: #d9d2c3;
  --accent: #8a6d42;        /* brass — used sparingly for marks & focus */
  --accent-soft: rgba(138,109,66,.16);

  /* Game colors — heritage jewel tones; identical to engine COLORS */
  --c0: #a8423a; /* madder red    */
  --c1: #2f5f77; /* petrol blue   */
  --c2: #cf9f4c; /* ochre amber   */
  --c3: #4f7a54; /* viridian      */

  --radius: 10px;
  --radius-tile: 0px;       /* mosaic tiles have hard edges */
  --shadow: 0 1px 1px rgba(38,34,28,.04), 0 10px 34px rgba(38,34,28,.07);
  --shadow-lg: 0 30px 80px rgba(38,34,28,.16);

  --font-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, ui-serif, serif;
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140f; --panel: #211d16; --panel-2: #1c1811;
    --ink: #efe8da; --muted: #a99e8b; --line: #322c22;
    --accent: #c3a06a; --accent-soft: rgba(195,160,106,.16);
    --shadow: 0 1px 1px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.4);
    --shadow-lg: 0 40px 90px rgba(0,0,0,.55);
  }
}
:root[data-theme="light"] {
  --bg: #e9e5db; --panel: #f6f3ec; --panel-2: #efe9dd;
  --ink: #26221c; --muted: #7c7365; --line: #d9d2c3;
  --accent: #8a6d42; --accent-soft: rgba(138,109,66,.16);
  --shadow: 0 1px 1px rgba(38,34,28,.04), 0 10px 34px rgba(38,34,28,.07);
  --shadow-lg: 0 30px 80px rgba(38,34,28,.16);
}
:root[data-theme="dark"] {
  --bg: #17140f; --panel: #211d16; --panel-2: #1c1811;
  --ink: #efe8da; --muted: #a99e8b; --line: #322c22;
  --accent: #c3a06a; --accent-soft: rgba(195,160,106,.16);
  --shadow: 0 1px 1px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 40px 90px rgba(0,0,0,.55);
}

/* ----- Base ----- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Type primitives ----- */
.serif { font-family: var(--font-serif); }
.eyebrow { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ----- Surfaces ----- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}

/* ----- Buttons ----- */
.btn {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 8px; padding: 11px 17px; min-height: 46px; cursor: pointer;
  touch-action: manipulation; transition: transform .1s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn.primary:hover { box-shadow: 0 10px 26px rgba(38,34,28,.22); border-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================================
 * Mosaic primitives
 * ========================================================================= */

.tile {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  width: var(--size, 76px); height: var(--size, 76px);
  border-radius: var(--radius-tile); overflow: hidden;
}
.tile > i { display: block; }

/* The board is framed like a piece of art: a matte mount, a hairline frame,
 * thin "grout" between tiles, and a soft cast shadow. */
.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  width: var(--board-size, 300px); aspect-ratio: 1;
  background: var(--line); padding: 2px; border-radius: 2px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,0,0,.04);
}
.board-frame {
  display: inline-block; padding: 14px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.4);
}
.cell { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-radius: 0; overflow: hidden; }
.cell.empty { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(120,110,90,.12) 5px, rgba(120,110,90,.12) 10px); }
.q { transition: opacity .28s ease, filter .28s ease; }

.board.highlighting .q { opacity: .13; filter: saturate(.4); }
.board.highlighting .q.hot { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
@media (prefers-color-scheme: dark) { .board.highlighting .q.hot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } }

@media (prefers-reduced-motion: reduce) { .q, .btn { transition: none; } }