/* ===============================================================
   SOULFULSYNC ECOSYSTEM — GLOBAL DESIGN TOKENS (2026 FINAL BUILD)
   - Unified light/dark system
   - Extended tokens for new WOW Home
   - Fully compatible with home.css + theme.css + nav + profile
================================================================ */

/* --------------------------------------------------
   Global Theme Variables (LIGHT MODE)
-------------------------------------------------- */
:root {
  /* Brand */
  --ss-brand: #7e3af2;
  --ss-brand-soft: rgba(126, 58, 242, .12);
  --ss-brand-glow: rgba(126, 58, 242, .45);

  /* Text */
  --ss-ink: #0f172a;
  --ss-muted: #6b7280;

  /* Surfaces */
  --ss-bg: #ffffff;
  --ss-bg-soft: #f7f5ff;
  --ss-card: #ffffff;
  --ss-card-soft: #faf9ff;

  /* Borders + Shadows */
  --ss-border: #e8e6f5;
  --ss-border-strong: #d7d5e8;
  --ss-shadow: 0 10px 30px rgba(15, 23, 42, .06);

  /* Radiuses */
  --ss-radius: 14px;
  --ss-radius-lg: 22px;

  /* Gradients (light) */
  --ss-grad-hero: radial-gradient(
      circle at 20% 10%,
      rgba(124, 100, 255, 0.16),
      transparent 70%
    ),
    radial-gradient(
      circle at 90% 30%,
      rgba(255, 99, 179, 0.16),
      transparent 75%
    );

  /* Glow (used in home.js) */
  --ss-glow: drop-shadow(0 0 22px rgba(138, 92, 255, .32));

  /* Header */
  --ss-header-logo-size: 130px;

  /* Animation smoothing */
  --ss-transition: .25s ease;
}

/* --------------------------------------------------
   DARK MODE — Improved & more cinematic
-------------------------------------------------- */
html[data-theme="dark"] {
  --ss-ink: #e5e7eb;
  --ss-muted: #b4bbca;

  --ss-bg: #0b1020;
  --ss-bg-soft: #111632;

  --ss-card: #0f152b;
  --ss-card-soft: #161d35;

  --ss-border: #1e2544;
  --ss-border-strong: #2a3357;

  --ss-shadow: 0 10px 34px rgba(0, 0, 0, .45);

  /* Dark Gradients */
  --ss-grad-hero: radial-gradient(
      circle at 20% 10%,
      rgba(124, 100, 255, 0.32),
      transparent 70%
    ),
    radial-gradient(
      circle at 90% 30%,
      rgba(255, 99, 179, 0.28),
      transparent 75%
    );

  --ss-glow: drop-shadow(0 0 28px rgba(138, 92, 255, .45));
}

/* --------------------------------------------------
   Base Reset
-------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, 'Noto Sans', sans-serif;
  line-height: 1.6;
  transition: background var(--ss-transition), color var(--ss-transition);
}

img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------
   Helpers
-------------------------------------------------- */
.ss-soft-bg {
  background: var(--ss-bg-soft);
}

.ss-card {
  background: var(--ss-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
}

.ss-glow {
  transition: filter .4s ease;
}

.text-muted {
  color: var(--ss-muted);
}