/* ─────────────────────────────────────────────────────────────────────────
 * Chesstro Design System — Colors & Type
 * Pixel-art chess roguelite by RoguePawn Studio
 * ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "BoldPixels";
  src: url("./fonts/BoldPixels.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --brand-red:        #c12d2e;   /* the "tro" in Chesstro                  */
  --brand-red-deep:   #8a2020;   /* pressed / accent shadow                */
  --brand-red-glow:   #ff0404;   /* the splash-screen pulse dot            */
  --brand-white:      #ffffff;   /* the "Chess" in Chesstro                */

  /* ── Surfaces (in-game / dark UI) ──────────────────────────────────── */
  --surface-void:     #02050a;   /* near-black playfield background        */
  --surface-grid-bg:  #0a0d14;   /* subtle grid base                       */
  --grid-line-back:   #28292f;   /* far grid line                          */
  --grid-line-front:  #44464a;   /* near grid line                         */
  --overlay-dim:      rgba(0,0,0,0.55); /* modal dim (promotion etc.)      */

  /* ── Surfaces (parchment / panels) ─────────────────────────────────── */
  --paper:            #efe2c5;   /* primary cream panel                    */
  --paper-deep:       #e3d2ad;   /* shaded / inset paper                   */
  --paper-edge:       #5a2624;   /* wine border on cream panels            */
  --paper-edge-soft:  #6a3a37;   /* lighter wine for separators            */

  /* ── Pieces ────────────────────────────────────────────────────────── */
  --piece-dark:       #211e34;   /* navy body of "dark" / enemy pieces     */
  --piece-dark-edge:  #15131f;   /* outline of dark pieces                 */
  --piece-light:      #f7ebd5;   /* cream body of "light" / player pieces  */
  --piece-light-edge: #2a1a14;   /* outline of light pieces                */
  --tile-light:       #c8c1ba;   /* light board square                     */
  --tile-dark:        #2f334d;   /* dark board square                      */

  /* ── Foreground (ink) ──────────────────────────────────────────────── */
  --ink-on-paper:     #1f120e;   /* primary text on cream                  */
  --ink-on-paper-mid: #4a2625;   /* labels, captions on cream              */
  --ink-on-paper-low: rgba(31,18,14,0.55);
  --ink-on-dark:      #ffffff;   /* primary text on void                   */
  --ink-on-dark-mid:  #b9b0a0;   /* HUD labels on void                     */
  --ink-on-dark-low:  rgba(255,255,255,0.45);
  --ink-hud-red:      #8a4140;   /* the dusty-red HUD labels (Runde, Münzen) */

  /* ── Rarity (joker / upgrade) ──────────────────────────────────────── */
  --rarity-common:    #8a8a8a;   /* "Gewöhnlich" — gray                    */
  --rarity-rare:      #3b76d4;   /* "Selten"     — blue                    */
  --rarity-epic:      #8a3dc6;   /* "Episch"     — purple                  */
  --rarity-legend:    #d4a93d;   /* "Legendär"   — gold                    */

  /* ── Semantic / state ──────────────────────────────────────────────── */
  --color-coin:       #d4a93d;   /* Münzen yellow                          */
  --color-success:    #4f9a4a;   /* purchase / valid move                  */
  --color-danger:     var(--brand-red);
  --color-check:      #ff3a3a;   /* king-in-check ring                     */
  --color-select:     #e8d56a;   /* selected-tile glow                     */
  --color-move-hint:  rgba(232,213,106,0.55); /* legal-move dot            */

  /* ── Type — base ───────────────────────────────────────────────────── */
  --font-display:     "BoldPixels", "Press Start 2P", "VT323", monospace;
  --font-body:        "BoldPixels", "Press Start 2P", "VT323", monospace;
  --font-mono:        "BoldPixels", "VT323", "Courier New", monospace;
  /* The shipping product is single-typeface — BoldPixels is used for
     everything from menu titles to body labels. The fallback stack is
     a rough metric match for prototyping in the browser. */

  /* ── Type — sizes (1080p target) ───────────────────────────────────── */
  --fs-display:    96px;  /* splash / hero "CHESSTRO"                      */
  --fs-h1:         52px;  /* menu screen titles                            */
  --fs-h2:         46px;  /* HUD numerics, section headings                */
  --fs-h3:         36px;  /* button label, primary body                    */
  --fs-body:       26px;  /* upgrade card name / desc                      */
  --fs-caption:    24px;  /* tooltip body                                  */
  --fs-micro:      20px;  /* tag / rarity / fine print                     */

  /* line-heights — pixel font wants tight, exact leading */
  --lh-tight:   1.0;
  --lh-base:    1.15;
  --lh-loose:   1.35;

  /* tracking — pixel fonts get a hair of extra letter-spacing             */
  --tracking-display: 0.04em;
  --tracking-body:    0.02em;
  --tracking-tag:     0.10em;

  /* ── Spacing — 4px pixel grid ──────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  28px;   /* default panel separation                          */
  --space-7:  40px;   /* page padding                                      */
  --space-8:  56px;
  --space-9:  72px;

  /* ── Borders ───────────────────────────────────────────────────────── */
  --border-px:        4px;            /* chunky pixel border               */
  --border-px-thin:   2px;
  --border-paper:     var(--border-px) solid var(--paper-edge);
  --border-void:      var(--border-px) solid var(--ink-on-dark);
  --radius-none:      0;              /* pixel UIs are SQUARE              */
  --radius-px:        0;              /* alias — no rounded corners        */

  /* ── Shadows ───────────────────────────────────────────────────────── */
  /* Pixel UIs reject Gaussian blur. Shadows are hard, offset, single-color. */
  --shadow-pixel-sm:  4px 4px 0 var(--paper-edge);
  --shadow-pixel-md:  6px 6px 0 var(--paper-edge);
  --shadow-pixel-lg:  8px 8px 0 #000;
  --shadow-text:      2px 2px 0 #000;
  --shadow-text-red:  2px 2px 0 var(--brand-red-deep);

  /* ── Imagery ───────────────────────────────────────────────────────── */
  --image-rendering:  pixelated;      /* always pixelated, never smooth    */
}

/* ───────────────────────── Semantic styles ──────────────────────────── */

html, body {
  background: var(--surface-void);
  color: var(--ink-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: var(--image-rendering);
}

img, canvas, svg {
  image-rendering: var(--image-rendering);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  margin: 0;
}

.caption {
  font-size: var(--fs-caption);
  color: var(--ink-on-paper-mid);
}

.micro, .tag {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}
.brand-wordmark .accent { color: var(--brand-red); }

/* ───────────────────────── Re-usable surfaces ───────────────────────── */

.surface-void {
  background:
    linear-gradient(var(--grid-line-back) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--grid-line-back) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--surface-void);
}
.surface-paper {
  background: var(--paper);
  color: var(--ink-on-paper);
  border: var(--border-paper);
}
.surface-paper-inset {
  background: var(--paper-deep);
  color: var(--ink-on-paper);
  border: var(--border-paper);
}