/* ====================================================================
   SIGNAL — design tokens
   House of Gains Gym · concept 03 · "performance lab"
   Dark graphite default · lab-white light mode · signal red accents.
   Every color/type/shape decision lives here. Portal + admin reuse these.
   ==================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg: #0c0e11;            /* page graphite */
  --bg-2: #10131a;          /* raised strip / inputs */
  --bg-3: #141822;          /* card */
  --bg-4: #1b2130;          /* hover / emphasized surface */

  /* ink */
  --ink: #eef1f6;
  --ink-2: #a8b1bf;
  --ink-3: #8a94a8;

  /* hairlines */
  --line: #222835;
  --line-2: #333b4c;

  /* brand red */
  --red: #dd0000;                       /* brand red (large fills) */
  --signal: #ff3434;                    /* hot signal red on graphite */
  --signal-ink: #ffffff;                /* text on red fills */
  --signal-text: #ff5555;               /* small red type on dim washes */
  --signal-dim: rgba(255, 52, 52, 0.14);
  --signal-glow: 0 0 18px rgba(255, 52, 52, 0.38);

  /* status */
  --ok: #3ce081;
  --ok-dim: rgba(60, 224, 129, 0.12);
  --warn: #ffb224;
  --warn-dim: rgba(255, 178, 36, 0.12);
  --bad: #ff5050;
  --bad-dim: rgba(255, 80, 80, 0.13);

  /* texture */
  --grid: rgba(168, 177, 191, 0.048);   /* fine grid lines */
  --scan: rgba(0, 0, 0, 0.5);           /* scanline tint */
  --scroll-shade: rgba(0, 0, 0, 0.72);  /* table scroll edge fade */
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --header-bg: rgba(12, 14, 17, 0.88);

  /* photo art direction */
  --photo-filter: saturate(0.92) contrast(1.08) brightness(0.88);
  --photo-fade: rgba(12, 14, 17, 0.62);

  /* type */
  --font-display: "Saira Condensed", "Chakra Petch", sans-serif; /* mega headlines */
  --font-head: "Chakra Petch", sans-serif;                       /* headings, UI, body */
  --font-mono: "IBM Plex Mono", "Courier New", monospace;        /* data numerals */
  --font-nav: "Aldrich", sans-serif;                             /* nav + eyebrows (brand thread) */

  /* shape */
  --radius: 2px;
  --hud-c: var(--line-2);   /* HUD corner-bracket color (overridable) */
  --notch: 9px;             /* button corner cut */
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #f1f3f6;            /* lab white */
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  --bg-4: #e6eaf0;

  --ink: #11141b;           /* graphite ink */
  --ink-2: #444d5c;
  --ink-3: #5f6a7c;

  --line: #d7dce4;
  --line-2: #b6bfcb;

  --red: #dd0000;
  --signal: #dd0000;
  --signal-ink: #ffffff;
  --signal-text: #c01111;
  --signal-dim: rgba(221, 0, 0, 0.08);
  --signal-glow: 0 0 0 rgba(0, 0, 0, 0);

  --ok: #097239;
  --ok-dim: rgba(12, 143, 72, 0.1);
  --warn: #8a5900;
  --warn-dim: rgba(154, 100, 0, 0.1);
  --bad: #c40e0e;
  --bad-dim: rgba(196, 14, 14, 0.08);

  --grid: rgba(17, 20, 27, 0.042);
  --scan: rgba(17, 20, 27, 0.18);
  --scroll-shade: rgba(17, 20, 27, 0.3);
  --shadow: 0 16px 40px rgba(17, 20, 27, 0.12);
  --header-bg: rgba(241, 243, 246, 0.9);

  --photo-filter: saturate(0.96) contrast(1.05);
  --photo-fade: rgba(17, 20, 27, 0.5);

  --hud-c: var(--line-2);
}

/* red selection — house rule */
::selection { background: var(--red); color: #ffffff; }