/* ==============================================
   risePaisa Design System — Variables & Tokens
   ============================================== */

:root {
  /* ── Color Palette ─────────────────────────── */
  --color-bg:            #050B18;
  --color-bg-alt:        #070D1F;
  --color-surface:       rgba(10, 18, 38, 0.7);
  --color-surface-hover: rgba(15, 26, 55, 0.85);
  --color-primary:       #0A1226;
  --color-primary-light: #0F1A37;
  
  --color-accent:        #1da1f2;
  --color-accent-hover:  #4db8ff;
  --color-accent-dark:   #1188cc;
  --color-accent-glow:   rgba(29, 161, 242, 0.15);
  --color-accent-subtle: rgba(29, 161, 242, 0.08);
  
  --color-white:         #FFFFFF;
  --color-text:          #F1F5F9;
  --color-text-secondary:#CBD5E1;
  --color-text-muted:    #8899AC;
  --color-heading:       #FFFFFF;
  
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-light:  rgba(255, 255, 255, 0.14);
  --color-divider:       rgba(255, 255, 255, 0.07);
  
  --color-success:       #1da1f2;
  --color-warning:       #FFB020;
  --color-error:         #FF4D4D;
  --color-info:          #3B82F6;

  /* ── Category Colors ───────────────────────── */
  --color-cat-nepse:     #3B82F6;
  --color-cat-tax:       #F59E0B;
  --color-cat-saving:    #06b6d4;
  --color-cat-fintech:   #8B5CF6;
  --color-cat-personal:  #EC4899;

  /* ── Typography ────────────────────────────── */
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:        'Outfit', 'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', monospace;
  
  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.875rem;   /* 14px */
  --text-base:           1rem;       /* 16px */
  --text-lg:             1.125rem;   /* 18px */
  --text-xl:             1.25rem;    /* 20px */
  --text-2xl:            1.5rem;     /* 24px */
  --text-3xl:            1.875rem;   /* 30px */
  --text-4xl:            2.25rem;    /* 36px */
  --text-5xl:            3rem;       /* 48px */
  --text-6xl:            3.75rem;    /* 60px */
  
  --leading-tight:       1.2;
  --leading-snug:        1.35;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;
  
  --weight-normal:       400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* ── Spacing ───────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout ────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;
  --nav-height:     72px;

  /* ── Border Radius ─────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 40px rgba(29, 161, 242, 0.25);
  --shadow-glow-lg: 0 0 80px rgba(29, 161, 242, 0.15), 0 0 30px rgba(29, 161, 242, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(29,161,242,0.2), 0 0 30px rgba(29,161,242,0.08);
  --glass-bg:    rgba(10, 18, 38, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur:  blur(16px);

  /* ── Transitions & Motion System ───────────── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast:    150ms;   /* 120-160ms for fast micro-interactions */
  --duration-normal:  200ms;   /* 180-220ms for standard interactions */
  --duration-base:    200ms;
  --duration-slow:    280ms;   /* 250-320ms for large transitions */
  --duration-slower:  380ms;

  /* ── Z-index ───────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-whatsapp:  600;
}