/* ===== Global Box Sizing Reset ===== */
*, ::after, ::before {
    box-sizing: border-box;
}

:root {
  /* ===== Base Colors ===== */
  --color-black: #000000;
  --color-black-secondary: #1D1C1E;
  
  --color-white: #FFFFFF;
  --color-accent: #D1EE51;
  --color-accent-light: #9BCB2380;
  --color-purple: #d3c0ee;
  --color-purple-solid:#622FAB;
  --color-yellow: #F5D670;
  --color-light-green: #EDF5CE;
  
  /* ===== Gray Scale ===== */
  --color-gray-100: #F8F9FA;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #CED4DA;
  --color-gray-500: #ADB5BD;
  --color-gray-600: #6C757D;
  --color-gray-700: #495057;
  --color-gray-800: #343A40;
  --color-gray-900: #212529;
  
  /* ===== Opacity Helpers ===== */
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);
  --color-white-05: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-black-secondary-50: rgba(29, 28, 30, 0.5);
  
  
  /* ===== Semantic Colors ===== */
  --color-bg: var(--color-black);
  --color-text: var(--color-white);
  --color-text-muted: var(--color-white-50);
  --color-text-dark: var(--color-gray-900);
  --color-primary: var(--color-accent);
  --color-secondary: var(--color-teal);
  --color-highlight: var(--color-yellow);
  --color-card-bg: var(--color-white);
  --color-card-border: #622fab80;
  --color-card-hover: var(--color-white-10);

  
  /* ===== Component Colors ===== */
  --browser-ui-dark: #0C0C0DF0;
  --navbar-bg: rgba(29, 28, 30, 0.5);
  --navbar-bg-solid: var(--color-black-secondary);
  --border-color: var(--color-white-20);
  
  /* ===== Spacing Scale ===== */
  --spacing-xxs: 0.25rem;   /* 4px */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-md-2: 1.125rem; /* 18px */
  --spacing-md-3: 1.25rem; /* 20px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xl-2: 2.5rem;  /* 40px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 3.75rem;  /* 60px */
  --spacing-4xl: 4rem;     /* 64px */
  --spacing-5xl: 6rem;     /* 96px */
  --spacing-6xl: 6.25rem;  /* 100px */
  
/* ===== Page Padding ===== */
--page-inline-padding-sm: 20px;
--page-inline-padding-md: 40px;
--page-inline-padding-lg: 100px;



  /* ===== Layout ===== */
  --container-padding: var(--spacing-md);
  --section-padding: var(--spacing-2xl) var(--spacing-md);
  
  /* ===== Component Specific ===== */
  --button-padding: var(--spacing-sm) var(--spacing-lg);
  --card-padding: var(--spacing-lg);
  --input-padding: var(--spacing-sm) var(--spacing-md);
  --service-card-image-min-height: 300px;
  
  /* Responsive Padding */
  @media (min-width: 768px) {
    --container-padding: var(--spacing-lg);
    --section-padding: var(--spacing-3xl) var(--spacing-lg);
  }
  
  @media (min-width: 1200px) {
    --container-padding: var(--spacing-xl);
    --section-padding: var(--spacing-4xl) var(--spacing-xl);
  }
}