/* =====================================================
   Tempo Design Tokens v2
   Branded identity — azul marino + naranja ambar
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Backgrounds ── */
  --t-bg-base:        #F7F5F0;
  --t-bg-content:     #FDFCFA;
  --t-bg-surface:     #FFFFFF;
  --t-bg-surface-2:   #F2EFE8;
  --t-bg-surface-hover: #EDE9E0;

  /* ── Legacy aliases (keep app.src.css working) ── */
  --t-content-bg:     #F7F5F0;
  --t-surface:        #FFFFFF;
  --t-surface-hover:  #EDE9E0;
  --t-surface-active: #E8E4DB;

  /* ── Sidebar ── */
  --t-sidebar-bg:     #1C2B3A;
  --t-sidebar-dark:   #142030;
  --t-sidebar-deep:   #142030;
  --t-sidebar-accent: #243547;
  --t-sidebar-border: rgba(255,255,255,0.06);
  --t-sidebar-text:   #8BA8C2;
  --t-sidebar-text-hover: #D4E4F0;
  --t-sidebar-text-active: #FFFFFF;
  --t-sidebar-divider: rgba(255,255,255,0.06);

  /* ── Accent — Naranja ambar ── */
  --t-accent:         #E8720C;
  --t-accent-hover:   #D4640A;
  --t-accent-light:   #FDF0E6;
  --t-accent-rgb:     232, 114, 12;

  /* ── Accent 2 — Azul acero ── */
  --t-accent-2:       #2B5F8E;
  --t-accent-2-hover: #1E4A6F;
  --t-accent-2-light: #E3EEF6;

  /* ── Semantic ── */
  --t-success:        #1E7E4C;
  --t-success-bg:     #E6F5ED;
  --t-warning:        #B7770D;
  /* 26-oct: para TEXTO de aviso (≥4.5:1 sobre blanco); --t-warning queda para bordes e íconos. */
  --t-warning-text:   #8A5A00;
  --t-warning-bg:     #FEF3E2;
  --t-danger:         #C0392B;
  --t-danger-bg:      #FDECEA;
  --t-danger-hover:   #A93226;
  --t-retainer:       #7C3AED;
  --t-retainer-bg:    #EDE9FE;

  /* ── Text ── */
  --t-text:           #1A1F2E;
  --t-text-secondary: #3D4A5C;
  /* 16-oct: muted y light subidos a contraste AA (eran 4.0:1 y 2.2:1 sobre el marfil). */
  --t-text-muted:     #56667A;
  --t-text-light:     #64748B;

  /* ── Borders ── */
  --t-border:         #DDD8CF;
  --t-border-strong:  #C4BFB5;
  --t-border-subtle:  #EDEAE4;

  /* ── Typography ── */
  --t-font-ui:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --t-font-display:   'Fraunces', Georgia, serif;
  --t-font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Escala tipográfica (16-oct, U8): 7 tamaños. Las plantillas usan
     var(--t-fs-*) en vez de ~70 tamaños sueltos; 11px es el mínimo. ── */
  --t-fs-2xs:         11px;  /* rótulos, metadatos */
  --t-fs-xs:          12px;  /* texto secundario, tablas densas */
  --t-fs-sm:          13px;  /* cuerpo de tablas y formularios */
  --t-fs-base:        14px;  /* cuerpo */
  --t-fs-md:          16px;  /* subtítulos, cifras destacadas */
  --t-fs-lg:          20px;  /* títulos de sección */
  --t-fs-xl:          24px;  /* títulos de página, KPIs */

  /* ── Sizing ── */
  --t-sidebar-w:      240px;
  --t-topbar-h:       58px;
  --t-radius:         10px;
  --t-radius-sm:      6px;
  --t-radius-lg:      16px;
  --t-radius-pill:    999px;

  /* ── Alto mínimo de controles (16-oct) ── */
  --t-ctl-sm:         36px;
  --t-ctl:            38px;
  --t-ctl-touch:      44px;

  /* ── Shadows ── */
  --t-shadow-xs:  0 1px 2px rgba(26,31,46,0.06);
  --t-shadow-sm:  0 2px 4px rgba(26,31,46,0.08), 0 1px 2px rgba(26,31,46,0.04);
  --t-shadow-md:  0 4px 12px rgba(26,31,46,0.10), 0 2px 4px rgba(26,31,46,0.06);
  --t-shadow-lg:  0 8px 24px rgba(26,31,46,0.12), 0 4px 8px rgba(26,31,46,0.08);
  --t-shadow-accent: 0 4px 14px rgba(232,114,12,0.30);

  /* ── Transitions ── */
  --t-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-duration: 150ms;
}