/* =========================================================
   AR Consulting Pros — theme tokens
   Default = LIGHT. Dark via <html data-theme="dark">. "auto" follows the device.
   Brand colors come from the logo (cyan → blue → violet → magenta).
   Edit colors here; everything else reads these variables.
   ========================================================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #dbe1ec;
  --text: #0f1a2e;
  --muted: #44536b;
  --accent: #2347d1;
  --link: #1c3dba;
  --btn-from: #2a52e0;
  --btn-to: #2347d1;
  --btn-text: #ffffff;
  --btn2-bg: #ffffff;
  --btn2-border: #b4c0d6;
  --glow-1: rgba(70,110,240,.12);
  --glow-2: rgba(150,90,230,.09);
  --glow-3: rgba(50,190,240,.09);
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.05);
  --header-bg: rgba(255,255,255,.92);
  --focus: #b45309;
  --ok: #0f7a4d;
  --warn-bg: #fff6dd;
  --warn-border: #c9a23a;
  --soft: rgba(35,71,209,.07);
  --brand-line: linear-gradient(90deg, #35d0f0, #3b7bf0 35%, #8a4be0 70%, #e255d8);
  --brand-text: linear-gradient(95deg, #1f5fe0 0%, #6a3fd8 55%, #c026a8 100%);
  --grid-dot: rgba(35,71,209,.16);
  --card-hover: 0 2px 4px rgba(16,24,40,.06), 0 18px 40px -12px rgba(35,71,209,.22);
  --r: 18px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-2: #0e1626;
  --surface: #121b2e;
  --surface-2: #151f35;
  --border: #26324c;
  --text: #eef2f9;
  --muted: #a9b5cb;
  --accent: #8fb0ff;
  --link: #a9c4ff;
  --btn-from: #3459e6;
  --btn-to: #2f52da;
  --btn-text: #ffffff;
  --btn2-bg: rgba(255,255,255,.05);
  --btn2-border: #3a4a6c;
  --glow-1: rgba(60,110,240,.26);
  --glow-2: rgba(150,80,220,.20);
  --glow-3: rgba(40,190,230,.13);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --header-bg: rgba(11,18,32,.9);
  --focus: #ffd24a;
  --ok: #5fd6a0;
  --warn-bg: rgba(255,200,60,.12);
  --warn-border: #8a6d1c;
  --soft: rgba(143,176,255,.10);
  --brand-text: linear-gradient(95deg, #7fb0ff 0%, #b79bff 55%, #f08ad8 100%);
  --grid-dot: rgba(143,176,255,.18);
  --card-hover: 0 18px 44px -12px rgba(0,0,0,.6);
}

/* "Match my device" */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0b1220; --bg-2: #0e1626; --surface: #121b2e; --surface-2: #151f35; --border: #26324c;
    --text: #eef2f9; --muted: #a9b5cb; --accent: #8fb0ff; --link: #a9c4ff;
    --btn-from: #3459e6; --btn-to: #2f52da; --btn2-bg: rgba(255,255,255,.05); --btn2-border: #3a4a6c;
    --glow-1: rgba(60,110,240,.26); --glow-2: rgba(150,80,220,.20); --glow-3: rgba(40,190,230,.13);
    --shadow: 0 8px 24px rgba(0,0,0,.35); --header-bg: rgba(11,18,32,.9);
    --focus: #ffd24a; --ok: #5fd6a0; --warn-bg: rgba(255,200,60,.12); --warn-border: #8a6d1c; --soft: rgba(143,176,255,.10);
    --brand-text: linear-gradient(95deg, #7fb0ff 0%, #b79bff 55%, #f08ad8 100%); --grid-dot: rgba(143,176,255,.18); --card-hover: 0 18px 44px -12px rgba(0,0,0,.6);
  }
}