/* ─────────────────────────────────────────────
   Almost Fit — Theme: Indigo / Blue-Violet
   Layered on main.css — redefines design tokens only.
───────────────────────────────────────────── */

:root {
  /* Core surfaces */
  --bg-dark: #07051a;
  --bg-card: #12102a;
  --surface-elevated: #16142f;
  --bg-glass: rgba(22, 20, 48, 0.78);

  /* Primary = Indigo / blue-violet */
  --teal: #6366f1;
  --teal-light: #a5b4fc;
  --teal-glow: rgba(99, 102, 241, 0.28);
  --border-teal: rgba(129, 140, 248, 0.42);
  --shadow-teal: 0 4px 28px rgba(99, 102, 241, 0.22);

  /* Gradient pair (soft blue → purple) */
  --gradient-start: #7dd3fc;
  --gradient-end: #a855f7;
  --gradient-mid: #6366f1;

  /* Dark indigo — hover, depth */
  --primary-dark: #4338ca;
  --primary-deep: #312e81;

  /* Violet accent — ambient (restrained) */
  --accent-violet: rgba(167, 139, 250, 0.25);
  --accent-violet-soft: rgba(139, 92, 246, 0.1);

  /* Gold accent kept for CTAs / stars */
  --gold: #fbbf24;

  --text-primary: #f0f4ff;
  --text-secondary: #a5b0cc;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.07);

  /* Landing / hero (used by overview + landing.css) */
  --navbar-scrolled-bg: rgba(7, 5, 22, 0.88);
  --hero-bg-gradient: linear-gradient(
    155deg,
    #050218 0%,
    #0f0d28 35%,
    #1a1240 68%,
    #08051c 100%
  );
  --hero-radial-glow: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.32) 0%,
    rgba(99, 102, 241, 0.12) 38%,
    transparent 68%
  );
  --plan-popular-tint: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.12),
    var(--bg-card)
  );

  /* Elevation & focus (design system) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);
  --ring: rgba(99, 102, 241, 0.45);
  --ring-offset: 2px;
}

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

::selection {
  background: rgba(99, 102, 241, 0.35);
  color: var(--text-primary);
}

[data-theme="light"] {
  --bg-dark: #eef2ff;
  --bg-card: #ffffff;
  --surface-elevated: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-primary: #1e1b4b;
  --text-secondary: #334155;
  --text-muted: #475569;
  --teal: #4f46e5;
  --teal-light: #3730a3;
  --teal-glow: rgba(79, 70, 229, 0.14);
  --border-teal: rgba(79, 70, 229, 0.36);
  --border: rgba(30, 27, 75, 0.16);
  --navbar-scrolled-bg: rgba(255, 255, 255, 0.94);
  --hero-bg-gradient: linear-gradient(
    135deg,
    #eef2ff 0%,
    #e0e7ff 45%,
    #f5f3ff 100%
  );
  --hero-radial-glow: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.2) 0%,
    transparent 65%
  );
  --plan-popular-tint: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08),
    var(--bg-card)
  );
}

/* Page backdrop: layered depth */
body {
  background:
    radial-gradient(ellipse 90% 55% at 15% -10%, rgba(99, 102, 241, 0.14), transparent 45%),
    radial-gradient(ellipse 70% 45% at 95% 5%, var(--accent-violet-soft), transparent 52%),
    linear-gradient(168deg, #07051a 0%, #0d0b22 42%, #080616 100%);
  background-attachment: fixed;
}

html[data-theme="light"] body {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  background-attachment: fixed;
}

html[data-theme="light"]::selection {
  background: rgba(99, 102, 241, 0.22);
  color: var(--text-primary);
}

/* Scrollbar — primary + dark indigo hover */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--teal), var(--primary-dark));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-deep);
}

/* Buttons: soft blue → purple */
.btn-primary {
  background: linear-gradient(135deg, var(--gradient-mid), var(--gradient-end)) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.22) !important;
}
.btn-primary:hover {
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.22) !important;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-gold:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: var(--ring-offset);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-outline {
  color: var(--teal-light) !important;
  border-color: var(--border-teal) !important;
}
.btn-outline:hover {
  background: var(--teal-glow) !important;
}

/* Cards & stats */
.card {
  box-shadow: var(--shadow-sm), var(--shadow-md);
  border-color: var(--border);
}

.card:hover {
  border-color: var(--border-teal);
  box-shadow: var(--shadow-sm), 0 12px 32px rgba(0, 0, 0, 0.2);
}
.stat-card:hover {
  border-color: var(--border-teal);
}
.stat-number {
  color: var(--teal-light);
}

/* Logo tiles (portal + landing) */
.logo-icon,
.nav-logo .logo-icon {
  background: linear-gradient(145deg, var(--gradient-mid), var(--gradient-end)) !important;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2);
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.04em;
}

/* Forms focus ring */
.form-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-glow);
}

/* Media tabs */
.media-tab.active {
  background: var(--teal);
  color: #fff !important;
  border-color: var(--primary-dark);
}

/* Toasts */
.toast-info {
  border-left-color: var(--teal);
}

/* Utility text class still named .text-teal */
.text-teal {
  color: var(--teal-light) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}