/* ==========================================================================
   CHAKRESHWOR PRATIVA SAVING & CREDIT CO-OPERATIVE LTD.
   Design Tokens & Authentic Nepalese Cooperative System (Bagmati PROSCUN Inspired)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Mukta:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Brand Colors (Official Chakreshwor SACCOS Logo Identity) --- */
  --brand-blue:        #08399f; /* Main Brand Royal Blue (From Logo) */
  --brand-blue-hover:  #062c7e;
  --brand-blue-dark:   #041d54;
  --brand-blue-light:  #1d5ce5;

  --brand-green:       #01a755; /* Secondary Cooperative Green */
  --brand-green-hover: #008f48;
  --brand-green-dark:  #0a4b30;
  --brand-green-light: #34d399;

  --brand-red:         #dc2626; /* Logo Rooftop / Star Crimson */
  --brand-red-hover:   #b91c1c;

  --brand-cyan:        #00acf1;
  --brand-navy:        #051433;
  --brand-gold:        #d97706;
  
  --brand-bg-light:    #f0f5ff;
  --brand-border:      #d6e4ff;
  --brand-border-alt:  #e2e8f0;

  /* Primary Theme Aliases (MAIN: #08399f Royal Blue) */
  --primary-50:  #eef4ff;
  --primary-100: #dbe6fe;
  --primary-200: #bfd4fd;
  --primary-300: #93bbfb;
  --primary-400: #558df7;
  --primary-500: #1d5ce5;
  --primary-600: #08399f; /* Exact User Main Color */
  --primary-700: #062c7e;
  --primary-800: #041d54;
  --primary-900: #031233;

  /* Secondary Theme Aliases (SECONDARY: #01a755 Cooperative Green) */
  --secondary-50:  #ecfdf5;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-300: #6ee7b7;
  --secondary-400: #34d399;
  --secondary-500: #01a755; /* Exact User Secondary Color */
  --secondary-600: #008f48;
  --secondary-700: #0a4b30;
  --secondary-800: #06311e;
  --secondary-900: #031c11;

  /* Secondary Navy */
  --navy-800: #081e4a;
  --navy-900: #051433;
  --navy-950: #020a1c;

  /* Accent Gold & Amber */
  --accent-400: #dfb252;
  --accent-500: #c99732;
  --accent-600: #b45309;

  /* Backgrounds */
  --bg-page:       #f8fafc;
  --bg-surface:    #ffffff;
  --bg-subtle:     #f4f8ff;
  --bg-card:       #ffffff;

  --border-light:  #e2e8f0;
  --border-subtle: #e8eef8;

  /* Text Colors */
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-light:     #ffffff;

  /* Fonts */
  --font-nepali: 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif;
  --font-english: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-main: var(--font-nepali);
  --font-heading: var(--font-nepali);

  /* Spacing Scale & Fluid Section Whitespace */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Standardized Fluid Whitespace Tokens */
  --section-space-y: clamp(3.25rem, 5.5vw, 5.25rem);
  --section-space-sm: clamp(2rem, 3.5vw, 3rem);
  --card-padding: clamp(1.5rem, 2.5vw, 2.25rem);
  --card-padding-sm: clamp(1rem, 1.8vw, 1.5rem);
  --element-gap: clamp(1rem, 2vw, 1.75rem);
  --grid-gap: clamp(1.25rem, 2.2vw, 2rem);

  /* Elevation Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 16px 36px rgba(8, 57, 159, 0.14);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.18);

  /* Z-Index Scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Container */
  --container-max: 1240px;
  --container-padding: clamp(1rem, 2.5vw, 1.75rem);
}

[data-lang="en"] {
  --font-main: var(--font-english);
  --font-heading: var(--font-english);
}