/* ============================================================================
   TOKENS — el único sitio donde se tocan los colores.

   Criterio: fondos neutros y texto con contraste de sobra (AA o más) para leer
   rápido y a pleno sol en el móvil. El violeta de la marca de surfside.agency se
   reserva para lo que se puede pulsar o lo que está activo; el degradado violeta →
   rosa queda sólo en el logotipo. Los colores de estado son oscuros en el tema
   claro y claros en el oscuro, para que las etiquetas se lean en los dos.
   ============================================================================ */

:root {
  /* ── Marca ────────────────────────────────────────────────────────────── */
  --brand-grad:    linear-gradient(120deg, #b47cfd 20%, #ff7fc2 60%);

  /* ── 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: .8125rem; --fs-sm: .875rem;  --fs-base: .9375rem;
  --fs-md: 1.0625rem; --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: 14px; --r-full: 999px;

  --sidebar-w: 236px;
  --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) ─────────────────────────────────────────── */
  --accent:        #6d3fd8;                  /* violeta de marca oscurecido: 6:1 sobre blanco */
  --accent-hover:  #5b2fc2;
  --on-accent:     #ffffff;                  /* texto encima de un botón violeta */
  --accent-soft:   rgba(109, 63, 216, .09);
  --accent-border: rgba(109, 63, 216, .35);

  --ok:      #047857;
  --warn:    #b45309;
  --danger:  #c8233f;
  --info:    #1d5fd6;

  --bg:          #f5f6f8;
  --bg-2:        #eceef2;                    /* barra lateral y barra inferior */
  --surface:     #ffffff;
  --surface-2:   #f3f4f7;
  --surface-3:   #e7e9ee;
  --border:      #dcdfe5;
  --border-soft: #eceef1;
  --text:        #15171c;
  --text-2:      #3d434d;
  --muted:       #5f6672;                    /* 5,5:1 sobre blanco */
  --shadow-sm:   0 1px 2px rgba(16, 20, 28, .06);
  --shadow-md:   0 4px 14px rgba(16, 20, 28, .08);
  --shadow-lg:   0 14px 40px rgba(16, 20, 28, .14);
  --overlay:     rgba(16, 20, 28, .45);
}

/* ── TEMA OSCURO ────────────────────────────────────────────────────────── */
/* Gris carbón neutro en vez del morado casi negro: menos cansado y con más contraste. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #b79dff;
    --accent-hover:  #c9b5ff;
    --on-accent:     #1b1236;
    --accent-soft:   rgba(183, 157, 255, .14);
    --accent-border: rgba(183, 157, 255, .42);

    --ok:      #4ade9b;
    --warn:    #fbbf3c;
    --danger:  #ff7a8f;
    --info:    #6aaeff;

    --bg:          #121418;
    --bg-2:        #0d0f12;
    --surface:     #1b1e24;
    --surface-2:   #23272e;
    --surface-3:   #2d323a;
    --border:      #30353e;
    --border-soft: #262a31;
    --text:        #f3f4f6;
    --text-2:      #cdd2d9;
    --muted:       #9ea5b0;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md:   0 4px 18px rgba(0, 0, 0, .4);
    --shadow-lg:   0 16px 48px rgba(0, 0, 0, .55);
    --overlay:     rgba(0, 0, 0, .6);
  }
}

/* Y también si el usuario lo fuerza desde el conmutador, gane lo que gane el sistema. */
:root[data-theme="dark"] {
  --accent:        #b79dff;
  --accent-hover:  #c9b5ff;
  --on-accent:     #1b1236;
  --accent-soft:   rgba(183, 157, 255, .14);
  --accent-border: rgba(183, 157, 255, .42);

  --ok:      #4ade9b;
  --warn:    #fbbf3c;
  --danger:  #ff7a8f;
  --info:    #6aaeff;

  --bg:          #121418;
  --bg-2:        #0d0f12;
  --surface:     #1b1e24;
  --surface-2:   #23272e;
  --surface-3:   #2d323a;
  --border:      #30353e;
  --border-soft: #262a31;
  --text:        #f3f4f6;
  --text-2:      #cdd2d9;
  --muted:       #9ea5b0;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md:   0 4px 18px rgba(0, 0, 0, .4);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, .55);
  --overlay:     rgba(0, 0, 0, .6);
}