/* ============================================================================
   TOKENS — el único sitio donde se tocan los colores.
   Paleta tomada de la marca real de surfside.agency (BRAND.md de la landing):
   violeta → rosa sobre fondo morado casi negro.
   ============================================================================ */

:root {
  /* ── Marca, idéntica en los dos temas ─────────────────────────────────── */
  --accent:        #b47cfd;   /* violeta */
  --accent-2:      #ff7fc2;   /* rosa */
  --grad-cta:      linear-gradient(120deg, #b47cfd 20%, #ff7fc2 60%);
  --accent-soft:   rgba(180, 124, 253, .14);
  --accent-border: rgba(180, 124, 253, .38);

  /* ── Semánticos ───────────────────────────────────────────────────────── */
  --ok:      #34d399;
  --warn:    #fbbf24;
  --danger:  #fb7185;
  --info:    #60a5fa;

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: .75rem;  --fs-sm: .8125rem; --fs-base: .875rem;
  --fs-md: 1rem;    --fs-lg: 1.25rem;  --fs-xl: 1.75rem;  --fs-2xl: 2.25rem;

  /* ── Espaciado y formas ───────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-full: 999px;

  --sidebar-w: 232px;
  --header-h:  60px;

  /* ── Transiciones ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 120ms var(--ease);
  --t-med:  220ms var(--ease);

  /* ── TEMA CLARO (por defecto) ─────────────────────────────────────────── */
  --bg:          #faf8fd;
  --bg-2:        #f3eff9;
  --surface:     #ffffff;
  --surface-2:   #f7f4fb;
  --surface-3:   #ede7f5;
  --border:      #e6dff0;
  --border-soft: #f0eaf7;
  --text:        #1a1024;
  --text-2:      #4b3f5c;
  --muted:       #7d7290;
  --shadow-sm:   0 1px 2px rgba(26, 16, 36, .05);
  --shadow-md:   0 4px 16px rgba(26, 16, 36, .07);
  --shadow-lg:   0 12px 40px rgba(26, 16, 36, .12);
  --overlay:     rgba(26, 16, 36, .45);
}

/* ── TEMA OSCURO — la marca real de la web ──────────────────────────────── */
/* Se aplica si el sistema está en oscuro y el usuario no ha forzado el claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a0118;
    --bg-2:        #0f0520;
    --surface:     #181028;
    --surface-2:   #241a30;
    --surface-3:   #2b2338;
    --border:      #2b2338;
    --border-soft: #221a2e;
    --text:        #ffffff;
    --text-2:      #cfc8dd;
    --muted:       #9b96b0;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:   0 4px 20px rgba(0, 0, 0, .45);
    --shadow-lg:   0 16px 48px rgba(0, 0, 0, .6);
    --overlay:     rgba(5, 0, 12, .7);
    --accent-soft: rgba(180, 124, 253, .18);
  }
}

/* Y también si el usuario lo fuerza desde el conmutador, gane lo que gane el sistema. */
:root[data-theme="dark"] {
  --bg:          #0a0118;
  --bg-2:        #0f0520;
  --surface:     #181028;
  --surface-2:   #241a30;
  --surface-3:   #2b2338;
  --border:      #2b2338;
  --border-soft: #221a2e;
  --text:        #ffffff;
  --text-2:      #cfc8dd;
  --muted:       #9b96b0;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, .45);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, .6);
  --overlay:     rgba(5, 0, 12, .7);
  --accent-soft: rgba(180, 124, 253, .18);
}