/* === DIGITAL AURA — Light, Modern, Social-Media Friendly === */
/* LOLASMM Phase 3B design tokens. Loaded after the theme stylesheet so these
   custom properties are available to every later override layer. */

:root {
  /* Background — LIGHT, not dark. Airy and breathable */
  --bg-page: #f8f9fc;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f2f5;
  --bg-hero-start: #f0e6ff;
  --bg-hero-end: #e6f0ff;

  /* Primary — Deep trustworthy purple-blue */
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-50: #eef2ff;

  /* Accent — Eye-catching pink/magenta for CTAs */
  --accent-500: #ec4899;
  --accent-600: #db2777;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);

  /* Social media brand colors (for icons only) */
  --instagram: #E4405F;
  --tiktok: #000000;
  --youtube: #FF0000;
  --twitter: #000000;
  --facebook: #1877F2;
  --telegram: #26A5E4;
  --whatsapp: #25D366;
  --snapchat: #FFFC00;
  --linkedin: #0A66C2;
  --twitch: #9146FF;
  --spotify: #1DB954;
  --soundcloud: #FF5500;
  --pinterest: #E60023;
  --reddit: #FF4500;
  --discord: #5865F2;
  --threads: #000000;

  /* Semantic — Soft, not aggressive */
  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --info: #3b82f6;
  --info-bg: #eff6ff;

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Borders */
  --border-subtle: #e2e8f0;
  --border-focus: #6366f1;

  /* Shadows — soft, modern */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing — canonical names (--space-N) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-24: 96px; --space-32: 128px;

  /* Aliases — lolasmm-responsive.css uses --sp-N naming; these bridge the gap */
  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3);
  --sp-4: var(--space-4); --sp-5: var(--space-6); --sp-6: var(--space-8);
  --sp-7: var(--space-12); --sp-8: var(--space-16);

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Dark mode — supports all three conventions used across panels:
   client uses body.dark, admin uses body.dark-mode, token spec uses [data-theme="dark"] */
[data-theme="dark"],
body.dark,
body.dark-mode {
  --bg-page: #0f172a;
  --bg-surface: #1e293b;
  --bg-elevated: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border-subtle: #334155;
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
  --premium-surface: #1a1d2e;
  --premium-surface-hover: #1f2337;
  --premium-surface-border: rgba(255, 255, 255, 0.06);
  --premium-primary-light: rgba(79, 70, 229, 0.15);
}

/* ================= Phase 4B: motion design tokens ================= */
:root{
  /* Durations (nothing above 300ms per perf budget) */
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; --dur-4:300ms;
  /* Easings */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  /* Elevation + glow */
  --elevation-1:0 1px 2px rgba(0,0,0,.06);
  --elevation-2:0 6px 16px rgba(0,0,0,.10);
  --elevation-3:0 16px 40px rgba(0,0,0,.14);
  --glow-primary:0 0 0 1px rgba(99,102,241,.18), 0 10px 28px rgba(99,102,241,.28);
  --glow-accent:0 0 0 1px rgba(236,72,153,.18), 0 10px 28px rgba(236,72,153,.28);
}
/* ================================================================= */

/* ================= Phase 4C: WOW experience tokens ================= */
:root{
  --chart-1:#6366f1; --chart-2:#ec4899; --chart-3:#10b981; --chart-4:#f59e0b; --chart-5:#3b82f6;
  --particle:rgba(99,102,241,.22);
  --health-ok:#10b981; --health-warn:#f59e0b; --health-down:#ef4444;
  --wow-hero-1:#f0e6ff; --wow-hero-2:#e6f0ff; --wow-hero-3:#ffffff;
}
/* ================================================================== */

/* Phase 8: keep indigo-tint hovers subtle in dark mode */
[data-theme="dark"]{ --primary-50:#1e293b; }