/* =====================================================================
   Arachnid Studios — colors_and_type.css
   ---------------------------------------------------------------------
   Single source of truth for the look. Pixel-art strategy game.
   Dark-mode-first. Cyan UI chrome. Earthy battlefield palette.
   ===================================================================== */

/* ---------- Webfonts (Google Fonts substitutions; see README) -------- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400..700&family=VT323&family=Silkscreen:wght@400;700&display=swap');

:root {
  /* ====================================================================
     COLORS
     ==================================================================== */

  /* --- Surfaces: the dark void around the battlefield ----------------- */
  --void:           #07101A;   /* page background; almost black */
  --void-2:         #0E1B22;   /* slightly raised panel base */
  --panel:          #000000;   /* command panels — pure black inside */
  --panel-edge:     #1C3038;   /* hairline outer edge */

  /* --- Cyan: the entire UI chrome lives on this hue ------------------- */
  --cyan-100:       #D6FAFA;   /* near-white cyan, rare highlight */
  --cyan-300:       #6FE8E8;   /* hover */
  --cyan-400:       #3FE0E0;   /* PRIMARY UI — borders, headings, keycap text */
  --cyan-500:       #2BC4C4;   /* default */
  --cyan-700:       #156B6B;   /* muted/dim border */
  --cyan-900:       #082A2A;   /* deepest, for inset shadow */

  /* --- Battlefield earth: warm grass, dirt, stone --------------------- */
  --grass:          #A9CB58;   /* tile fill */
  --grass-shadow:   #6B8E32;   /* tile shadow */
  --grass-edge:     #2C5D2C;   /* dark green fringe */
  --dirt:           #9A6A3F;   /* path/dirt patch */
  --dirt-shadow:    #5B3A22;   /* dirt shadow */
  --stone:          #6B6E73;   /* rubble */
  --stone-shadow:   #2D3036;

  /* --- Greenskin character palette (heroes) --------------------------- */
  --orc-skin:       #4FA046;   /* bright orc green */
  --orc-skin-dark:  #2A5E26;
  --troll-skin:     #4F8C8A;   /* desaturated teal */
  --troll-skin-dark:#23494B;
  --wolf-fur:       #6A727B;
  --wolf-fur-dark:  #2E3540;
  --necro-cloak:    #1E1A24;   /* near-black violet */
  --necro-skin:     #6FD391;   /* ghoul green */
  --necro-eyes:     #FF4040;   /* glowing red */

  /* --- Enemy palette (armored knights) -------------------------------- */
  --enemy-armor:    #4A4F58;
  --enemy-armor-dark:#23272D;
  --enemy-crest:    #C7373A;   /* red plume/shield mark */

  /* --- Spell / status hues -------------------------------------------- */
  --spell-raise:    #6CD937;   /* green — Raise Dead */
  --spell-blast:    #A24CE0;   /* purple — Energy Blast */
  --spell-teleport: #5FB7E8;   /* blue — Teleport */
  --hp-good:        #6CD937;
  --hp-warn:        #F6C744;
  --hp-bad:         #E04848;
  --mana:           #5FB7E8;

  /* --- Brand "GREENSKIN" logo palette --------------------------------- */
  --logo-yellow:    #E8B14B;   /* face */
  --logo-yellow-hi: #F4D27A;   /* highlight row */
  --logo-outline:   #3A2418;   /* dark brown stroke + drop band */

  /* --- Text foreground (mapped to cyan/yellow/white) ------------------ */
  --fg1:            #F4F5EE;   /* primary text — slight warm bone */
  --fg2:            #B8C6C8;   /* secondary */
  --fg3:            #6F8285;   /* tertiary / disabled */
  --fg-accent:      var(--cyan-400);
  --fg-stat:        #FFD15E;   /* the yellow stat numerals in the HUD */
  --fg-on-yellow:   var(--logo-outline);

  /* --- Semantic --- */
  --bg:             var(--void);
  --bg-panel:       var(--panel);
  --border:         var(--cyan-400);
  --border-dim:     var(--cyan-700);

  /* ====================================================================
     TYPOGRAPHY
     ==================================================================== */

  --font-display:   'Press Start 2P', 'Pixelify Sans', monospace;
  --font-heading:   'Pixelify Sans', 'Press Start 2P', system-ui, sans-serif;
  --font-ui:        'Silkscreen', 'VT323', ui-monospace, monospace;
  --font-body:      'VT323', 'Silkscreen', ui-monospace, monospace;
  --font-mono:      'VT323', ui-monospace, monospace;

  /* Type scale — kept on a clean 4px rhythm. VT323 reads small, so we
     bias body up; Press Start 2P reads huge, so we bias display down. */
  --t-display:      48px;   /* hero / "GREENSKIN" */
  --t-h1:           40px;
  --t-h2:           28px;
  --t-h3:           22px;
  --t-h4:           18px;
  --t-body:         20px;   /* VT323 default reading size */
  --t-body-sm:      16px;
  --t-ui:           14px;   /* Silkscreen — keycaps, HUD labels */
  --t-ui-sm:        11px;
  --t-caption:      12px;

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-normal:      1.35;

  --tracking-display: 0.02em;   /* Press Start 2P is already wide */
  --tracking-ui:      0.06em;   /* HUD labels = SPACED.OUT */

  /* ====================================================================
     SPACING — 4px grid (pixel-perfect)
     ==================================================================== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;

  /* ====================================================================
     BORDERS / RADII / SHADOWS
     ---------------------------------------------------------------------
     Pixel-art rule: no border-radius. Crisp 1px or 2px borders only.
     Shadows are not blurred — they are stepped pixel offsets.
     ==================================================================== */
  --radius:         0;            /* pixel art = sharp corners, period */
  --border-w:       1px;
  --border-w-thick: 2px;

  /* "Pixel shadow": a hard offset, not a blur. Use 2px or 4px steps. */
  --shadow-pixel:     2px 2px 0 0 #000;
  --shadow-pixel-lg:  4px 4px 0 0 #000;
  --shadow-inset:     inset 0 0 0 1px var(--cyan-900);

  /* Panel chrome (the COMMANDS box in the screenshot): black fill, cyan
     1px border, optional inner 1px cyan-900 highlight. */
  --panel-shadow:   inset 0 0 0 1px var(--cyan-400),
                    inset 0 0 0 2px #000;

  /* ====================================================================
     MOTION
     ---------------------------------------------------------------------
     Pixel games don't ease — they step. Default to steps() and no-blur
     hover. Only use eases for non-game website chrome.
     ==================================================================== */
  --t-fast:    80ms;
  --t-base:    160ms;
  --t-slow:    320ms;
  --ease-step: steps(4, end);
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  /* Crisp pixel rendering for sprites/icons */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--cyan-400);
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--cyan-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--t-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--cyan-400);
  margin: 0;
}
p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  margin: 0;
  text-wrap: pretty;
}
small, .caption {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--fg3);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg-accent);
}

/* Keycap — used everywhere in the in-game HUD (ARROWS, SPACE, A, Q, W...) */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 6px;
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  letter-spacing: var(--tracking-ui);
  color: var(--cyan-400);
  background: transparent;
  border: 1px solid var(--cyan-400);
  text-transform: uppercase;
}

/* Panel — the COMMANDS / COMMAND BAR chrome */
.panel {
  background: var(--panel);
  border: 1px solid var(--cyan-400);
  color: var(--fg1);
  padding: var(--s-4);
}
.panel__title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  color: var(--cyan-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  text-align: center;
  border-bottom: 1px solid var(--cyan-400);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}

/* Link */
a {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px dashed var(--cyan-700);
  transition: color var(--t-fast) var(--ease-step),
              border-color var(--t-fast) var(--ease-step);
}
a:hover { color: var(--cyan-300); border-bottom-color: var(--cyan-300); }
a:active { color: var(--cyan-100); }

/* Selection — cyan halo */
::selection { background: var(--cyan-700); color: var(--cyan-100); }