@layer reset, app;

/* Wordtrak — Split-Flap Board Aesthetic */
/* Fonts loaded via <link> in application.html.erb */

:root {
  /* Shared tokens */
  --orange: #e8601e;
  --orange-dim: #c05010;
  --orange-glow: rgba(232,96,30,0.28);
  --green: #4a9e68;
  --green-dim: #2e7048;
  --green-glow: rgba(74,158,104,0.28);
  --red: #b84040;
  --red-dim: #903030;

  /* Font references */
  --font-flap: 'Fjalla One', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  /* Layout tokens */
  --cell-size: 54px;
  --cell-gap: 4px;
  --radius: 4px;
  --cell-sub-font: 12px;
  --btn-pad-x: 12px;

  /* Light theme (default) */
  --page-bg: #f5f2ed;
  --page-text: #1a1814;
  --page-sub: #888;
  --screen-bg: #e8e4de;
  --board-bg: #ede9e2;
  --hand-bg: #e0dcd6;
  --cell-bg: #d4cfc8;
  --cell-brd: #b8b3ac;
  --cell-split: rgba(0,0,0,0.1);
  --cell-empty-bg: #cac5be;
  --cell-empty-brd: #b0aba4;
  --flap-text: #1a1814;
  --flap-dim: #888480;
  --flap-val: #888;
  --row-bg: #dedad4;
  --row-brd: #c8c3bc;
  --row-hover: #d4d0ca;
  --row-act-bg: #d0ccc6;
  --row-act-brd: #a8a4a0;
  --hand-bg2: #cac5be;
  --hand-brd: #b0aba4;
  --status-brd: #c8c3bc;
  --label-col: #aaa9a6;
  --mod-l-bg: #dbd8c2;
  --mod-l-brd: #c8c498;
  --mod-l-fill: #d4d0b8;
  --mod-l-fill-brd: #b8b480;
  --mod-l-badge: #7a7020;
  --mod-w-bg: #ddd0c0;
  --mod-w-brd: #c8a880;
  --mod-w-fill: #d4c4b0;
  --mod-w-fill-brd: #b89070;
  --arrow-bg: #ccc8c2;
  --arrow-brd: #b0aba4;
  --arrow-col: #aaa;
  --stop-bg: #d4cfc8;
  --stop-brd: #b8b3ac;
  --stop-won-bg: #d8ece0;
  --stop-won-brd: #70a888;
  --stop-won-text: #2e7048;
  --stop-lost-bg: #f0dcd8;
  --stop-lost-brd: #c08878;
  --stop-lost-text: #903030;
  --stop-tied-bg: #d0cdc8;
  --stop-tied-brd: #b8b5b0;
  --stop-tied-text: #aaa;
  --stop-cur-bg: #d0ccc6;
  --stop-cur-brd: #a8a4a0;
  --btn-bg: #d4cfc8;
  --btn-brd: #b8b3ac;
  --btn-text: #666;
  --reveal-win-bg: #daeee2;
  --reveal-win-brd: #70a888;
  --ann-bg: #e8e4de;
  --ann-brd: #ccc8c2;
  --wait-bg: #dedad4;
  --wait-brd: #c8c3bc;
  --wait-text: #999;
  --wait-dot: #bbb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0e0e0e;
    --page-text: #f0ece4;
    --page-sub: #888;
    --screen-bg: #111;
    --board-bg: #141414;
    --hand-bg: #131315;
    --cell-bg: #232326;
    --cell-brd: #3e3e42;
    --cell-split: rgba(0,0,0,0.6);
    --cell-empty-bg: #1c1c1f;
    --cell-empty-brd: #2c2c30;
    --flap-text: #f0ece4;
    --flap-dim: #68686e;
    --flap-val: #777;
    --row-bg: #181818;
    --row-brd: #2a2a2e;
    --row-hover: #1e1e20;
    --row-act-bg: #1e1e22;
    --row-act-brd: #40404a;
    --hand-bg2: #28282e;
    --hand-brd: #3a3a40;
    --status-brd: #2a2a2e;
    --label-col: #555;
    --mod-l-bg: #1e1e14;
    --mod-l-brd: #3a3a26;
    --mod-l-fill: #2a2816;
    --mod-l-fill-brd: #4a4818;
    --mod-l-badge: #d0b850;
    --mod-w-bg: #1e1410;
    --mod-w-brd: #3a2618;
    --mod-w-fill: #2a1e12;
    --mod-w-fill-brd: #5a3818;
    --arrow-bg: #161618;
    --arrow-brd: #2c2c30;
    --arrow-col: #555;
    --stop-bg: #232326;
    --stop-brd: #3e3e42;
    --stop-won-bg: #162a1e;
    --stop-won-brd: #2e6040;
    --stop-won-text: #5ebe80;
    --stop-lost-bg: #281414;
    --stop-lost-brd: #6a3028;
    --stop-lost-text: #d86858;
    --stop-tied-bg: #222225;
    --stop-tied-brd: #3a3a3e;
    --stop-tied-text: #666;
    --stop-cur-bg: #222228;
    --stop-cur-brd: #4a4a50;
    --ann-bg: #161618;
    --ann-brd: #2a2a2e;
    --btn-bg: #222;
    --btn-brd: #3a3a40;
    --btn-text: #999;
    --reveal-win-bg: #142818;
    --reveal-win-brd: #2e6040;
    --wait-bg: #181818;
    --wait-brd: #2a2a2e;
    --wait-text: #666;
    --wait-dot: #555;
  }
}