/*
 * ═══════════════════════════════════════════════════════════════════════════
 * Omni Design Tokens — Midnight Violet (refined)
 * ═══════════════════════════════════════════════════════════════════════════
 * Single source of truth for the Omni operational ecosystem.
 * Refreshed during UI Remodel Step 1 — deeper backgrounds, richer accent,
 * new tokens for glow, gradient, glass, and motion.
 *
 * Every existing token name preserved for backwards compatibility.
 * Theme variants (navy, forest) refreshed to match.
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
  /* ─── BACKGROUNDS — layered for depth ─────────────────────────── */
  --bg:          #130F22;       /* page base (deep midnight) */
  --bg-0:        #0E0B1C;       /* deepest, for radial gradient sink */
  --bg-deep:     #0E0B1C;       /* alias for --bg-0 */
  --surface-0:   #1A1532;       /* most subtle elevated surface */
  --surface-1:   #211940;       /* common card / panel bg */
  --surface-2:   #271E4D;       /* hover / nested card */
  --surface-3:   #322760;       /* active / strong elevation */
  --surface-4:   #3E3375;       /* topmost elevation */

  /* ─── BORDERS — accent-tinted for subtle warmth ──────────────── */
  --border:        rgba(167, 139, 250, 0.08);
  --border-em:     rgba(167, 139, 250, 0.16);
  --border-strong: rgba(167, 139, 250, 0.28);
  --border-line:   rgba(167, 139, 250, 0.12);    /* added: was missing */
  --border-focus:  rgba(167, 139, 250, 0.55);

  /* ─── OMNI BRAND ACCENT — Midnight Violet (refined) ─────────── */
  --accent:        #A78BFA;      /* refined: brighter, more present */
  --accent-50:     #F5F0FF;
  --accent-100:    #EDE1FF;
  --accent-200:    #D3BCFF;
  --accent-300:    #C4A8FF;
  --accent-400:    #B794FF;
  --accent-500:    #A78BFA;
  --accent-600:    #8B5CF6;
  --accent-700:    #7341E0;
  --accent-soft:   rgba(167, 139, 250, 0.10);
  --accent-line:   rgba(167, 139, 250, 0.32);
  --accent-hover:  #B794FF;

  /* ─── INTERACTION ACCENT (pink) — hover, focus, selected ────── */
  --interact:         #EC4899;
  --interact-soft:    rgba(236, 72, 153, 0.10);
  --interact-hover:   rgba(236, 72, 153, 0.18);
  --interact-medium:  rgba(236, 72, 153, 0.28);
  --interact-strong:  rgba(236, 72, 153, 0.40);
  --row-hover:        rgba(0, 0, 0, 0.22);   /* table row hover: transparent dark */
  --interact-line:    rgba(236, 72, 153, 0.32);
  --interact-border:  rgba(236, 72, 153, 0.55);
  --interact-ring:    0 0 0 3px rgba(236, 72, 153, 0.22);
  --interact-glow:    0 0 16px rgba(236, 72, 153, 0.55);
  --interact-glow-sm: 0 0 8px rgba(236, 72, 153, 0.4);
  --interact-gradient: linear-gradient(180deg, #F472B6, #EC4899);


  /* Omni-prefixed aliases (added: were missing) */
  --omni-300:      var(--accent-300);
  --omni-400:      var(--accent-400);
  --omni-500:      var(--accent-500);

  /* ─── GLOW TOKENS (NEW) — box-shadow values for halos ────────── */
  --accent-glow:        0 0 32px -2px rgba(167, 139, 250, 0.55);
  --accent-glow-sm:     0 0 16px -1px rgba(167, 139, 250, 0.42);
  --accent-glow-lg:     0 0 56px -4px rgba(167, 139, 250, 0.65);
  --accent-glow-text:   0 0 18px rgba(167, 139, 250, 0.45);
  --accent-ring:        0 0 0 3px rgba(167, 139, 250, 0.22);
  --accent-ring-strong: 0 0 0 3px rgba(167, 139, 250, 0.45);

  /* ─── GRADIENT TOKENS (NEW) ──────────────────────────────────── */
  --accent-gradient:      linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(167, 139, 250, 0.18) 0%, rgba(139, 92, 246, 0.10) 100%);
  --bg-gradient-page:     radial-gradient(ellipse 75% 65% at 20% -5%, rgba(167, 139, 250, 0.32) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 95% 45%, rgba(236, 72, 153, 0.16) 0%, transparent 65%);
  /* Main content gradient — single source of truth.
     Applied globally to .main via effects.css. */
  --bg-gradient-main:    radial-gradient(circle at 25% 15%, rgba(167, 139, 250, 0.252) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(236, 72, 153, 0.158) 0%, transparent 55%), radial-gradient(ellipse 100% 90% at 50% 50%, rgba(167, 139, 250, 0.058) 0%, transparent 80%), var(--bg-0);
  /* Chrome gradient (sidebar + topbar) — same pattern as main, darker base */
  --bg-gradient-chrome:  radial-gradient(circle at 25% 15%, rgba(167, 139, 250, 0.23) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(236, 72, 153, 0.17) 0%, transparent 55%), #12101C;
  --bg-gradient-elevated: linear-gradient(135deg, #271E4D 0%, #211940 100%);
  --bg-gradient-card:     linear-gradient(180deg, rgba(167, 139, 250, 0.05) 0%, transparent 100%);
  --bg-gradient-drawer:   linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, transparent 50%);

  /* ─── GLASS / BLUR TOKENS (NEW) ──────────────────────────────── */
  --bg-glass:        rgba(33, 25, 64, 0.72);
  --bg-glass-strong: rgba(33, 25, 64, 0.88);
  --bg-glass-deep:   rgba(14, 11, 28, 0.85);
  --blur-light:      8px;
  --blur-medium:     16px;
  --blur-heavy:      24px;

  /* ─── MOTION TOKENS (NEW) ────────────────────────────────────── */
  --transition-fast:      120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-cinematic: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── PEER MODULES (ecosystem chrome only) ───────────────────── */
  --optix:  #2563EB;
  --optima: #06B6D4;
  --onsite: #22C55E;

  /* ─── TEXT HIERARCHY (warmer, violet-tinted whites) ──────────── */
  --text:   #F5F3FF;
  --text-1: #F5F3FF;        /* alias for --text (was missing) */
  --text-2: #C4BBE0;
  --text-3: #8E84B8;
  --text-4: #635A85;
  --text-5: #3D365C;

  /* ─── SEMANTIC STATE TOKENS ──────────────────────────────────── */
  --state-default:      #6B7280;
  --state-default-soft: rgba(107, 114, 128, 0.10);
  --state-active:       var(--accent);
  --state-active-soft:  var(--accent-soft);
  --state-warn:         #FBBF24;
  --state-warn-soft:    rgba(251, 191, 36, 0.12);
  --state-danger:       #F87171;
  --state-danger-soft:  rgba(248, 113, 113, 0.12);
  --state-success:      #34D399;
  --state-success-soft: rgba(52, 211, 153, 0.12);
  --state-info:         #38BDF8;
  --state-info-soft:    rgba(56, 189, 248, 0.10);

  /* ─── LEGACY ALIASES (backwards compat) ──────────────────────── */
  --ok:           var(--state-success);
  --ok-soft:      var(--state-success-soft);
  --warn:         var(--state-warn);
  --warn-soft:    var(--state-warn-soft);
  --gold:         #E0A82E;
  --gold-soft:    rgba(224, 168, 46, 0.14);
  --alert:        var(--state-danger);
  --alert-soft:   var(--state-danger-soft);
  --info:         var(--state-info);
  --info-soft:    var(--state-info-soft);
  --neutral:      var(--state-default);
  --neutral-soft: var(--state-default-soft);

  /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
  --sans: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --row-h:         44px;
  --row-h-compact: 36px;
  --topbar-h:      56px;        /* added: was missing */
}

