/* Word Krieg: every visual token, the one source of every colour, font and radius in the client and the mockups (design/_shared/tokens.css imports this file). One look, no themes (journal 001, entry 05). Phaser reads them computed, through js/identity/tokens.js (specs/visual_identity.md). */
@import url("fonts.css");

:root {
  /* Type: Inter covers Latin with Spanish and Dutch letters, and Cyrillic; Press Start 2P (Latin, Cyrillic) is the board’s placeholder, until Pixel-art Studio draws the board’s face. */
  --font-ui: "Inter", system-ui, sans-serif;
  --font-board: "Press Start 2P", "Inter", monospace;
  --font-size-xs: 11px;
  --font-size-s: 13px;
  --font-size-m: 15px;
  --font-size-l: 18px;
  --font-size-xl: 26px;
  --font-size-tile: 22px;
  --font-size-tile-value: 10px;
  --font-size-tile-mini: 9px;
  --font-size-curtain-word: 28px;

  /* Surfaces */
  --color-page: #0b0d14;
  --color-bg: #12151f;
  --color-surface: #1a1f2d;
  --color-surface-raised: #242a3c;
  --color-surface-bright: #3a4462;
  --color-line: #2c3347;
  --color-text: #e8ecf5;
  --color-text-muted: #8b93a8;
  --color-text-on-colour: #0b0d14;

  /* The players: Blue is the viewer (or Player 1 on one phone), Green the opponent */
  --color-blue: #3d8bff;
  --color-blue-soft: rgba(61, 139, 255, 0.16);
  --color-green: #3ccf7a;
  --color-green-soft: rgba(60, 207, 122, 0.16);
  --color-green-deep: #10391f;

  /* Board tiles */
  --color-tile-grey: #4a5064;
  --color-tile-grey-text: #e8ecf5;
  --color-tile-blue: #2f74e0;
  --color-tile-green: #24a95c;
  --color-tile-text: #ffffff;
  --color-tile-value: rgba(255, 255, 255, 0.72);
  --color-board-bed: #0e1119;
  --color-tile-grey-reach: #6a738f;
  --color-tile-green-reach: #3cc577;
  /* Blue as the opponent, on one phone with Green to move (journal 007, Q4) */
  --color-tile-blue-reach: #5b9cff;
  --color-traced: #ffd65a;
  --color-traced-text: #0b0d14;
  --color-capital: #ffd65a;
  --color-won-glow: rgba(255, 214, 90, 0.75);
  /* Fog: hidden cells under a pixel dither, the opponent’s hidden home row in deep green, stale cells under a lighter dither (journal 004, Q6) */
  --color-tile-hidden: #1a1f2d;
  --color-tile-hidden-dither: #262d40;
  --color-tile-hidden-green: #10391f;
  --color-tile-hidden-green-dither: #185a32;
  --color-tile-hidden-blue: #0f2350;
  --color-tile-hidden-blue-dither: #1a3b7c;
  --color-tile-stale-dither: rgba(11, 13, 20, 0.42);
  --color-tile-stale-text: rgba(255, 255, 255, 0.82);

  --color-lightning: #b98cff;

  /* States */
  --color-note: #3a2f1a;
  --color-danger: #d94a4a;
  --color-scrim: rgba(5, 7, 12, 0.6);
  --color-clock-low: #ffb648;
  --color-disabled-text: #5b6378;
  --color-badge: #3d8bff;

  /* Sizes: a menu screen's column, the phone's, and wider than a phone a little wider, centred (journal 006) */
  --size-column: 430px;
  --size-column-wide: 480px;
  /* The table (journal 007): the panel under the board keeps three rows of words in view; a landscape region lower than the column needs is a phone held sideways */
  --size-panel-min: 140px;
  --size-table-min-height: 600px;

  /* Radii: tiles are near-square, pixel style; the UI around them is soft */
  --radius-tile: 2px;
  --radius-board: 6px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --radius-sheet: 18px;
  --radius-bubble: 14px;
  --radius-device: 36px;
  --radius-window: 12px;

  /* Shadows and textures */
  --shadow-tile: inset 0 -4px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.16);
  --shadow-tile-traced: inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 0 0 2px #ffd65a, 0 0 14px rgba(255, 214, 90, 0.55);
  --shadow-tile-won: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px #ffd65a, 0 0 20px rgba(255, 214, 90, 0.75);
  --shadow-tile-strike: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px #b98cff, 0 0 18px rgba(185, 140, 255, 0.8);
  --shadow-tile-traced-mini: 0 0 0 1px #ffd65a, 0 0 6px rgba(255, 214, 90, 0.6);
  --shadow-drop: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.55);
  --shadow-device: 0 30px 80px rgba(0, 0, 0, 0.6);
  --mask-fade-top: linear-gradient(to bottom, transparent 0, #000 28px);
  /* The home's title art, a stand-in until Pixel-art Studio draws it: a field of tiles under a night sky */
  --texture-title-art: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 28px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 28px), linear-gradient(180deg, #121521 0%, #1a2340 45%, #173a2a 75%, #10391f 100%);
  --shadow-title-board: 0 18px 40px rgba(0, 0, 0, 0.55);
  /* Fog's dithers: a checker of one art pixel, drawn here at the mockups' tile size */
  --texture-tile-hidden: repeating-conic-gradient(var(--color-tile-hidden-dither) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  --texture-tile-hidden-green: repeating-conic-gradient(var(--color-tile-hidden-green-dither) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  --texture-tile-hidden-blue: repeating-conic-gradient(var(--color-tile-hidden-blue-dither) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  --texture-tile-stale: repeating-conic-gradient(var(--color-tile-stale-dither) 0 25%, transparent 0 50%) 0 0 / 6px 6px;
  --texture-curtain: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px), linear-gradient(180deg, #1d7a45, #10391f);
  /* Fog's curtain in Blue, for Blue's turn on one phone: Green's mirrored (journal 007) */
  --texture-curtain-blue: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px), linear-gradient(180deg, #1f5bb8, #0f2350);
  /* The buttons' frames: none while the buttons are CSS; Pixel-art Studio's nine-slice images through border-image later */
  --frame-button: none;
  --frame-bonus: none;
}