/* ============================================================
   SmartFisio — Design Tokens
   Estilo iOS · Modo claro por defecto + modo oscuro
   ============================================================ */

:root {
  /* ---- Marca (Medical Teal) ---- */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-300: #5eead4;
  --brand-500: #0d9488; /* Teal principal */
  --brand-600: #0f766e;
  --brand-700: #115e59;
  --brand-ink: #134e4a;

  /* ---- Secundarios de experiencia publica ---- */
  --blue-500: #2f80ed;
  --blue-600: #1d65c9;
  --blue-soft: #edf5ff;
  --mint-soft: #dff7ef;
  --warm-soft: #f5efe6;
  --ink-950: #111827;

  /* ---- Acento Energético (Coral/Orange) ---- */
  --accent:           #ff6b4a; /* Acento naranja/coral */
  --accent-hover:     #e04f2f;
  --accent-soft:      #fff0ec;
  --accent-soft-text: #c22e10;

  /* ---- Neutros (Obsidian & Premium Grays) ---- */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ---- Estados ---- */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #0ea5e9;
  --purple:  #8b5cf6;

  /* ---- Semánticos: modo claro ---- */
  --bg:            var(--gray-50);
  --bg-elevated:   #ffffff;
  --bg-sunken:     var(--gray-100);
  --bg-sidebar:    rgba(255, 255, 255, 0.85);
  --surface:       #ffffff;
  --surface-hover: var(--gray-100);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --text:          var(--gray-900);
  --text-2:        var(--gray-600);
  --text-3:        var(--gray-400);
  --text-inverse:  #ffffff;
  /* #0c8479, no var(--brand-500) directo: mismo tono pero un pelín más oscuro para que
     el texto blanco encima (botones, insignias) llegue a 4.5:1 WCAG AA — #0d9488 daba
     4.01:1, hallado auditando con Lighthouse. --brand-500 sigue con su valor original
     para lo que no lleva texto encima (el degradado del logo, etc.). */
  --primary:       #0c8479;
  --primary-hover: var(--brand-600);
  --primary-soft:  var(--brand-50);
  --primary-soft-text: var(--brand-700);
  --overlay:       rgba(15, 23, 42, 0.4);
  --success-soft:  #ecfdf5;
  --warning-soft:  #fef3c7;
  --danger-soft:   #fef2f2;
  --info-soft:     #f0f9ff;
  --purple-soft:   #f5f3ff;

  /* ---- Sombras Modernas ---- */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05), 0 1px 4px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 4px rgba(13, 148, 136, 0.18);
  --shadow-float: 0 18px 44px rgba(15, 23, 42, 0.12), 0 5px 18px rgba(15, 23, 42, 0.06);

  /* ---- Tipografía Premium ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-title: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.84rem;    /* 13.5 */
  --fs-base: 0.96rem;  /* 15.5 */
  --fs-md: 1.1rem;     /* 17.6 */
  --fs-lg: 1.3rem;     /* 20.8 */
  --fs-xl: 1.6rem;     /* 25.6 */
  --fs-2xl: 2.1rem;    /* 33.6 */
  --fs-3xl: 2.8rem;    /* 44.8 */

  /* ---- Geometría (Bento-box rounded) ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* ---- Espaciado ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Custom ease-out */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 450ms;
  --motion-enter: 620ms;
  --motion-page: 520ms;
  --motion-exit: 220ms;
  --motion-spring-soft: cubic-bezier(0.22, 1.18, 0.36, 1);

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --topbar-h: 68px;

  color-scheme: light;
}

/* ============================================================
   Modo oscuro
   ============================================================ */
[data-theme="dark"] {
  --bg:            #090d16;
  --bg-elevated:   #0f172a;
  --bg-sunken:     #05080f;
  --bg-sidebar:    rgba(15, 23, 42, 0.85);
  --surface:       #0f172a;
  --surface-hover: #1e293b;
  --border:        #1e293b;
  --border-strong: #334155;
  --text:          #f8fafc;
  --text-2:        #cbd5e1;
  /* #728299: #64748b daba 3.75:1 sobre --surface (#0f172a), por debajo del 4.5:1 WCAG AA
     — hallado auditando con Lighthouse (etiquetas de hora "muted" en las tarjetas). */
  --text-3:        #728299;
  --text-inverse:  #ffffff;
  /* #0f8578: #14b8a6 daba 3.96:1 con texto blanco encima (botones/insignias),
     por debajo del 4.5:1 WCAG AA — hallado auditando con Lighthouse. */
  --primary:       #0f8578;
  --primary-hover: #2ed9c9;
  --primary-soft:  rgba(20, 184, 166, 0.12);
  --primary-soft-text: #5eead4;
  --overlay:       rgba(0, 0, 0, 0.6);
  --success-soft:  rgba(16, 185, 129, 0.12);
  --warning-soft:  rgba(245, 158, 11, 0.12);
  --danger-soft:   rgba(239, 68, 68, 0.12);
  --info-soft:     rgba(14, 165, 233, 0.12);
  --purple-soft:   rgba(139, 92, 246, 0.12);
  --blue-soft:     rgba(47, 128, 237, 0.14);
  --mint-soft:     rgba(20, 184, 166, 0.16);
  --warm-soft:     rgba(245, 239, 230, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 4px rgba(20, 184, 166, 0.22);
  --shadow-float: 0 22px 54px rgba(0, 0, 0, 0.42), 0 8px 22px rgba(0, 0, 0, 0.28);

  color-scheme: dark;
}

/* ============================================================
   Densidad compacta — preferencia personal del panel (localStorage,
   como el tema; no viaja en `settings`). Solo reescala el espaciado:
   tipografía, radios y color quedan igual para no romper la jerarquía
   visual, solo se acercan los elementos entre sí.
   ============================================================ */
[data-density="compact"] {
  --sp-1: 3px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 14px; --sp-6: 16px; --sp-8: 22px; --sp-10: 28px; --sp-12: 34px;
}