:root {
  --bg: #0a0a12; --s2: #111120; --s3: #16162a;
  --b1: #1e1e35; --b2: #252540; --b3: #303055;
  /* Cards are cream on a dark page. Dark text on a light block is the most
     readable pairing there is, and it makes a block unmistakably a block. */
  --card: #f8f4ea; --card-b: #e4dcc8;
  /* For the few panels that must stay dark, such as the report mock up. */
  --panel: #15152c; --panel-b: #30305a;
  --text: #e8e8f0; --muted: #b0b0c8;
  --gold: #c9a84c; --gold-bg: rgba(201,168,76,0.08); --gold-border: rgba(201,168,76,0.25);
  --green: #4caf78; --green-bg: rgba(76,175,120,0.08); --green-border: rgba(76,175,120,0.25);
  --red: #e05c5c; --red-bg: rgba(224,92,92,0.08); --red-border: rgba(224,92,92,0.25);
  --blue: #5c9ae0; --blue-bg: rgba(92,154,224,0.08); --blue-border: rgba(92,154,224,0.25);
  --teal: #4cb8b8; --teal-bg: rgba(76,184,184,0.08); --teal-border: rgba(76,184,184,0.25);
  --angA: #4cb87a; --angA-bg: rgba(76,184,122,0.10); --angA-border: rgba(76,184,122,0.30);
  --angB: #c96b9a; --angB-bg: rgba(201,107,154,0.10); --angB-border: rgba(201,107,154,0.30);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; font-size:20px; }