/* ─── THEME VARIANT: Navy ───────────────────────────────────────── */
:root[data-theme="navy"] {
  --accent:        #4F7CFF;
  --accent-300:    #7595FF;
  --accent-400:    #6589FF;
  --accent-500:    #4F7CFF;
  --omni-300:      var(--accent-300);
  --omni-400:      var(--accent-400);
  --omni-500:      var(--accent-500);
  --accent-soft:   rgba(79, 124, 255, 0.10);
  --accent-line:   rgba(79, 124, 255, 0.32);
  --accent-hover:  #6B91FF;
  --border-focus:  rgba(79, 124, 255, 0.55);
  --border:        rgba(79, 124, 255, 0.08);
  --border-em:     rgba(79, 124, 255, 0.16);
  --border-strong: rgba(79, 124, 255, 0.28);
  --accent-glow:      0 0 32px -2px rgba(79, 124, 255, 0.55);
  --accent-glow-sm:   0 0 16px -1px rgba(79, 124, 255, 0.42);
  --accent-glow-lg:   0 0 56px -4px rgba(79, 124, 255, 0.65);
  --accent-glow-text: 0 0 18px rgba(79, 124, 255, 0.45);
  --accent-ring:      0 0 0 3px rgba(79, 124, 255, 0.22);
  --accent-gradient:      linear-gradient(135deg, #4F7CFF 0%, #2563EB 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(79, 124, 255, 0.18) 0%, rgba(37, 99, 235, 0.10) 100%);
  --bg-gradient-page:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79, 124, 255, 0.10) 0%, transparent 60%);
}

