/* ═══════════════════════════════════════════════════════════════
 * Extranet Design System — Design Tokens
 * Soft Modern Clinical · v1.0
 * ═══════════════════════════════════════════════════════════════
 * Fuente canónica de los tokens --ext-*. Antes vivían en
 * extranet_admin/static/src/css/extranet-tokens.css y eso generaba
 * una dependencia circular (ui-kit depende de admin). A partir de
 * Fase 0 viven acá y admin los consume a través del template
 * extranet_ui_kit.head_assets.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─── */
  --ext-bg-base:       #F7F9FB;
  --ext-bg-surface:    #FFFFFF;
  --ext-bg-elevated:   #FFFFFF;
  --ext-bg-hover:      #F1F5F9;
  --ext-bg-overlay:    rgba(15, 23, 42, 0.55);

  /* ─── Text (Ink) ─── */
  --ext-ink:           #0F172A;
  --ext-ink-muted:     #64748B;
  --ext-ink-subtle:    #94A3B8;
  --ext-ink-placeholder:#94A3B8;  /* Placeholder inputs — WCAG AA sobre bg-surface */
  --ext-ink-inverse:   #FFFFFF;

  /* ─── Borders ─── */
  --ext-border:        #E2E8F0;
  --ext-border-input:  #CBD5E1;
  --ext-border-focus:  #14B8A6;
  --ext-border-strong: #94A3B8;

  /* ─── Primary (Teal) ─── */
  --ext-primary:       #14B8A6;
  --ext-primary-hover: #0D9488;
  --ext-primary-active:#0F766E;
  --ext-primary-soft:  #CCFBF1;
  --ext-primary-ring:  rgba(20, 184, 166, 0.2);

  /* ─── Accent (Amber warm) ─── */
  --ext-accent:        #F59E0B;
  --ext-accent-hover:  #D97706;
  --ext-accent-soft:   #FEF3C7;

  /* ─── Semantic ─── */
  --ext-success:       #059669;
  --ext-success-hover: #047857;
  --ext-success-soft:  #D1FAE5;

  --ext-danger:        #DC2626;
  --ext-danger-hover:  #B91C1C;
  --ext-danger-soft:   #FEE2E2;

  --ext-warning:       #F59E0B;
  --ext-warning-hover: #D97706;
  --ext-warning-soft:  #FEF3C7;

  --ext-info:          #3B82F6;
  --ext-info-hover:    #2563EB;
  --ext-info-soft:     #DBEAFE;

  /* ─── State Colors de turnos ─── */
  --ext-state-reserved:     #F59E0B;
  --ext-state-confirmed:    #3B82F6;
  --ext-state-waiting:      #7C3AED;
  --ext-state-arrived:      #0891B2;
  --ext-state-called:       #C026D3;
  --ext-state-done:         #059669;
  --ext-state-no-show:      #DC2626;
  --ext-state-rejected:     #6B7280;
  --ext-state-rescheduling: #EA580C;
  --ext-state-rescheduled:  #6B7280;

  /* ─── Typography ─── */
  --ext-font-family:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ext-font-family-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ext-font-xs:    0.75rem;
  --ext-font-sm:    0.875rem;
  --ext-font-base:  1rem;
  --ext-font-lg:    1.125rem;
  --ext-font-xl:    1.25rem;
  --ext-font-2xl:   1.5rem;
  --ext-font-3xl:   1.875rem;
  --ext-font-4xl:   2.25rem;

  --ext-leading-tight: 1.2;
  --ext-leading-snug:  1.35;
  --ext-leading-base:  1.5;
  --ext-leading-loose: 1.75;

  --ext-weight-regular: 400;
  --ext-weight-medium:  500;
  --ext-weight-semibold:600;
  --ext-weight-bold:    700;

  /* ─── Spacing ─── */
  --ext-space-0:  0;
  --ext-space-1:  4px;
  --ext-space-2:  8px;
  --ext-space-3:  12px;
  --ext-space-4:  16px;
  --ext-space-5:  20px;
  --ext-space-6:  24px;
  --ext-space-8:  32px;
  --ext-space-10: 40px;
  --ext-space-12: 48px;
  --ext-space-16: 64px;
  --ext-space-20: 80px;

  /* ─── Border Radius ─── */
  --ext-radius-sm:   4px;
  --ext-radius:      6px;
  --ext-radius-md:   8px;
  --ext-radius-lg:   10px;
  --ext-radius-xl:   16px;
  --ext-radius-full: 9999px;

  /* ─── Shadows ─── */
  --ext-shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --ext-shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ext-shadow-md:    0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ext-shadow-lg:    0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --ext-shadow-focus: 0 0 0 3px var(--ext-primary-ring);

  /* ─── Transitions ─── */
  --ext-transition-fast: 150ms ease-out;
  --ext-transition-base: 200ms ease-out;
  --ext-transition-slow: 300ms ease-out;

  /* ─── Breakpoints (referencia) ─── */
  --ext-bp-sm: 375px;
  --ext-bp-md: 768px;
  --ext-bp-lg: 1024px;
  --ext-bp-xl: 1440px;

  /* ─── Z-index scale ─── */
  --ext-z-dropdown: 100;
  --ext-z-sticky:   500;
  --ext-z-modal:    1050;
  --ext-z-drawer:   1055;
  --ext-z-toast:    1100;
}

