/* Root variables for the website */
@layer base {
  :root {
    /* Background colors */

    /* Landing page and Hero Section */
    --hero-bg: #1717e7;
    --hero-section-primary: #c6e2ff; 
    --hero-section-secondary: #75E6DA;
    --hero-section-tertiary: #ffffff;
    --hero-text-primary: #ffffff;
    --hero-text-secondary: #003366;
    --hero-text-tertiary: #004477;

    /* Hero Text Color */
    --hero-text-black: #1d1d1d;
    --text-pitch-black: #000000;


    /* Product Pages Pallette */
    --productPageBackground: #000;
    --productPageBackgroundContrast: #111;
    --productPageText: #1d1d1d;
    --productPageTextWhite: #fff;

    --pages-background-secondary: #75E6DA;
    --pages-background-tertiary: #e0efff;

    /* blue */
    --website-bg-color: #1717e7;
    --blue: #2c5491;
    --light-blue: #c6e2ff; 
    --v-light-blue: #e0efff; 
    --vv-light-blue: #f9fcff;
    --dark-blue: #003366;

    /* Form colors */
    --form-light-color: #fdfdfd;
    
    /* Greyscale colors */
    --dark: #342E37;
    --dspro-bgcolor: rgba(19, 27, 38, 1);
    --grey: #eeeeee;
    --light-grey: #eeeeee;
    --dark-grey: #e1e1e1;
    --darkergrey: #999999;

    /* Basic colors */
    --white: #ffffff;
    --light: #F9F9F9;

    /* Additional colors */
    --red: #DB504A;
    --yellow: #FFCE26;
    --light-yellow: #FFF2C6;
    --orange: #FD7238;
    --light-orange: #FFE0D3;

    /* Layout dimensions */
    --sidebar-width: 180px;


    /* Border size */
    --bbsize: 2px;

    /* Demand Side Pages */
    --brand-bg: #1717e7;
    --brand-font: #ffffff;
    --brand-line: #F9F9F9; 

    /* Default Font Size */
    font-size: 16px;

    /* Default fonts */
    --default-font-family: "Noto Sans", sans-serif; /* Set your preferred font family */
    --default-font-size: 16px;
    --default-line-height: 1.5;
    --default-font-weight: 400;
    --default-font-optical-sizing: auto;
    --default-font-variation-settings: "wdth" 100;

    --font-size-xs: 0.75rem;  /* Extra Small (12px) */
    --font-size-sm: 0.875rem; /* Small (14px) */
    --font-size-md: 1rem;     /* Medium (16px, default size) */
    --font-size-lg: 1.25rem;  /* Large (20px) */
    --font-size-xl: 1.5rem;   /* Extra Large (24px) */
    --font-size-2xl: 2rem;    /* Extra Extra Large (32px) */
    --font-size-3xl: 3rem;    /* 3XL (48px) */
    --font-size-4xl: 4rem;    /* 4XL (64px) */
    --font-size-5xl: 5rem;    /* 5XL (80px) */
    --font-size-8xl: 8rem;    /* 8XL (144px) */
    --font-size-10xl: 10rem;    /* 5XL (160px) */

    --hero-font-landing: "Noto Sans", sans-serif; 
    
    /* Added for sidebar */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    /* sidebar light */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --primary-color: #2980b9;
    --secondary-color: #27ae60;
    --text-color: #f5f5f5;

    /* Add dark mode variables */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
  }
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: var(--font-size-md);
  font-family: var(--default-font-family);
}

/* Tailwind-compatible custom class */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}