/* The panel's colours, spacing and type, in one place.
 *
 * Dark only: it is used at a desk and on a phone at night, and the two apps'
 * own screens are dark. Game Hub swaps the accent, so a glance at any screen
 * says which shop is open. */

:root {
  color-scheme: dark;

  --bg:          #0a0f1a;
  --bg-raised:   #0e1422;
  --surface:     #121826;
  --surface-2:   #171f30;
  --surface-3:   #1d2740;
  --input:       #0c111c;

  --text:        #ecf2fb;
  --text-dim:    #a3b1c6;
  --text-faint:  #6b7a90;

  --accent:      #4f9fff;
  --accent-strong: #2563eb;
  --accent-soft: #b4d4ff;
  --accent-wash: rgba(79, 159, 255, 0.12);
  --accent-grad: linear-gradient(135deg, #b4d4ff 0%, #4f9fff 45%, #2563eb 100%);
  --on-accent:   #061226;

  --line:        rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.24);

  --good:        #6ee7a3;
  --good-wash:   rgba(110, 231, 163, 0.12);
  --warn:        #fcd34d;
  --warn-wash:   rgba(252, 211, 77, 0.14);
  --bad:         #ff7a8a;
  --bad-wash:    rgba(255, 122, 138, 0.13);

  --radius-s: 6px;
  --radius:   10px;
  --radius-l: 16px;

  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;

  --tap: 44px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
  --mono: 'Consolas', 'SFMono-Regular', ui-monospace, monospace;

  --topbar-h: 60px;
  --tabbar-h: 62px;
  --sidebar-w: 220px;

  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
}

body[data-product="gamehub"] {
  --accent:      #3ecf8e;
  --accent-strong: #12996a;
  --accent-soft: #b6f0d5;
  --accent-wash: rgba(62, 207, 142, 0.12);
  --accent-grad: linear-gradient(135deg, #b6f0d5 0%, #3ecf8e 45%, #12996a 100%);
  --on-accent:   #03170e;
}