/**
 * Holistic Marketing — sistema de diseño unificado (Crédito · Pendientes · Creativos)
 * Tipografía: Inter. Marca: naranja cálido #F97316. Fondos: crema / piedra cálida.
 */
:root {
  --text-xs:   clamp(0.7rem, 0.68rem + 0.15vw, 0.78rem);
  --text-sm:   clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.84rem + 0.25vw, 0.95rem);
  --text-lg:   clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  --text-xl:   clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  --text-3xl:  clamp(1.65rem, 1.2rem + 1.4vw, 2.35rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3);
  --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6);
  --sp-8: var(--space-8); --sp-10: var(--space-10); --sp-12: var(--space-12);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-full: 9999px;
  --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl); --r-full: var(--radius-full);

  --ease-golden: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --tr: var(--transition-interactive);
  --tr-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-width: 260px;
}

:root, [data-theme="light"] {
  --color-bg: #f5f3ee;
  --color-surface: #faf9f6;
  --color-surface-2: #ffffff;
  --color-surface-offset: #efede8;
  --color-surface-offset-2: #e8e5df;
  --color-surface-dynamic: #dfdcd6;
  --color-divider: #d6d3cc;
  --color-border: #ccc9c2;

  --color-text: #1c1a15;
  --color-text-muted: #6b6960;
  --color-text-faint: #a8a69f;
  --color-text-inverse: #faf9f6;

  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-primary-active: #c2410c;
  --color-primary-soft: rgba(249, 115, 22, 0.12);
  --color-primary-highlight: #ffedd5;
  --color-primary-glow: rgba(249, 115, 22, 0.15);

  --color-success: #15803d;
  --color-success-soft: rgba(21, 128, 61, 0.1);
  --color-warning: #b45309;
  --color-warning-soft: rgba(180, 83, 9, 0.1);
  --color-error: #c53030;
  --color-error-soft: rgba(197, 48, 48, 0.1);
  --color-info: #1d4ed8;
  --color-info-soft: rgba(29, 78, 216, 0.1);

  --green: #16a34a;
  --green-bg: rgba(22, 163, 74, 0.1);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.08);
  --orange2: #d97706;
  --orange2-bg: rgba(217, 119, 6, 0.1);
  --purple: #7c3aed;
  --purple-bg: rgba(124, 58, 237, 0.1);
  --cyan: #0891b2;
  --cyan-bg: rgba(8, 145, 178, 0.1);
  --pink: #db2777;
  --pink-bg: rgba(219, 39, 119, 0.1);

  --color-purple: #7c3aed;
  --color-purple-soft: rgba(124, 58, 237, 0.1);
  --color-blue: #2563eb;
  /* Recharts/SVG no leen var(): gasto/ads = --color-blue; fee secundario = --color-purple */
  --color-blue-soft: rgba(37, 99, 235, 0.1);
  --color-teal: #0d9488;
  --color-teal-soft: rgba(13, 148, 136, 0.1);

  --shadow-sm: 0 1px 2px rgba(28, 26, 21, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 26, 21, 0.08);
  --shadow-lg: 0 12px 32px rgba(28, 26, 21, 0.12);
  --shadow-xl: 0 20px 48px rgba(28, 26, 21, 0.16);

  --sidebar-bg: #ffffff;
  --sidebar-text: #64748b;
  --sidebar-text-muted: #94a3b8;
  --sidebar-text-active: #0f172a;
  --sidebar-hover: #f1f5f9;
  --sidebar-active: rgba(249, 115, 22, 0.12);
  --sidebar-border: #e5e7eb;
}

[data-theme="dark"] {
  --color-bg: #141310;
  --color-surface: #1a1915;
  --color-surface-2: #211f1b;
  --color-surface-offset: #1d1b17;
  --color-surface-offset-2: #252320;
  --color-surface-dynamic: #302e2a;
  --color-divider: #2a2826;
  --color-border: #3a3835;

  --color-text: #d4d2cc;
  --color-text-muted: #8a887f;
  --color-text-faint: #5a5852;
  --color-text-inverse: #1a1915;

  --color-primary: #fb923c;
  --color-primary-hover: #f97316;
  --color-primary-active: #ea580c;
  --color-primary-soft: rgba(251, 146, 60, 0.14);
  --color-primary-highlight: #3a2a1a;
  --color-primary-glow: rgba(251, 146, 60, 0.2);

  --color-success: #4ade80;
  --color-success-soft: rgba(74, 222, 128, 0.12);
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.12);
  --color-error: #f87171;
  --color-error-soft: rgba(248, 113, 113, 0.12);
  --color-info: #60a5fa;
  --color-info-soft: rgba(96, 165, 250, 0.12);

  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.1);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.1);
  --orange2: #fbbf24;
  --orange2-bg: rgba(251, 191, 36, 0.1);
  --purple: #c084fc;
  --purple-bg: rgba(192, 132, 252, 0.1);
  --cyan: #22d3ee;
  --cyan-bg: rgba(34, 211, 238, 0.1);
  --pink: #f472b6;
  --pink-bg: rgba(244, 114, 182, 0.1);

  --color-purple: #c084fc;
  --color-purple-soft: rgba(192, 132, 252, 0.12);
  --color-blue: #60a5fa;
  --color-blue-soft: rgba(96, 165, 250, 0.12);
  --color-teal: #2dd4bf;
  --color-teal-soft: rgba(45, 212, 191, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.38);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.48);

  --sidebar-bg: #ffffff;
  --sidebar-text: #64748b;
  --sidebar-text-muted: #94a3b8;
  --sidebar-text-active: #0f172a;
  --sidebar-hover: #f1f5f9;
  --sidebar-active: rgba(251, 146, 60, 0.14);
  --sidebar-border: #e5e7eb;
}

/* Tipografía / render (referencia visual: Pendientes → Crédito + Creativos) */
html,
body,
#root {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

table {
  font-family: inherit;
}

#root .hm-app {
  font-family: var(--font-body) !important;
}

#root .hm-app h1,
#root .hm-app h2,
#root .hm-app h3,
#root .hm-app h4,
#root .hm-app h5,
#root .hm-app h6 {
  font-family: var(--font-display) !important;
}

#root .hm-app table th,
#root .hm-app table td {
  font-family: var(--font-body) !important;
}

.recharts-wrapper,
.recharts-wrapper svg {
  font-family: var(--font-body) !important;
}

.recharts-wrapper text,
.recharts-cartesian-axis-tick-value,
.recharts-legend-item-text,
.recharts-label {
  font-family: var(--font-body) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #141310;
    --color-surface: #1a1915;
    --color-surface-2: #211f1b;
    --color-surface-offset: #1d1b17;
    --color-surface-dynamic: #302e2a;
    --color-divider: #2a2826;
    --color-border: #3a3835;
    --color-text: #d4d2cc;
    --color-text-muted: #8a887f;
    --color-text-faint: #5a5852;
    --color-primary: #fb923c;
    --color-primary-hover: #f97316;
    --color-primary-soft: rgba(251, 146, 60, 0.14);
    --green: #4ade80;
    --red: #f87171;
    --orange2: #fbbf24;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28);
    --sidebar-bg: #ffffff;
    --sidebar-active: rgba(251, 146, 60, 0.14);
  }
}