/* tokens.css — Sales Engine Theme Tokens
   Canonical Set: A (OG-NEXperts brand)
   Default: follows prefers-color-scheme; user toggle persists via localStorage. */

:root,
:root[data-theme="dark"] {
  /* Surface */
  --bg: #000;
  --card: #0d0d0d;
  --card2: #111;
  --card3: #151515;
  --border: #1a1a1a;
  --border2: #252525;
  --border3: #333;

  /* Text */
  --text: #f0f0f0;
  --muted: #888;
  --dim: #2a2a2a;

  /* Brand */
  --green: #82FFB5;
  --purple: #8E56FF;
  --blue: #204CE5;
  --blue2: #8F9FE3;
  --red: #ff5c5c;
  --warn: #f5a623;

  /* Tints */
  --gd: rgba(130, 255, 181, .08);
  --gd2: rgba(130, 255, 181, .2);
  --pd: rgba(142, 86, 255, .08);
  --pd2: rgba(142, 86, 255, .2);
  --bd: rgba(32, 76, 229, .08);
  --warn-d: rgba(245, 166, 35, .1);

  /* Severity tints reused by admin/auth pages */
  --green-d: rgba(130, 255, 181, .1);
  --red-d: rgba(255, 92, 92, .1);

  /* Radii (canonical Set A scale) */
  --r: 10px;
  --r2: 14px;
  --r3: 16px;

  /* Theme-specific */
  --shadow: 0 6px 22px rgba(0, 0, 0, .35);
  --topbar-bg: rgba(0, 0, 0, .92);
  --tenant-bar-bg: rgba(11, 11, 15, .85);
  --on-brand: #fff;
  --logo-filter: none;
}

:root[data-theme="light"] {
  /* Surface */
  --bg: #ffffff;
  --card: #f7f7f8;
  --card2: #ffffff;
  --card3: #f0f0f3;
  --border: #e5e5ea;
  --border2: #d4d4d8;
  --border3: #a1a1aa;

  /* Text */
  --text: #18181b;
  --muted: #71717a;
  --dim: #e4e4e7;

  /* Brand (darker for AA contrast on white) */
  --green: #10803f;
  --purple: #6d28d9;
  --blue: #1e40af;
  --blue2: #4965b8;
  --red: #c1272d;
  --warn: #b45309;

  /* Tints */
  --gd: rgba(16, 128, 63, .1);
  --gd2: rgba(16, 128, 63, .22);
  --pd: rgba(109, 40, 217, .08);
  --pd2: rgba(109, 40, 217, .2);
  --bd: rgba(30, 64, 175, .08);
  --warn-d: rgba(180, 83, 9, .12);

  --green-d: rgba(16, 128, 63, .1);
  --red-d: rgba(193, 39, 45, .1);

  /* Radii unchanged */
  --r: 10px;
  --r2: 14px;
  --r3: 16px;

  --shadow: 0 6px 22px rgba(0, 0, 0, .08);
  --topbar-bg: rgba(255, 255, 255, .92);
  --tenant-bar-bg: rgba(247, 247, 248, .9);
  --on-brand: #fff;
  --logo-filter: invert(1) hue-rotate(180deg);
}

/* Auto-light when system requests AND no explicit data-theme override */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #ffffff;
    --card: #f7f7f8;
    --card2: #ffffff;
    --card3: #f0f0f3;
    --border: #e5e5ea;
    --border2: #d4d4d8;
    --border3: #a1a1aa;
    --text: #18181b;
    --muted: #71717a;
    --dim: #e4e4e7;
    --green: #10803f;
    --purple: #6d28d9;
    --blue: #1e40af;
    --blue2: #4965b8;
    --red: #c1272d;
    --warn: #b45309;
    --gd: rgba(16, 128, 63, .1);
    --gd2: rgba(16, 128, 63, .22);
    --pd: rgba(109, 40, 217, .08);
    --pd2: rgba(109, 40, 217, .2);
    --bd: rgba(30, 64, 175, .08);
    --warn-d: rgba(180, 83, 9, .12);
    --green-d: rgba(16, 128, 63, .1);
    --red-d: rgba(193, 39, 45, .1);
    --shadow: 0 6px 22px rgba(0, 0, 0, .08);
    --topbar-bg: rgba(255, 255, 255, .92);
    --tenant-bar-bg: rgba(247, 247, 248, .9);
    --on-brand: #fff;
    --logo-filter: invert(1) hue-rotate(180deg);
  }
}

/* Theme toggle button (shared) */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 6px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: background .12s, border-color .12s;
}
.theme-toggle:hover { background: var(--card2); border-color: var(--border3); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Language toggle button — mirrors theme-toggle styling */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 0 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 36px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background .12s, border-color .12s;
}
.lang-toggle:hover { background: var(--card2); border-color: var(--border3); }
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme]) .theme-toggle .icon-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: inline; }
}