/* ===============================
   SHG UI TOKENS (VARIABLES)
   =============================== */
:root {
  /* --- 1. BRAND COLORS --- */
  --color-primary: #0F766E;   /* Teal Base */
  --color-secondary: #105c38; /* Darker Green */
  
  /* Finance Theme Colors */
  --shg-finance-green: #004d40; /* Deep Green for Header */
  --shg-text-white: #ffffff;
  
  /* Status Colors */
  --color-success: #1E9E5A;
  --color-warning: #F2B705;
  --color-danger:  #E53935;
  --color-info:    #3B82F6;

  /* --- 2. BACKGROUNDS & BORDERS --- */
  --color-bg:      #F6F7FB;   /* Page Background */
  --color-card:    #FFFFFF;   /* Card / Sidebar Background */
  --color-border:  #E2E5EA;   /* Light Grey Border */

  /* --- 3. TYPOGRAPHY --- */
  --text-main:     #1A1A1A;   /* Primary Text */
  --text-muted:    #8A8A8A;   /* Secondary / Label Text */
  
  /* --- 4. SPACING --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* --- 5. DIMENSIONS (LAYOUT) --- */
  --radius: 10px;             /* Card Radius */
  
  --shg-header-height: 60px;      /* Fixed Header Height */
  --shg-sidebar-width: 260px;     /* Sidebar Width */
  --shg-bottom-nav-height: 60px;  /* Mobile Bottom Nav */
 
}