/* =====================================================================
   tokens.css — identidad visual de TomaHora (azul corporativo ARM)
   Todo el producto juega con la familia azul: marino, azul real, cielo y
   cian. Solo los estados que necesitan significado universal (éxito,
   alerta, error) usan verde, ámbar y rojo, afinados para convivir con el
   azul.
   - --brand es el color "principal". En el panel y el SuperAdmin es el
     azul corporativo; en la app del cliente lo reemplaza el color del
     local (aplicarMarca en shared/js/dom.js).
   - Modo claro por defecto; oscuro (azul noche) con prefers-color-scheme
     o con data-theme="dark".
   ===================================================================== */
:root {
  /* Escala azul corporativa */
  --azul-950: #060d24;
  --azul-900: #0b1b4d;
  --azul-800: #12318f;
  --azul-700: #1d4ed8;
  --azul-600: #2563eb;
  --azul-500: #3b82f6;
  --azul-400: #60a5fa;
  --azul-300: #93c5fd;
  --azul-100: #dbeafe;
  --azul-50:  #eff6ff;
  --cielo:    #0ea5e9;
  --cian:     #06b6d4;
  --indigo:   #4f46e5;

  /* Marca (el local la reemplaza en la app del cliente) */
  --brand: var(--azul-700);
  --brand-contrast: #ffffff;
  --brand-soft: #dbe7ff;
  --grad-marca: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
  --grad-fondo: radial-gradient(900px 380px at 50% -140px, rgba(37, 99, 235, 0.10), transparent 70%);

  /* Superficies y texto */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-glass: rgba(255, 255, 255, 0.82);
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;

  /* Estados de interfaz */
  --ok: #059669;
  --ok-soft: #d1fae5;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* Estados de una cita (agenda del panel) */
  --st-pending: #d97706;
  --st-pending-bg: #fef3c7;
  --st-confirmed: #1d4ed8;
  --st-confirmed-bg: #dbeafe;
  --st-completed: #059669;
  --st-completed-bg: #d1fae5;
  --st-cancelled: #64748b;
  --st-cancelled-bg: #f1f5f9;
  --st-noshow: #dc2626;
  --st-noshow-bg: #fee2e2;

  /* Forma y espacio */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-boton: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --tap: 44px;               /* tamaño táctil mínimo */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-fuerte: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
  --anillo: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Tipografía */
  --font: Inter, "Segoe UI Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  /* Transiciones */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.2s;

  color-scheme: light;
}

/* Tono suave y degradado a partir del color del local (claro y oscuro) */
@supports (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
    --grad-marca: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 62%, var(--cielo)) 100%);
    --grad-fondo: radial-gradient(900px 380px at 50% -140px, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%);
    --anillo: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3b6ef5;
    --bg: #0c1222;
    --surface: #141c2e;
    --surface-2: #1a2540;
    --surface-glass: rgba(20, 28, 46, 0.86);
    --border: #253352;
    --text: #e8eeff;
    --text-muted: #94a3c4;
    --ok: #34d399;
    --ok-soft: #052e1e;
    --warn: #fbbf24;
    --warn-soft: #2c1d06;
    --danger: #f87171;
    --danger-soft: #3b0f0f;
    --info: #8fb4ff;
    --info-soft: #11265c;
    --st-pending: #fbbf24;
    --st-pending-bg: #2c1d06;
    --st-confirmed: #8fb4ff;
    --st-confirmed-bg: #11265c;
    --st-completed: #34d399;
    --st-completed-bg: #052e1e;
    --st-cancelled: #94a3c4;
    --st-cancelled-bg: #1a2540;
    --st-noshow: #f87171;
    --st-noshow-bg: #3b0f0f;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-fuerte: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand: #3b6ef5;
  --bg: #0c1222;
  --surface: #141c2e;
  --surface-2: #1a2540;
  --surface-glass: rgba(20, 28, 46, 0.86);
  --border: #253352;
  --text: #e8eeff;
  --text-muted: #94a3c4;
  --ok: #34d399;
  --ok-soft: #052e1e;
  --warn: #fbbf24;
  --warn-soft: #2c1d06;
  --danger: #f87171;
  --danger-soft: #3b0f0f;
  --info: #8fb4ff;
  --info-soft: #11265c;
  --st-pending: #fbbf24;
  --st-pending-bg: #2c1d06;
  --st-confirmed: #8fb4ff;
  --st-confirmed-bg: #11265c;
  --st-completed: #34d399;
  --st-completed-bg: #052e1e;
  --st-cancelled: #94a3c4;
  --st-cancelled-bg: #1a2540;
  --st-noshow: #f87171;
  --st-noshow-bg: #3b0f0f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-fuerte: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  color-scheme: dark;
}