/* ============================================================
   P&L Billing Solutions — UrgentFlex Liquid Design Tokens
   ============================================================ */

:root {
  /* Brand core */
  --uf-blue-900: #0A2540;
  --uf-blue-700: #0E3A6B;
  --uf-blue-500: #1E6FFF;
  --uf-blue-400: #3B8CFF;
  --uf-blue-200: #B8D4FF;
  --uf-blue-50:  #EAF2FF;

  /* Whites & neutrals */
  --uf-white:    #FFFFFF;
  --uf-snow:     #FAFBFD;
  --uf-mist:     #F2F5FA;
  --uf-fog:      #E6ECF4;
  --uf-graphite: #1A1F2C;
  --uf-slate:    #4A5468;
  --uf-silver:   #8A94A6;

  /* Semantic */
  --uf-success:  #10B981;
  --uf-warning:  #F59E0B;
  --uf-danger:   #EF4444;

  /* Liquid glass tokens */
  --glass-bg:        rgba(255, 255, 255, 0.55);
  --glass-bg-dark:   rgba(10, 37, 64, 0.45);
  --glass-border:    rgba(255, 255, 255, 0.35);
  --glass-glow:      0 0 24px rgba(30, 111, 255, 0.35);
  --glass-shadow:    0 8px 32px rgba(10, 37, 64, 0.12);
  --glass-blur:      blur(24px) saturate(180%);

  /* Elevation */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10,37,64,0.06);
  --elev-2: 0 4px 16px rgba(10,37,64,0.08);
  --elev-3: 0 12px 40px rgba(10,37,64,0.12);
  --elev-glass: 0 8px 32px rgba(10,37,64,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  --elev-glow-blue: 0 0 32px rgba(30,111,255,0.45), 0 0 80px rgba(30,111,255,0.18);

  /* Border radii */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Typography */
  --text-hero:    4.5rem;
  --text-display: 3.5rem;
  --text-h1:      2.5rem;
  --text-h2:      2rem;
  --text-h3:      1.5rem;
  --text-lead:    1.25rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-micro:   0.75rem;

  /* Spacing */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-128: 128px;
  --space-192: 192px;
  --space-section: 128px;

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  :root {
    --text-hero:    2.75rem;
    --text-display: 2.25rem;
    --text-h1:      1.875rem;
    --text-h2:      1.5rem;
    --text-h3:      1.25rem;
    --space-section: 80px;
  }
}