/* ─── THEME VARIANT: Forest ─────────────────────────────────────── */
:root[data-theme="forest"] {
  --accent:        #4A9D6B;
  --accent-300:    #6FBD8A;
  --accent-400:    #5DAE7C;
  --accent-500:    #4A9D6B;
  --omni-300:      var(--accent-300);
  --omni-400:      var(--accent-400);
  --omni-500:      var(--accent-500);
  --accent-soft:   rgba(74, 157, 107, 0.10);
  --accent-line:   rgba(74, 157, 107, 0.32);
  --accent-hover:  #5BB07E;
  --border-focus:  rgba(74, 157, 107, 0.55);
  --border:        rgba(74, 157, 107, 0.08);
  --border-em:     rgba(74, 157, 107, 0.16);
  --border-strong: rgba(74, 157, 107, 0.28);
  --accent-glow:      0 0 32px -2px rgba(74, 157, 107, 0.55);
  --accent-glow-sm:   0 0 16px -1px rgba(74, 157, 107, 0.42);
  --accent-glow-lg:   0 0 56px -4px rgba(74, 157, 107, 0.65);
  --accent-glow-text: 0 0 18px rgba(74, 157, 107, 0.45);
  --accent-ring:      0 0 0 3px rgba(74, 157, 107, 0.22);
  --accent-gradient:      linear-gradient(135deg, #4A9D6B 0%, #2D7349 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(74, 157, 107, 0.18) 0%, rgba(45, 115, 73, 0.10) 100%);
  --bg-gradient-page:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(74, 157, 107, 0.10) 0%, transparent 60%);
}

  /* ─── THEME VARIANT: Optima (Midnight Cyan) ─────────────────────── */
  :root[data-theme="optima"] {
    --accent:        #22D3EE;
    --accent-300:    #67E8F9;
    --accent-400:    #2DDCEF;
    --accent-500:    #22D3EE;
    --omni-300:      var(--accent-300);
    --omni-400:      var(--accent-400);
    --omni-500:      var(--accent-500);
    --accent-soft:   rgba(34, 211, 238, 0.10);
    --accent-line:   rgba(34, 211, 238, 0.32);
    --accent-hover:  #38E0F2;
    --border-focus:  rgba(34, 211, 238, 0.55);
    --border:        rgba(34, 211, 238, 0.08);
    --border-em:     rgba(34, 211, 238, 0.16);
    --border-strong: rgba(34, 211, 238, 0.28);
    --accent-glow:      0 0 32px -2px rgba(34, 211, 238, 0.55);
    --accent-glow-sm:   0 0 16px -1px rgba(34, 211, 238, 0.42);
    --accent-glow-lg:   0 0 56px -4px rgba(34, 211, 238, 0.65);
    --accent-glow-text: 0 0 18px rgba(34, 211, 238, 0.45);
    --accent-ring:      0 0 0 3px rgba(34, 211, 238, 0.22);
    --accent-gradient:      linear-gradient(135deg, #22D3EE 0%, #0891B2 100%);
    --accent-gradient-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(8, 145, 178, 0.10) 100%);
    --bg-gradient-page:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34, 211, 238, 0.10) 0%, transparent 60%);
  }

