/* ProjectPBX by 4voice - design tokens. v1's palette, kept exactly. Dark is the default; light comes from [data-theme="light"]
   (set before first paint by the head script from ?theme= > localStorage['ppbx-theme'] > the OS) and, with no JS at all, from the OS. */
:root {
  --bg: #060a13;
  --bg-2: #0a1020;
  --bg-3: #0f172b;
  --card: rgba(255, 255, 255, .035);
  --card-2: rgba(255, 255, 255, .06);
  --line: rgba(148, 170, 220, .14);
  --line-2: rgba(148, 170, 220, .24);
  --text: #eaf0fb;
  --text-2: #b9c4d9;
  --muted: #8592ad;
  --blue: #4d7cff;
  --blue-2: #2f5fe0;
  --blue-deep: #1b3a8f;
  --blue-text: #8fb0ff;          /* blue as TEXT or icon on the page background (AA) */
  --gold: #ffbb2e;
  --gold-2: #f59e0b;
  --gold-text: #ffbb2e;          /* gold as TEXT on the page background (AA); light theme darkens it */
  --green: #73bf69;
  --red: #f2495c;
  --red-text: #ff7a8a;
  --violet: #a78bfa;
  --btn-1: #3f6cee;              /* primary button gradient, white text >= 4.5:1 */
  --btn-2: #2a55d6;
  --glow-blue: rgba(77, 124, 255, .35);
  --glow-gold: rgba(255, 187, 46, .22);
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--line);
  --shadow-sm: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --nav-bg: rgba(6, 10, 19, .72);
  --grid-line: rgba(148, 170, 220, .055);
  --orb-op: .55;
  --mark-bg: rgba(255, 187, 46, .3);
  --radius: 20px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --header-h: 72px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-2: #eef2fa;
  --bg-3: #e6ecf8;
  --card: rgba(255, 255, 255, .8);
  --card-2: #ffffff;
  --line: rgba(30, 50, 100, .11);
  --line-2: rgba(30, 50, 100, .2);
  --text: #0b1430;
  --text-2: #33405f;
  --muted: #5d6987;
  --blue: #2f5fe0;
  --blue-2: #1f49c2;
  --blue-text: #2f5fe0;
  --gold: #e09a00;
  --gold-2: #c98400;
  --gold-text: #8a5a00;
  --green: #2f9e44;
  --red: #d62f43;
  --red-text: #c4263a;
  --glow-blue: rgba(47, 95, 224, .18);
  --glow-gold: rgba(255, 187, 46, .2);
  --shadow: 0 30px 70px -25px rgba(20, 40, 90, .35), 0 0 0 1px var(--line);
  --shadow-sm: 0 10px 30px -14px rgba(20, 40, 90, .3);
  --nav-bg: rgba(246, 248, 252, .78);
  --grid-line: rgba(30, 50, 100, .05);
  --orb-op: .22;
  --mark-bg: rgba(255, 187, 46, .45);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f8fc;
    --bg-2: #eef2fa;
    --bg-3: #e6ecf8;
    --card: rgba(255, 255, 255, .8);
    --card-2: #ffffff;
    --line: rgba(30, 50, 100, .11);
    --line-2: rgba(30, 50, 100, .2);
    --text: #0b1430;
    --text-2: #33405f;
    --muted: #5d6987;
    --blue: #2f5fe0;
    --blue-2: #1f49c2;
    --blue-text: #2f5fe0;
    --gold: #e09a00;
    --gold-2: #c98400;
    --gold-text: #8a5a00;
    --green: #2f9e44;
    --red: #d62f43;
    --red-text: #c4263a;
    --glow-blue: rgba(47, 95, 224, .18);
    --glow-gold: rgba(255, 187, 46, .2);
    --shadow: 0 30px 70px -25px rgba(20, 40, 90, .35), 0 0 0 1px var(--line);
    --shadow-sm: 0 10px 30px -14px rgba(20, 40, 90, .3);
    --nav-bg: rgba(246, 248, 252, .78);
    --grid-line: rgba(30, 50, 100, .05);
    --orb-op: .22;
    --mark-bg: rgba(255, 187, 46, .45);
    color-scheme: light;
  }
}