/* ═══════════════════════════════════════════════════════════════
   TOKENS — Sistema de diseño Editorial
   Paleta institucional + escalas tipográficas y espaciales
═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Color: Light Mode (default) ─────────────────────── */
  --bg:               #F8FAFC;
  --surface:          #FFFFFF;
  --surface-2:        #F1F5F9;   /* hover sutil sobre surface */
  --surface-sunken:   #F8FAFC;   /* zonas hundidas, kanban cols */

  --text:             #0F172A;
  --text-2:           #475569;
  --text-3:           #94A3B8;   /* placeholders, hints */

  --accent:           #2563EB;
  --accent-hover:     #1D4ED8;
  --accent-soft:      rgba(37, 99, 235, 0.08);
  --accent-ring:      rgba(37, 99, 235, 0.18);
  --accent-2:         #0F766E;
  --accent-2-hover:   #0D6259;
  --accent-2-soft:    rgba(15, 118, 110, 0.08);
  --accent-2-ring:    rgba(15, 118, 110, 0.18);

  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;
  --hairline:         rgba(15, 23, 42, 0.06);

  /* ─── Estados semánticos (sutiles, no decorativos) ────── */
  --ok:               #15803D;
  --ok-soft:          rgba(21, 128, 61, 0.08);
  --warn:             #B45309;
  --warn-soft:        rgba(180, 83, 9, 0.08);
  --danger:           #B91C1C;
  --danger-soft:      rgba(185, 28, 28, 0.08);
  --info:             #1D4ED8;
  --info-soft:        rgba(29, 78, 216, 0.08);
  --neutral:          #64748B;
  --neutral-soft:     rgba(100, 116, 139, 0.08);

  /* Status dot indicators (solo el punto lleva color) */
  --dot-abierto:      #2563EB;
  --dot-asignado:     #0EA5E9;
  --dot-progreso:     #B45309;
  --dot-espera:       #7C3AED;
  --dot-resuelto:     #15803D;
  --dot-cerrado:      #94A3B8;
  --dot-eliminado:    #E2E8F0;

  /* ─── Sombras (hairlines, no drop shadows) ────────────── */
  --shadow-1:         0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-2:         0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-3:         0 4px 12px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-modal:     0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);

  /* ─── Tipografía ──────────────────────────────────────── */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-serif:       'iA Writer Quattro', 'Charter', 'Iowan Old Style', Georgia, serif;

  /* Type scale */
  --t-xs:             0.75rem;   /* 12px — labels, captions */
  --t-sm:             0.8125rem; /* 13px — meta text */
  --t-base:           0.9375rem; /* 15px — body */
  --t-md:             1rem;      /* 16px — section heads */
  --t-lg:             1.25rem;   /* 20px — card titles */
  --t-xl:             1.625rem;  /* 26px — page title */
  --t-2xl:            2rem;      /* 32px — hero metric */
  --t-3xl:            2.75rem;   /* 44px — display */

  /* Line heights */
  --lh-tight:         1.15;
  --lh-snug:          1.35;
  --lh-normal:        1.55;
  --lh-relaxed:       1.7;

  /* Weights */
  --w-regular:        400;
  --w-medium:         500;
  --w-semibold:       600;
  --w-bold:           700;

  /* ─── Espacio (4px base) ──────────────────────────────── */
  --s-1:              4px;
  --s-2:              8px;
  --s-3:              12px;
  --s-4:              16px;
  --s-5:              20px;
  --s-6:              24px;
  --s-7:              32px;
  --s-8:              40px;
  --s-9:              48px;
  --s-10:             64px;
  --s-11:             80px;
  --s-12:             96px;

  /* ─── Radius (sutil, editorial) ───────────────────────── */
  --r-sm:             4px;
  --r-md:             6px;
  --r-lg:             8px;
  --r-xl:             12px;
  --r-pill:           999px;

  /* ─── Layout ──────────────────────────────────────────── */
  --container-max:        1320px;
  --sidebar-w:            232px;
  --sidebar-w-collapsed:  52px;
  --topbar-h:             56px;

  /* ─── Motion ──────────────────────────────────────────── */
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --d-fast:           120ms;
  --d-base:           180ms;
  --d-slow:           280ms;

  /* ─── Z-index scale ───────────────────────────────────── */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-toast:          950;
  --z-modal:          900;
  --z-palette:        1000;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode
═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg:               #0F172A;
  --surface:          #1E293B;
  --surface-2:        #273449;
  --surface-sunken:   #0F172A;

  --text:             #F8FAFC;
  --text-2:           #94A3B8;
  --text-3:           #64748B;

  --accent:           #3B82F6;
  --accent-hover:     #60A5FA;
  --accent-soft:      rgba(59, 130, 246, 0.12);
  --accent-ring:      rgba(59, 130, 246, 0.28);
  --accent-2:         #2DD4BF;
  --accent-2-hover:   #99F6E4;
  --accent-2-soft:    rgba(45, 212, 191, 0.12);
  --accent-2-ring:    rgba(45, 212, 191, 0.28);

  --border:           #334155;
  --border-strong:    #475569;
  --hairline:         rgba(248, 250, 252, 0.06);

  --ok:               #4ADE80;
  --ok-soft:          rgba(74, 222, 128, 0.10);
  --warn:             #FBBF24;
  --warn-soft:        rgba(251, 191, 36, 0.10);
  --danger:           #F87171;
  --danger-soft:      rgba(248, 113, 113, 0.10);
  --info:             #60A5FA;
  --info-soft:        rgba(96, 165, 250, 0.10);
  --neutral:          #94A3B8;
  --neutral-soft:     rgba(148, 163, 184, 0.10);

  --dot-abierto:      #3B82F6;
  --dot-asignado:     #38BDF8;
  --dot-progreso:     #FBBF24;
  --dot-espera:       #A78BFA;
  --dot-resuelto:     #4ADE80;
  --dot-cerrado:      #64748B;
  --dot-eliminado:    #334155;

  --shadow-1:         0 1px 0 rgba(0, 0, 0, 0.30);
  --shadow-2:         0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(248, 250, 252, 0.04);
  --shadow-3:         0 4px 12px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(248, 250, 252, 0.04);
  --shadow-modal:     0 24px 48px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(248, 250, 252, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   Preferencia del sistema (auto si no hay setting)
═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Densidad compacta — reduce espaciado y tamaño de fuente base
═══════════════════════════════════════════════════════════════ */

:root[data-density="compact"] {
  --s-3:    8px;
  --s-4:    12px;
  --s-5:    16px;
  --s-6:    20px;
  --t-sm:   0.75rem;
  --t-base: 0.875rem;
  --t-md:   0.9375rem;
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}