/* ============================================================
   Dev Center — Design tokens
   Professional studio theme: black/white + blue accent.
   ============================================================ */

:root,
[data-theme="dark"] {
  --bg: #0B0C10;
  --bg2: #101217;
  --bg3: #15171D;
  --surface: rgba(21, 23, 29, 0.72);
  --border: rgba(255, 255, 255, 0.08);
  --border-h: rgba(255, 255, 255, 0.18);

  --blue: #3B5FCC;
  --blue-rgb: 59, 95, 204;
  --cyan: #5C8DFF;
  /* primary brand accent (blue) — kept under --cyan for compatibility */
  --green: #3E63A6;
  --purple: #9B8CE0;
  --purple-rgb: 155, 140, 224;
  --red: #E5646B;
  --red-rgb: 229, 100, 107;
  --yellow: #6E8FC9;
  --gold: #D4A017;
  --gold-rgb: 212, 160, 23;

  --blue-dim: #2E4A99;
  --blue-glow: rgba(59, 95, 204, 0.16);
  --blue-glow2: rgba(59, 95, 204, 0.06);
  --cyan-glow: rgba(92, 141, 255, 0.16);
  --cyan-glow2: rgba(92, 141, 255, 0.06);
  --purple-glow: rgba(155, 140, 224, 0.12);

  --text: #EEEEF0;
  --text-muted: #9A9CA6;
  --text-sub: #6C6F79;

  --card-bg: #15171D;
  --nav-bg: rgba(11, 12, 16, 0.85);
  --input-bg: rgba(255, 255, 255, 0.03);
  --terminal-bg: #101217;
  --badge-bg: rgba(92, 141, 255, 0.1);
  --overlay: rgba(8, 9, 12, 0.9);

  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-blue: 0 12px 40px rgba(59, 95, 204, 0.12);
  --shadow-cyan: 0 12px 40px rgba(92, 141, 255, 0.14);

  --radius: 16px;
  --radius-sm: 10px;
}

[data-theme="light"] {
  --bg: #FFFFFF;
  --bg2: #F4F6FB;
  --bg3: #E9EDF7;
  --surface: rgba(255, 255, 255, 0.85);
  --border: rgba(20, 24, 40, 0.09);
  --border-h: rgba(20, 24, 40, 0.18);

  --blue: #2E4FB8;
  --blue-rgb: 46, 79, 184;
  --cyan: #2F63D6;
  --green: #33538C;
  --purple: #7C6BC4;
  --purple-rgb: 124, 107, 196;
  --red: #C7434B;
  --red-rgb: 199, 67, 75;
  --yellow: #4F6FA8;
  --gold: #A6790F;
  --gold-rgb: 166, 121, 15;

  --blue-dim: #22397E;
  --blue-glow: rgba(46, 79, 184, 0.1);
  --blue-glow2: rgba(46, 79, 184, 0.04);
  --cyan-glow: rgba(47, 99, 214, 0.12);
  --cyan-glow2: rgba(47, 99, 214, 0.05);
  --purple-glow: rgba(124, 107, 196, 0.08);

  --text: #14151A;
  --text-muted: #5B5D66;
  --text-sub: #82858F;

  --card-bg: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --input-bg: rgba(20, 24, 40, 0.025);
  --terminal-bg: #171922;
  --badge-bg: rgba(47, 99, 214, 0.08);
  --overlay: rgba(255, 255, 255, 0.92);

  --shadow: 0 20px 50px rgba(20, 24, 40, 0.08);
  --shadow-blue: 0 10px 30px rgba(46, 79, 184, 0.08);
  --shadow-cyan: 0 10px 30px rgba(47, 99, 214, 0.1);

  --radius: 16px;
  --radius-sm: 10px;
}