/* ═══════════════════════════════════════════════════════════════════
   SP-50 — SlottingPro design tokens (single source of truth).
   Imported by frontend/app/sm/styles.css AND frontend/login/css/q7auth.css;
   define palette values HERE ONLY.

   Provenance key:
     [sampled]  taken directly from the master logo PNG
                (resources/logo/SlottingPro-dark.png, sampled 2026-07-14)
     [ticket]   exact value specified in SP-50
     [derived]  stepped/blended from a sampled value for UI roles
     [carried]  semantic status hue carried from the seed (not a brand color)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ── brand ─────────────────────────────────────────────────────── */
  --bg-base: #090d14;      /* [sampled] logo background — NOT pure black */
  --bg-surface: #10161f;   /* [derived] elevation step 1 */
  --bg-elevated: #171f2b;  /* [derived] elevation step 2 */
  --bg-raised: #1e2735;    /* [derived] elevation step 3 (inputs/menus) */
  --text-primary: #f8f8f8; /* [sampled] "SLOTTING" white */
  --text-secondary: #8b98a9; /* [ticket] */
  --text-muted: #5f6b7c;   /* [derived] one step down from secondary */
  --brand-green: #9be4a2;  /* [sampled] icon gradient start */
  --brand-blue: #8abdfe;   /* [sampled] icon gradient end / "PRO" */
  --brand-gradient: linear-gradient(135deg, #9be4a2, #8abdfe); /* [ticket] */
  --border: rgba(255, 255, 255, 0.08);        /* [ticket] */
  --border-strong: rgba(255, 255, 255, 0.16); /* [derived] */

  /* ── surfaces (seed role names; elevation = lightness steps) ───── */
  --surface-0: var(--bg-base);
  --surface-1: var(--bg-surface);
  --surface-2: var(--bg-elevated);
  --surface-3: var(--bg-raised);

  /* ── accent (primary action = brand blue; dark text for contrast
        since the brand blue is light) ──────────────────────────────── */
  --accent: var(--brand-blue);
  --accent-hover: #a6cdff;               /* [derived] lighter brand blue */
  --on-accent: #090d14;                  /* [derived] = bg-base on light-blue fills */
  --bg-accent: rgba(138, 189, 254, 0.14);/* [derived] brand blue @14% */
  --text-accent: var(--brand-blue);
  --focus-ring: var(--brand-blue);

  /* ── status ────────────────────────────────────────────────────── */
  --status-normal: var(--brand-green);   /* card status strips */
  --cap-done: #cc7a52;                   /* [derived] warm terracotta — Done bucket
                                            cap (Q7C-542); clearly not-green so Done
                                            scans instantly, and warmer/browner than
                                            the yellow --warning amber */
  --cap-unslotted: #7495bd;              /* [derived] muted steel blue — Unslotted
                                            bucket cap (Q7C-541); desaturated from
                                            --brand-blue so it reads neutral/waiting,
                                            not selected */
  --success: #3d9d68;                    /* [derived] deep brand green for fills —
                                            retoned 2026-07-15 (Q7C-537/541): must be
                                            unmistakably distinct from the mint
                                            --status-normal card caps */
  --text-success: var(--brand-green);
  --bg-success: rgba(155, 228, 162, 0.12); /* [derived] brand green @12% */
  --warning: #d9a23f;                    /* [carried] amber */
  --bg-warning: rgba(217, 162, 63, 0.12);
  --text-warning: #e4b566;               /* [carried] */
  --border-warning: #4d3d1a;             /* [carried] */
  --danger: #cf6a6a;                     /* [carried] muted red */
  --bg-danger: rgba(207, 106, 106, 0.12);
  --text-danger: #de8a8a;                /* [carried] */

  /* ── login-page role names (mirror of the app tokens) ──────────── */
  --bg-primary: var(--bg-base);
  --bg-panel: var(--bg-surface);
  --surface-input: var(--bg-elevated);
  --border-muted: var(--border);

  /* ── misc ──────────────────────────────────────────────────────── */
  --scrim: rgba(0, 0, 0, 0.55);
  --radius-control: 6px;
  --radius-card: 8px;
}