/* ════════════════════════════════════════════════════════════
   HUMAN Design System — Centralized Tokens (HUMAN OS Standard)
   Fuente de Verdad: HUMAN CRM & HUMAN Finanzas
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  /* ── 1. SUPERFICIES Y SHELL ── */
  --surface-shell: #090A0C;
  --surface-sidebar: #08090B;
  --surface-app: #F6F6F4;
  --surface-card: #FFFFFF;
  --surface-muted: #F1F1EF;
  --surface-subtle: #ECECEE;

  /* ── 2. COLOR PRIMARIO E IDENTIDAD HUMAN ── */
  --color-primary: #1E2E53;
  --color-primary-hover: #16223E;
  --color-primary-light: rgba(30, 46, 83, 0.08);
  --color-brand-red: #89162E;
  --color-brand-orange: #EF7A12;

  /* ── 3. COLORES SEMÁNTICOS UNIFICADOS ── */
  --color-success: #059669;
  --color-success-bg: rgba(16, 185, 129, 0.12);
  --color-success-border: rgba(16, 185, 129, 0.25);

  --color-warning: #EF7A12;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-warning-border: rgba(245, 158, 11, 0.25);

  --color-danger: #89162E;
  --color-danger-bg: rgba(239, 68, 68, 0.12);
  --color-danger-border: rgba(239, 68, 68, 0.25);

  --color-neutral: #6E6E73;
  --color-neutral-bg: rgba(110, 110, 115, 0.10);
  --color-neutral-border: rgba(110, 110, 115, 0.20);

  /* ── 4. JERARQUÍA DE TEXTO ── */
  --text-primary: #111111;
  --text-secondary: #6E6E73;
  --text-tertiary: #98989D;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.65);
  --text-on-dark-subtle: rgba(255, 255, 255, 0.35);

  /* ── 5. BORDES ── */
  --border-subtle: rgba(0, 0, 0, 0.055);
  --border-default: rgba(0, 0, 0, 0.08);
  --border-focus: #1E2E53;
  --border-dark-shell: rgba(255, 255, 255, 0.06);
  --border-dark-hover: rgba(255, 255, 255, 0.12);

  /* ── 6. SOMBRAS ── */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.025);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.045);
  --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-shell: -4px 0 20px rgba(0, 0, 0, 0.15);

  /* ── 7. RADIOS DE CURVATURA ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-shell: 20px;

  /* ── 8. DIMENSIONES DE LAYOUT ── */
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 68px;
  --header-height: 60px;
  --app-max-width: 1600px;

  /* ── 9. TIPOGRAFÍA ── */
  --font-family: 'Cairo', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Mapeo de compatibilidad con código existente */
  --bg: var(--surface-app);
  --surface: var(--surface-card);
  --surface2: var(--surface-muted);
  --border: var(--border-default);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--color-primary);
  --blue-bg: var(--color-primary-light);
  --green: var(--color-success);
  --green-bg: var(--color-success-bg);
  --yellow: var(--color-warning);
  --yellow-bg: var(--color-warning-bg);
  --red: var(--color-danger);
  --red-bg: var(--color-danger-bg);
  --glass: rgba(255, 255, 255, 0.85);
}

/* ════════════════════════════════════════════════════════════
   MODO OSCURO (DARK MODE) — DEFAULT CUANDO NO TIENE .light
   ════════════════════════════════════════════════════════════ */
html:not(.light), body:not(.light), :root:not(.light) {
  --surface-shell: #090A0C;
  --surface-sidebar: #0B0D11;
  --surface-app: #12141A;
  --surface-card: #181B22;
  --surface-muted: #1F232D;
  --surface-subtle: #272C38;
  --surface-hover: rgba(255, 255, 255, 0.04);

  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-focus: #4F6BFF;

  --color-primary-light: rgba(79, 107, 255, 0.15);
  --color-success-bg: rgba(16, 185, 129, 0.18);
  --color-warning-bg: rgba(245, 158, 11, 0.18);
  --color-danger-bg: rgba(239, 68, 68, 0.18);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);

  --bg: #12141A;
  --surface: #181B22;
  --surface2: #1F232D;
  --border: rgba(255, 255, 255, 0.10);
  --text: #F3F4F6;
  --muted: #9CA3AF;
  --glass: rgba(24, 27, 34, 0.85);
}