/*
 * HomeFlow Design System v1.0 — tokens.css
 * Valores copiados tal cual del design system de Félix Agosto (Engine Creative Studio), 26/10/2026;
 * solo se le dieron saltos de línea para que se pueda leer.
 * NO editar a mano: la fuente de verdad es tokens.json del design system. Si falta un token,
 * se pide que se agregue allá y se vuelve a copiar este archivo.
 * Tema: data-theme="light" | "dark" en <html> (el oscuro todavía no se activa en el CRM).
 */
:root, [data-theme="light"] {
  --brand-primary: #2D80F4;
  --brand-royal: #1246B3;
  --brand-navy: #0C2958;
  --brand-deep: #081B36;
  --brand-white: #FFFFFF;
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-muted: #F1F5F9;
  --bg-surface-raised: #FFFFFF;
  --bg-sidebar: #0C2958;
  --bg-selected: #EAF2FE;
  --bg-overlay: rgba(8,27,54,0.56);
  --border-subtle: #E2E8F0;
  --border-control: #8392A7;
  --border-strong: #475569;
  --text-heading: #0C2958;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #AFC3E3;
  --text-link: #1A64D4;
  --action: #1D68DA;
  --action-hover: #1246B3;
  --action-pressed: #0E3A96;
  --on-action: #FFFFFF;
  --action-subtle: #EAF2FE;
  --focus-ring: #2D80F4;
  --status-success: #15803D;
  --status-success-subtle: #ECFDF3;
  --status-warning: #B45309;
  --status-warning-subtle: #FFF7E8;
  --status-error: #C81E1E;
  --on-danger: #FFFFFF;
  --status-error-subtle: #FEF2F2;
  --status-info: #1A64D4;
  --status-info-subtle: #EAF2FE;
  --status-neutral: #475569;
  --status-neutral-subtle: #F1F5F9;
  --disabled-bg: #F1F5F9;
  --disabled-text: #94A3B8;
  --skeleton: #E2E8F0;
  --chart-1: #2D80F4;
  --chart-2: #0F9488;
  --chart-3: #C7741A;
  --chart-4: #1246B3;
  --chart-5: #D14D72;
  --chart-grid: #E2E8F0;
  --chart-comparison: #B8C4D4;
  --shadow-xs: 0 1px 2px rgba(12,41,88,0.06);
  --shadow-sm: 0 1px 3px rgba(12,41,88,0.08), 0 1px 2px rgba(12,41,88,0.04);
  --shadow-md: 0 6px 16px -4px rgba(12,41,88,0.12), 0 2px 4px rgba(12,41,88,0.05);
  --shadow-lg: 0 16px 40px -8px rgba(12,41,88,0.18), 0 4px 8px rgba(12,41,88,0.06);
  --shadow-xl: 0 32px 64px -16px rgba(12,41,88,0.28);
}
[data-theme="dark"] {
  --brand-primary: #2D80F4;
  --brand-royal: #1246B3;
  --brand-navy: #0C2958;
  --brand-deep: #081B36;
  --brand-white: #FFFFFF;
  --bg-canvas: #081B36;
  --bg-surface: #0E2547;
  --bg-surface-muted: #12305A;
  --bg-surface-raised: #153562;
  --bg-sidebar: #061530;
  --bg-selected: #13336A;
  --bg-overlay: rgba(2,8,20,0.72);
  --border-subtle: #1E3A63;
  --border-control: #5A7399;
  --border-strong: #94A3B8;
  --text-heading: #FFFFFF;
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: #9DB2D6;
  --text-link: #6AA8FF;
  --action: #5B9BF8;
  --action-hover: #82B3FA;
  --action-pressed: #A7C9FC;
  --on-action: #081B36;
  --action-subtle: #13336A;
  --focus-ring: #6AA8FF;
  --status-success: #4ADE80;
  --status-success-subtle: #0F3A2A;
  --status-warning: #FBBF24;
  --status-warning-subtle: #3A2C0A;
  --status-error: #F87171;
  --on-danger: #081B36;
  --status-error-subtle: #3F1518;
  --status-info: #6AA8FF;
  --status-info-subtle: #13336A;
  --status-neutral: #CBD5E1;
  --status-neutral-subtle: #1E3A63;
  --disabled-bg: #12305A;
  --disabled-text: #5D7499;
  --skeleton: #1E3A63;
  --chart-1: #4C8FF0;
  --chart-2: #1BA597;
  --chart-3: #C27C22;
  --chart-4: #6A7FE6;
  --chart-5: #D25E80;
  --chart-grid: #1E3A63;
  --chart-comparison: #3A557F;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,0.6);
  --shadow-lg: 0 16px 40px -8px rgba(0,0,0,0.7);
  --shadow-xl: 0 32px 64px -16px rgba(0,0,0,0.8);
}
:root{
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-offset: 2px;
  --z-base: 0;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-dropdown: 1000;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-deliberate: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-flow: cubic-bezier(0.65, 0, 0.35, 1);
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  --container-app: 1440px;
  --container-site: 1200px;
  --container-text: 680px;
  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --topnav-height: 64px;
  --hit-target: 44px;
  --opacity-disabled: 0.48;
  --opacity-hover-overlay: 0.08;
  --font-display: Manrope, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.display-xl{font-family:var(--font-display);font-size:64px;line-height:68px;font-weight:700;letter-spacing:-0.03em}
.display-lg{font-family:var(--font-display);font-size:48px;line-height:54px;font-weight:700;letter-spacing:-0.025em}
.h1{font-family:var(--font-display);font-size:36px;line-height:44px;font-weight:700;letter-spacing:-0.02em}
.h2{font-family:var(--font-display);font-size:30px;line-height:38px;font-weight:700;letter-spacing:-0.02em}
.h3{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:600;letter-spacing:-0.015em}
.h4{font-family:var(--font-display);font-size:20px;line-height:28px;font-weight:600;letter-spacing:-0.01em}
.h5{font-family:var(--font-display);font-size:18px;line-height:26px;font-weight:600;letter-spacing:-0.005em}
.h6{font-family:var(--font-display);font-size:16px;line-height:24px;font-weight:600;letter-spacing:0}
.kpi-lg{font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:700;letter-spacing:-0.02em}
.kpi-md{font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.015em}
.body-lg{font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:400;letter-spacing:0}
.body{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:400;letter-spacing:0}
.body-sm{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0}
.label{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500;letter-spacing:0}
.button{font-family:var(--font-body);font-size:15px;line-height:20px;font-weight:600;letter-spacing:0}
.nav{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500;letter-spacing:0}
.table-head{font-family:var(--font-body);font-size:13px;line-height:18px;font-weight:600;letter-spacing:0.01em}
.caption{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0}
.overline{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.08em}
.badge{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.01em}