/**
 * ConsultaDeSaldo — CSS Custom Properties
 * Design System Variables
 *
 * @package ConsultaDeSaldo
 */

:root {
  /* ─── Brand Colors ─────────────────────────────────────────── */
  --color-primary:        #0F4C81;
  --color-primary-dark:   #0A3558;
  --color-primary-light:  #1A6BB5;
  --color-secondary:      #00B894;
  --color-secondary-dark: #00966F;
  --color-accent:         #FF6B35;
  --color-warning:        #FDCB6E;
  --color-danger:         #E74C3C;

  /* ─── Neutrals ─────────────────────────────────────────────── */
  --color-bg:             #F8FAFB;
  --color-surface:        #FFFFFF;
  --color-border:         #E2E8F0;
  --color-text:           #1A202C;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* ─── Typography ───────────────────────────────────────────── */
  --font-heading: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ─── Spacing Scale ────────────────────────────────────────── */
  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */

  /* ─── Border Radius ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-max:    1200px;
  --container-narrow: 800px;

  /* ─── Transitions ──────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;

  /* ─── Z-Index Scale ────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown: 50;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
}