/* ─── auth-flow channel tokens (host-themed auth pages) ──────────────── */
:root { --accent-rgb: 167, 139, 250; --auth-btn-gradient: linear-gradient(135deg, #A78BFA, rgba(236, 72, 153, .85)); }
:root[data-theme="optima"] { --accent-rgb: 34, 211, 238; --auth-btn-gradient: linear-gradient(135deg, #22D3EE, #0891B2); }

/* ─── optima neutral base (cyan-dark) ─ makes 2FA/forgot/reset/confirm fully cyan ───
   --bg / --surface-2 are PINNED to optima-map.css values so the cockpit is unchanged. */
:root[data-theme="optima"] {
  --bg:        #04101A;   /* pinned: optima-map.css cockpit base */
  --bg-0:      #04101A;
  --bg-deep:   #04101A;
  --surface-0: #0A2029;
  --surface-1: #0C2430;
  --surface-2: #0F2532;   /* pinned: optima-map.css value */
  --surface-3: #143A4A;
  --surface-4: #1A4658;
  --text:      #EAF7FB;
  --text-1:    #EAF7FB;
  --text-2:    #BCD6E1;
  --text-3:    #86A3B2;
  --text-4:    #5A7686;
  --text-5:    #3A505C;
}


/* ─── onsite gold theme (onsite-theme-tokens-v1) — mirrors the optima block;
   recolors the SHARED auth pages (2FA/forgot/reset/confirm) to gold on the
   onsite host. Accent = gold; neutral base = warm coffee↔blue (onsite shell). */
:root[data-theme="onsite"] {
  --accent:        #FBBF24;
  --accent-hover:  #F59E0B;
  --accent-300:    #FCD34D;
  --accent-line:   rgba(251,191,36,.32);
  --accent-soft:   rgba(251,191,36,.14);
  --accent-rgb:    251, 191, 36;
  --auth-btn-gradient: linear-gradient(135deg, #FBBF24, #D97706);
  --bg:        #0a0803;
  --bg-0:      #0a0803;
  --surface-0: #150E05;
  --surface-1: #1c1406;
  --surface-2: #241a08;
  --surface-3: #2c2109;
  --surface-4: #34280b;
  /* onsite-theme-complete-v1 — borders + text (were falling back to violet) */
  --border:        rgba(251,191,36,.08);
  --border-em:     rgba(251,191,36,.18);
  --border-strong: rgba(251,191,36,.30);
  --border-focus:  rgba(251,191,36,.55);
  --text:      #FBF7EA;
  --text-1:    #FBF7EA;
  --text-2:    #E1D6BC;
  --text-3:    #B2A686;
  --text-4:    #867A5A;
  --text-5:    #5A5138;
  --bg-deep:   #0a0803;
  --accent-400: #FCD34D;
  --accent-500: #FBBF24;
  --accent-glow:      0 0 32px -2px rgba(251,191,36,.55);
  --accent-ring:      0 0 0 3px rgba(251,191,36,.22);
  --accent-gradient:  linear-gradient(135deg, #FBBF24 0%, #D97706 100%);
  --bg-gradient-page: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(251,191,36,.10) 0%, transparent 60%);
}