/* ============================================================
   BookedUp · Dashboard — Tokens de diseño
   Valores alineados al dashboard original (deploy replit).
   Marca: #35219B → #822299. Acento de contenido SIEMPRE morado;
   el color de rol solo tiñe el tab del switcher y el avatar.
   ============================================================ */

:root {
  /* ---- Marca ---- */
  --marca-primario: #35219b;
  --marca-secundario: #822299;
  --marca-primario-fuerte: #2a1a7a;
  --marca-degradado: linear-gradient(135deg, #35219b 0%, #822299 100%);

  /* ---- Superficies y fondos (grises cálidos) ---- */
  --fondo-app: #f7f7f5;
  --superficie: #ffffff;
  --superficie-tenue: #f2f1ef;
  --borde: #e5e4e0;
  --borde-fuerte: #d4d3ce;

  /* ---- Texto ---- */
  --texto-fuerte: #1a1a18;
  --texto: #3a3a36;
  --texto-suave: #6b6a65;
  --texto-tenue: #9b9a95;
  --texto-invertido: #ffffff;

  /* ---- Morados auxiliares ---- */
  --morado-claro: #eeeaf7;
  --morado-medio: #b9aee0;
  --morado-oscuro: #2a1a7a;

  /* ---- Topbar oscuro / sidebar oscuro (Super Admin) ---- */
  --oscuro-fondo: #1a1a18;
  --oscuro-sidebar: #22221f;
  --oscuro-borde: #333330;
  --oscuro-texto: #e5e4e0;
  --oscuro-texto-suave: #8a8a85;
  --oscuro-texto-tenue: #5a5a55;

  /* ---- Colores semánticos de estado ---- */
  --exito: #00b37d;
  --exito-suave: #e6f7f1;
  --exito-texto: #007a55;
  --aviso: #d69e2e;
  --aviso-suave: #fffbeb;
  --aviso-texto: #975a16;
  --peligro: #e53e3e;
  --peligro-suave: #fef2f2;
  --peligro-texto: #c53030;
  --info: #3182ce;
  --info-suave: #ebf4ff;
  --info-texto: #2c5282;

  /* ---- Acento de contenido: SIEMPRE morado de marca ---- */
  --acento: var(--marca-primario);
  --acento-suave: var(--morado-claro);

  /* ---- Color de rol (solo tab del switcher + avatar) ----
     Cada vista lo redefine con --rol-color / --rol-color-suave. */
  --rol-staff: #35219b;          --rol-staff-suave: #eeeaf7;
  --rol-owner: #00b37d;          --rol-owner-suave: #e6f7f1;
  --rol-pm: #3182ce;             --rol-pm-suave: #ebf4ff;
  --rol-superadmin: #e53e3e;     --rol-superadmin-suave: #fef2f2;
  --rol-color: var(--rol-staff);
  --rol-color-suave: var(--rol-staff-suave);

  /* ---- Tipografía ----
     El dashboard original usa Plus Jakarta Sans (texto) y DM Mono (datos:
     horas, duraciones). La marca corporativa es Greycliff CF (Adobe, de pago);
     cuando esté el kit, se sustituye en --fuente. */
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --txt-xs: 10.5px;
  --txt-sm: 11px;
  --txt-base: 12.5px;
  --txt-md: 13px;
  --txt-lg: 16px;
  --txt-xl: 20px;
  --txt-2xl: 26px;

  /* ---- Espaciado ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 10px;
  --esp-4: 14px;
  --esp-5: 16px;
  --esp-6: 20px;
  --esp-8: 28px;

  /* ---- Radios ---- */
  --radio-sm: 6px;
  --radio: 10px;
  --radio-full: 999px;

  /* ---- Sombras ---- */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* ---- Layout ---- */
  --topbar-alto: 52px;
  --subheader-alto: 46px;
  --sidebar-ancho: 210px;

  --transicion: 120ms ease;
}