/* ==========================================================================
   Akvo Lab - Design System Core Variables (Light Theme)
   ========================================================================== */

/* Google Fonts Imports */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ==========================================================================
     Colors - HSL (Supporting Alpha Transparency)
     ========================================================================== */
  
  /* Primary Theme Backgrounds */
  --bg-deep: hsl(240, 100%, 99%);             /* Neutral/Background Main (#f9f9ff) */
  --bg-surface: hsl(204, 100%, 97%);          /* Tertiary Light Section Background (#f0f9ff) */
  --bg-card: rgba(255, 255, 255, 0.7);        /* Base white glassmorphic card background */
  --bg-card-hover: rgba(255, 255, 255, 0.85);  /* Hover state for glassmorphic cards */

  /* Brand Accent Colors */
  --color-primary: hsl(207, 100%, 26%);       /* Laboratory Blue (#004a87) */
  --color-primary-hover: hsl(207, 100%, 20%); /* Darker Laboratory Blue hover (#003663) */
  --color-primary-glow: rgba(0, 74, 135, 0.15); /* Soft primary glow for shadows & focus */

  --color-accent: hsl(199, 95%, 60%);         /* Water Light Blue/Cyan Secondary (#38bdf8) */
  --color-accent-hover: hsl(199, 95%, 52%);   /* Intense Accent hover (#0ea5e9) */
  --color-accent-glow: rgba(56, 189, 248, 0.3); /* Soft secondary glow for accents & buttons */

  /* Text Colors */
  --text-primary: hsl(217, 33%, 17%);         /* Dark Slate Text (#1e293b) */
  --text-secondary: hsl(218, 10%, 29%);       /* Secondary Text (#424750) */
  --text-muted: hsl(218, 8%, 51%);            /* Muted / Placeholder Text (#7c838e) */
  --text-inverse: hsl(0, 0%, 100%);           /* Contrasting light text on solid buttons */

  /* Borders & Glassmorphic Shadows */
  --border-glass: rgba(255, 255, 255, 0.3);          /* Glassmorphic border */
  --border-glass-hover: rgba(0, 74, 135, 0.2);       /* Subtle blue-tinted border on hover */
  --border-light: hsl(220, 20%, 90%);                /* Standard border (#e2e8f0) */
  
  --shadow-glass: 0 8px 32px 0 rgba(0, 74, 135, 0.06);     /* Sophisticated blueish glass shadow */
  --shadow-glass-hover: 0 12px 40px 0 rgba(0, 74, 135, 0.12); /* Extended hover shadow */
  --shadow-input-focus: 0 0 0 3px rgba(56, 189, 248, 0.25);   /* Focus outline shadow glow */

  /* Glassmorphic Properties */
  --backdrop-blur: 12px;                      /* Backdrop blur intensity */

  /* Gradients */
  --gradient-text: linear-gradient(135deg, var(--color-primary) 30%, var(--color-accent) 100%);
  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

  /* ==========================================================================
     Typography & Spacing
     ========================================================================== */
  
  /* Font Families */
  --font-family-title: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-md: 1.125rem;    /* 18px */
  --font-lg: 1.25rem;     /* 20px */
  --font-xl: 1.5rem;      /* 24px */
  --font-2xl: 2rem;       /* 32px */
  --font-3xl: 2.5rem;     /* 40px */
  --font-4xl: 3rem;       /* 48px */
  
  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Grid Layout Tokens */
  --container-max-width: 1280px;
  --grid-gap: 24px;
  
  --section-padding-desktop: 80px 0;
  --section-padding-mobile: 48px 0;

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease;
  --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}