/* ==========================================
   FONT FACE
   ========================================== */

@font-face {
  font-family: 'General Sans Variable';
  src: url('../assets/fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 100 900; /* Variable font weight range */
  font-display: swap;
  font-style: normal;
}


/* ==========================================
   CSS RESET & BASE STYLES
   ========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px; /* Base for rem calculations */
  scroll-behavior: smooth;
}

body {
  font-family: 'General Sans Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 480;
  color: var(--text-primary);
  background-color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================== */

:root {
  /* === COLORS === */
  --text-primary: #031741;
  --text-secondary: #5B6D8A;
  --primary-blue: #29A5F7;
  --white: #FFFFFF;
  --light-blue: #EAF4FB;
  --light-yellow: #FBF7EA;
  --light-green: #EAFBF1;
  --light-grey: #BBC4D2;
  --light-cyan: #EDF8FB;
  --light-purple: #F5EAFB;

  /* === SPACING (8pt scale) === */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-7: 3.5rem;   /* 56px */
  --space-8: 4rem;     /* 64px */
  --space-9: 4.5rem;   /* 72px */
  --space-10: 5rem;    /* 80px */
  --space-11: 7.5rem;    /* 120px */

  /* === BORDER RADIUS === */
  --radius-sm: 0.5rem;   /* 8px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px */
  --radius-xl: 2rem;     /* 32px */

  /* === BREAKPOINTS (for reference in JS or media queries) === */
  --bp-mobile-sm: 320px;
  --bp-mobile-lg: 540px;
  --bp-tablet: 834px;
  --bp-desktop-sm: 1024px;
  --bp-desktop-md: 1280px;

  /* === TYPOGRAPHY === */
  /* Heading weight */
  --font-weight-heading: 560;
  /* Body weight */
  --font-weight-body: 480;

  /* TYPE STYLES - Replace these with your exact values from Figma */
  /* Format: font-size / line-height */
  
  /* Example: --font-h1: clamp(2rem, 4vw, 3.5rem); */
  
  /* TYPE STYLES */
  --font-h1: clamp(3rem, calc(5.5vw + 1.5rem), 4.5rem);
  --font-h2: clamp(2.5rem, calc(4vw + 1rem), 4rem);
  --font-h3: clamp(2rem, calc(2.5vw + 0.5rem), 3.5rem);
  --font-h4: clamp(1.625rem, calc(2vw + 1rem), 2.25rem);
  --font-h5: clamp(1.25rem, calc(1vw + 0.5rem), 1.375rem);
  --font-h6: clamp(1.125rem, calc(1vw + 0.5rem), 1.375rem);
  --font-body-lg: clamp(1.125rem, calc(1vw + 0.5rem), 1.25rem);
  --font-body: clamp(1rem, calc(1vw + 0.5rem), 1.125rem);
  --font-body-sm: clamp(0.875rem, calc(0.5vw + 0.75rem), 1rem);
  --font-caption: clamp(0.875rem, calc(0.5vw + 0.75rem), 1rem);

  /* Line heights for each style */
  --line-height-h1: 1.2;
  --line-height-h2: 1.2;
  --line-height-h3: 1.2;
  --line-height-h4: 1.2;
  --line-height-h5: 1.2;
  --line-height-h6: 1.2;
  --line-height-body-lg: 1.6;
  --line-height-body: 1.6;
  --line-height-body-sm: 1.6;
  --line-height-caption: 1.6;
}


/* ==========================================
   TYPOGRAPHY CLASSES
   ========================================== */

h1, .h1 {
  font-size: var(--font-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-heading);
}

h2, .h2 {
  font-size: var(--font-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-heading);
}

h3, .h3 {
  font-size: var(--font-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-heading);
}

h4, .h4 {
  font-size: var(--font-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-heading);
}

h5, .h5 {
  font-size: var(--font-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-heading);
}

h6, .h6 {
  font-size: var(--font-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-heading);
}


.body-lg {
  font-size: var(--font-body-lg);
  line-height: var(--line-height-body-lg);
}

p, .body {
  font-size: var(--font-body);
  line-height: var(--line-height-body);
}

.body-sm {
  font-size: var(--font-body-sm);
  line-height: var(--line-height-body-sm);
}

.caption {
  font-size: var(--font-caption);
  line-height: var(--line-height-caption);
}


/* ==========================================
   UTILITY CLASSES
   ========================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Color utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-blue { color: var(--primary-blue); }

.bg-white { background-color: var(--white); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-light-green { background-color: var(--light-green); }
.bg-light-cyan { background-color: var(--light-cyan); }
.bg-light-purple { background-color: var(--light-purple); }


/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

/* Mobile Small: 320-540px (default, mobile-first) */

/* Mobile Large: 540-834px */
@media (min-width: 540px) {
  
}

/* Tablet: 834-1024px */
@media (min-width: 834px) {
  .container {
    padding: 0 var(--space-4);
  }
}

/* Desktop Small: 1024-1280px */
@media (min-width: 1024px) {
  
}

/* Desktop Medium: 1280px+ */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-6);
  }
}