/* =========================================================
   BillingTrack Design Tokens
   Fuente del sistema: designSystem-billingTrack.html
   ========================================================= */
:root {
  /* Dark-first palette — steel blue / acero moderno */
  --bg-0: #0A101A;
  --bg-1: #111827;
  --bg-2: #1A2533;
  --bg-3: #334155;
  --bg-card: rgba(17, 24, 39, 0.74);
  --bg-card-2: rgba(10, 16, 26, 0.94);

  --line: rgba(137, 166, 199, 0.09);
  --line-strong: rgba(137, 166, 199, 0.18);
  --line-bright: rgba(137, 166, 199, 0.34);

  --steel: #4C6A92;
  --steel-soft: #89A6C7;
  --steel-deep: #3D5877;

  --cyan: var(--steel);
  --cyan-soft: var(--steel-soft);
  --cyan-deep: var(--steel-deep);
  --blue: #6B89B2;
  --blue-soft: #9FB7D3;
  --blue-deep: #2A3D55;
  --indigo: #7C8FA8;
  --violet: #A8B6C8;
  --magenta: #D4A373;
  --pink: #C98B7A;
  --green: var(--steel);
  --green-soft: var(--steel-soft);
  --green-deep: var(--steel-deep);

  --success: #34D399;
  --success-soft: rgba(94, 224, 162, 0.14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --error: #F87171;
  --error-soft: rgba(248, 113, 113, 0.14);
  --info: #9FB7D3;
  --info-soft: rgba(107, 137, 178, 0.14);

  --amber: var(--warning);
  --red: var(--error);

  --text: #F8FAFC;
  --text-2: rgba(226, 232, 240, 0.72);
  --text-3: rgba(148, 163, 184, 0.65);
  --text-inverse: #0A101A;

  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 12px rgba(2, 6, 23, 0.5);
  --shadow-md: 0 12px 32px -6px rgba(2, 6, 23, 0.7);
  --shadow-lg: 0 20px 52px -10px rgba(2, 6, 23, 0.85);
  --shadow-glow: 0 0 0 1px rgba(76, 106, 146, 0.28), 0 0 28px rgba(76, 106, 146, 0.24);
  --shadow-glow-blue: 0 8px 24px rgba(61, 88, 119, 0.30), inset 0 1px 0 rgba(255,255,255,0.16);

  /* Page aliases used by the current landing */
  --page-bg: var(--bg-0);
  --page-surface: var(--bg-1);
  --page-surface-2: #0F172A;
  --page-text: var(--text);
  --page-text-2: rgba(226, 232, 240, 0.78);
  --page-text-3: rgba(148, 163, 184, 0.70);
  --page-border: rgba(148, 163, 184, 0.18);
  --page-border-strong: rgba(148, 163, 184, 0.30);
  --page-accent: var(--steel-soft);
  --page-accent-hover: var(--blue-soft);
  --page-accent-soft: rgba(76, 106, 146, 0.14);
  --page-cta: var(--blue);
  --footer-bg: #050B1A;

  /* BUTTON SIZES */

  --btn-sm-height: 36px;
  --btn-sm-padding-x: 14px;
  --btn-sm-font: 13px;
  
  --btn-md-height: 44px;
  --btn-md-padding-x: 18px;
  --btn-md-font: 14px;
  
  --btn-lg-height: 52px;
  --btn-lg-padding-x: 24px;
  --btn-lg-font: 15px;
}

html[data-theme="light"] {
  --bg-0: #F8FAFC;
  --bg-1: #FFFFFF;
  --bg-2: #F1F5F9;
  --bg-3: #E2E8F0;
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-2: rgba(246, 248, 245, 0.98);

  --line: rgba(51, 65, 85, 0.07);
  --line-strong: rgba(51, 65, 85, 0.14);
  --line-bright: rgba(51, 65, 85, 0.24);

  --steel: #3D5877;
  --steel-soft: #4C6A92;
  --steel-deep: #2A3D55;
  --cyan: var(--steel);
  --cyan-soft: var(--steel-soft);
  --cyan-deep: var(--steel-deep);

  --blue: #6B89B2;
  --blue-soft: #89A6C7;
  --blue-deep: #2A3D55;
  --indigo: #60749A;
  --violet: #7C8FA8;
  --magenta: #D4A373;
  --pink: #C98B7A;

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.10);
  --warning: #B7791F;
  --warning-soft: rgba(183, 121, 31, 0.10);
  --error: #C24135;
  --error-soft: rgba(194, 65, 53, 0.10);
  --info: #6B89B2;
  --info-soft: rgba(107, 137, 178, 0.10);

  --text: #111827;
  --text-2: rgba(17, 24, 39, 0.78);
  --text-3: rgba(71, 85, 105, 0.76);
  --text-inverse: #F8FAFC;

  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px -4px rgba(17, 24, 39, 0.10);
  --shadow-lg: 0 18px 44px -10px rgba(17, 24, 39, 0.18);
  --shadow-glow: 0 0 0 1px rgba(61, 88, 119, 0.24), 0 6px 22px rgba(61, 88, 119, 0.16);
  --shadow-glow-blue: 0 8px 22px rgba(107, 137, 178, 0.22), inset 0 1px 0 rgba(255,255,255,0.30);

  --page-bg: #F8FAFC;
  --page-surface: #FFFFFF;
  --page-surface-2: #F1F5F9;
  --page-text: #111827;
  --page-text-2: rgba(17, 24, 39, 0.78);
  --page-text-3: rgba(71, 85, 105, 0.76);
  --page-border: rgba(51, 65, 85, 0.14);
  --page-border-strong: rgba(51, 65, 85, 0.24);
  --page-accent: #3D5877;
  --page-accent-hover: #2A3D55;
  --page-accent-soft: rgba(61, 88, 119, 0.10);
  --page-cta: #3D5877;
  --footer-bg: #0A101A;
}