/**
 * SBUP CSS Custom Properties (Variables)
 * Custom color palette and typography
 * Author: SBUP Development Team
 * Version: 1.0.0
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  /* ==========================================================================
     Color Palette
     ========================================================================== */
  
  /* Background Colors */
  --background-primary: url('../images/bannerBackground.webp');
  --background-icon-gradient: linear-gradient(180deg, #FF8E0B 0%, #995507 100%);
  --primary-gradient: linear-gradient(180deg, #152157 0%, #0F1635 100%);
  --secondary-gradient: linear-gradient(0deg, #152157 0%, #0F1635 100%);
  --nirf-gradient: linear-gradient(135deg, #dee4ff4d 0%, #dde3ff4d 100%);
  
  /* Fees Section Colors */
  --fees-card-bg-1: #002581;
  --fees-card-bg-2: #002D9D;
  --fees-card-bg-3: #2C3F9B;
  --fees-card-bg-4: #083CBF;
  --fees-table-alt-bg: #ECF2FF;
  --fees-text-light: #FFFFFF;
  --fees-text-dark: #002581;
  
  /* Font Sizes */
  --fees-title-size: 48px;
  --fees-card-title-size: 24px;
  --fees-card-amount-size: 36px;
  --fees-table-title-size: 20px;
  --fees-table-data-size: 16px;
  
  /* Text Colors */
  --color-primary-white: #FFFFFF;
  --color-primary-black: #000000;
  --color-primary-text: #3248A2;
  --color-headings: #002581;
  --color-paragraph: #333333;
  --color-menu-text: #141414;
  
  /* Table Colors */
  --color-table-headers: #2C3F9B;
  
  /* Button Colors */
  --color-button: #FF8E0B;
  
  /* Additional Colors */
  --color-accent-1: #002D9D;
  --color-accent-2: #083CBF;
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  
  /* Font Family */
  --font-family-primary: 'Poppins', sans-serif;
  --font-family-secondary: 'Roboto', sans-serif;
  
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* Font Sizes - Using clamp for responsive scaling */
  --font-size-base: clamp(0.875rem, 1vw, 1rem);
  --font-size-lg: clamp(1rem, 1vw, 1.25rem);
  --font-size-1xl: clamp(1.125rem, 1.5vw, 1.125rem);
  --font-size-xl: clamp(1.125rem, 1.5vw, 1.625rem);
  --font-size-2xl: clamp(1.25rem, 4vw, 1.5rem);
  --font-size-3xl: clamp(1.5rem, 2vw, 2rem);
  --font-size-4xl: clamp(1.875rem, 2vw, 2.375rem);
  --font-size-5xl: clamp(2.25rem, 8vw, 3rem);
  
  /* About Us Section Specific Font Sizes */
  --about-title-size: 48px;
  --about-subtitle-size: 24px;
  --about-para-size: 18px;
  --about-feature-text-size: 15px;
  
  /* Line Heights */
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ==========================================================================
     Spacing - Using clamp for responsive spacing
     ========================================================================== */
  
  --space-1: clamp(0.25rem, 1vw, 0.25rem);
  --space-2: clamp(0.5rem, 1.5vw, 0.5rem);
  --space-3: clamp(0.75rem, 2vw, 0.75rem);
  --space-4: clamp(1rem, 2.5vw, 1rem);
  --space-5: clamp(1.25rem, 3vw, 1.25rem);
  --space-6: clamp(1.5rem, 3.5vw, 1.5rem);
  --space-8: clamp(2rem, 4vw, 2rem);
  --space-10: clamp(1rem, 2.5vw, 2.875rem);
  --space-12: clamp(3rem, 6vw, 3rem);
  --space-16: clamp(4rem, 8vw, 4rem);
  --space-20: clamp(5rem, 10vw, 5rem);
  --space-24: clamp(6rem, 12vw, 6rem);
  
  /* ==========================================================================
     Border Radius - Specific pixel values
     ========================================================================== */
  
  --border-radius-sm: 10px;
  --border-radius-md: 15px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;
  --border-radius-2xl: 25px;
  --border-radius-3xl: 30px;
  --border-radius-full: 50%;
  --border-radius-200: 200px;
  
  /* ==========================================================================
     Transitions
     ========================================================================== */
  
  --transition-normal: 300ms ease-in-out;
  
  /* ==========================================================================
     Component Variables
     ========================================================================== */
  
  
  /* .Container */
  --container-padding: clamp(1rem, 5.25vw, 100px);
  --inner-small-padding: 5px;

  /* End of :root */
}