/* base.css — tokens de marca FacturaLo (navy + naranja, como flo/cfdi). CARGAR PRIMERO. (DESIGN.md §2) */

:root {
  /* Marca */
  --navy: #0d1b4b;
  --navy-deep: #07112e;
  --navy-mid: #132160;
  --orange: #f97316;
  --orange-hot: #ea580c;
  --gold-bright: #fdba74; /* naranja claro (compat con reglas que referencian --gold-bright) */
  --teal: #0ea5e9;
  --teal-dark: #0369a1;
  --green: #16a34a;
  --red: #ef4444;

  /* Topbar (navy) + acento de marca en RGB (naranja) para el header.css */
  --brand-accent-rgb: 249, 115, 22; /* = --orange */
  --topbar-c1: #0b1c62;
  --topbar-c2: #0d1b4b;
  --topbar-c3: #132160;

  /* Escala de grises (light mode) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-700: #334155;

  /* Tipografía */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Sora', 'DM Sans', sans-serif;

  /* Sombras */
  --shadow-card: 0 1px 6px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-modal: 0 25px 50px rgba(0,0,0,.25);

  /* Radios */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* Dark mode (opt-in): body.dark sobrescribe la escala de grises. Light es el default. */
body.dark {
  --gray-50:  #0f1117;
  --gray-100: #1a1d27;
  --gray-200: #252836;
  --gray-300: #353849;
  --gray-400: #6b7280;
  --gray-500: #9ca3af;
  --gray-700: #e2e8f0;
  background: #0f1117;
  color: #e2e8f0;
}

/* Base */
body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--gray-50);
  color: var(--gray-700);
}
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, .heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
}
body.dark h1, body.dark h2, body.dark h3, body.dark .heading { color: #e2e8f0; }

a { color: var(--teal-dark); }

/* Focus visible (DESIGN §16.1) */
*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}