/* ─── Dark mode ─── */
:root[data-theme="dark"] {
  /* Surfaces */
  --ext-bg-base:       #0B1220;
  --ext-bg-surface:    #111B2E;
  --ext-bg-elevated:   #1B2940;
  --ext-bg-hover:      #1B2940;
  --ext-bg-overlay:    rgba(0, 0, 0, 0.65);

  /* Ink */
  --ext-ink:           #F1F5F9;
  --ext-ink-muted:     #94A3B8;
  --ext-ink-subtle:    #64748B;
  --ext-ink-placeholder:#B8C1CF;  /* Placeholder dark — WCAG AA sobre bg-elevated */
  --ext-ink-inverse:   #0F172A;

  /* Borders */
  --ext-border:        #1E2A42;
  --ext-border-input:  #334155;
  --ext-border-strong: #475569;

  /* Primary — teal un toque más claro para mejor contraste sobre dark */
  --ext-primary:       #2DD4BF;
  --ext-primary-hover: #14B8A6;
  --ext-primary-active:#0D9488;
  --ext-primary-soft:  rgba(45, 212, 191, 0.14);
  --ext-primary-ring:  rgba(45, 212, 191, 0.28);

  /* Accent */
  --ext-accent-soft:   rgba(245, 158, 11, 0.14);

  /* Semantic soft (versiones translúcidas para dark) */
  --ext-success-soft:  rgba(16, 185, 129, 0.14);
  --ext-danger-soft:   rgba(248, 113, 113, 0.16);
  --ext-warning-soft:  rgba(245, 158, 11, 0.16);
  --ext-info-soft:     rgba(59, 130, 246, 0.16);

  /* Semantic hovers (usados como texto sobre soft bg) */
  --ext-success-hover: #34D399;
  --ext-danger-hover:  #F87171;
  --ext-warning-hover: #FBBF24;
  --ext-info-hover:    #60A5FA;

  /* Shadows más marcadas en dark (negro con mayor opacidad) */
  --ext-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.25);
  --ext-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
  --ext-shadow-md:    0 4px 10px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.22);
  --ext-shadow-lg:    0 16px 32px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.28);
  --ext-shadow-focus: 0 0 0 3px var(--ext-primary-ring);
}

/* Transición suave al cambiar de tema (solo fondos y colores, no shadows) */
:root {
  color-scheme: light dark;
}
@media (prefers-reduced-motion: no-preference) {
  body,
  .ext-sidebar,
  .ext-topbar,
  .ext-card,
  .ext-card-kpi,
  .ext-quick-card,
  .ext-topbar__menu,
  .ext-login__card,
  .ext-input,
  .ext-select,
  .ext-radio-card {
    transition: background-color 180ms ease-out,
                border-color 180ms ease-out,
                color 180ms ease-out;
  }
}