/* ============================================================
   SoulfulSync Ecosystem — Brand tokens (parity con App Flutter)
   Fuente: soulful_brand_colors.dart / AuroraUi
   ============================================================ */

:root {
  /* Logo / marca */
  --ss-violet: #9B8CFF;
  --ss-violet-deep: #6E5CE6;
  --ss-violet-soft: #B8A8FF;
  --ss-violet-mist: #D4CCFF;
  --ss-violet-glow: #7A6AE8;
  --ss-violet-ink: #1E1A2E;

  --ss-rose: #E8789A;
  --ss-rose-soft: #F4A3BC;

  --ss-green: #6FCCA0;
  --ss-green-deep: #4FA67E;

  /* Alias marca (compat) */
  --ss-brand: var(--ss-violet);
  --ss-brand-deep: var(--ss-violet-deep);
  --ss-brand-soft: rgba(155, 140, 255, 0.14);
  --ss-brand-glow: rgba(155, 140, 255, 0.42);
  --ss-primary: var(--ss-violet);
  --ss-secondary: var(--ss-rose);

  /* Superficies light */
  --ss-ink: #0C0A14;
  --ss-muted: #6B6580;
  --ss-bg: #F5F2FC;
  --ss-bg-soft: #F8F4FF;
  --ss-card: #FCFAFF;
  --ss-card-soft: #FDF9FF;
  --ss-border: #E4DFF2;
  --ss-border-strong: #D4CCFF;
  --ss-shadow: 0 10px 28px rgba(12, 10, 20, 0.07);
  --ss-shadow-lg: 0 18px 48px rgba(12, 10, 20, 0.12);

  --ss-radius: 16px;
  --ss-radius-lg: 22px;
  --ss-radius-pill: 999px;
  --ss-transition: 0.24s ease;

  --ss-grad-brand: linear-gradient(135deg, #6E5CE6 0%, #9B8CFF 55%, #E8789A 100%);
  --ss-grad-brand-soft: linear-gradient(135deg, #6E5CE6 0%, #9B8CFF 100%);
  --ss-grad-1: var(--ss-grad-brand);
  --ss-grad-2: var(--ss-grad-brand);
  --ss-grad-hero:
    radial-gradient(circle at 18% 12%, rgba(110, 92, 230, 0.18), transparent 58%),
    radial-gradient(circle at 88% 28%, rgba(232, 120, 154, 0.14), transparent 62%),
    linear-gradient(165deg, #FDF9FF 0%, #F5F2FC 42%, #F0EBFF 100%);

  --ss-glass: rgba(252, 250, 255, 0.78);
  --ss-glass-border: rgba(155, 140, 255, 0.16);
  --ss-header-bg: rgba(252, 250, 255, 0.72);
  --ss-header-border: rgba(228, 223, 242, 0.9);
  --ss-header-logo-size: 130px;

  --ss-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ss-font-display: "Plus Jakarta Sans", system-ui, sans-serif;

  --ss-max: 1280px;
  --ss-gap: 28px;
}

html[data-theme="dark"] {
  --ss-ink: #F0ECFA;
  --ss-muted: #A39BB8;
  --ss-bg: #0C0A14;
  --ss-bg-soft: #151222;
  --ss-card: #1C1929;
  --ss-card-soft: #242033;
  --ss-border: #322E44;
  --ss-border-strong: #403A58;
  --ss-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
  --ss-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);
  --ss-brand-soft: rgba(155, 140, 255, 0.16);
  --ss-grad-hero:
    radial-gradient(circle at 18% 12%, rgba(110, 92, 230, 0.28), transparent 55%),
    radial-gradient(circle at 88% 28%, rgba(232, 120, 154, 0.16), transparent 60%),
    linear-gradient(165deg, #1A152C 0%, #0C0A14 45%, #120F1E 100%);
  --ss-glass: rgba(28, 25, 41, 0.72);
  --ss-glass-border: rgba(184, 168, 255, 0.14);
  --ss-header-bg: rgba(12, 10, 20, 0.78);
  --ss-header-border: rgba(50, 46, 68, 0.9);
}