/* ================================================
   VARIABLES
   Contains all custom properties for theming,
   fluid typography, and fluid spacing.
================================================ */
:root {
  /* Colors */
  --clr-primary:      #2d6a4f;
  --clr-primary-lt:   #52b788;
  --clr-primary-dk:   #1b4332;
  --clr-accent:       #d4a017;
  --clr-danger:       #e63946;
  --clr-text:         #1a1a1a;
  --clr-text-muted:   #6b7280;
  --clr-bg:           #fafaf8;
  --clr-surface:      #ffffff;
  --clr-border:       #e5e7eb;
  --clr-thumb-active: #2d6a4f;

  /* Border Radius */
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        20px;
  --radius-round:     50%;

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:        0 8px 30px rgba(0,0,0,0.10);
  --shadow-lg:        0 16px 50px rgba(0,0,0,0.13);
  --shadow-floating:  0 12px 40px rgba(45, 106, 79, 0.2);

  /* Animation */
  --transition-fast:  0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:       0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-sans:        'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:     'Brosta', serif;

  /* Fluid Spacing Scale (320px to 1440px viewport) */
  --space-3xs: clamp(0.125rem, 0.107rem + 0.089vw, 0.25rem); /* 2px -> 4px */
  --space-2xs: clamp(0.25rem, 0.214rem + 0.179vw, 0.5rem);   /* 4px -> 8px */
  --space-xs:  clamp(0.5rem, 0.429rem + 0.357vw, 1rem);      /* 8px -> 16px */
  --space-sm:  clamp(0.75rem, 0.643rem + 0.536vw, 1.5rem);   /* 12px -> 24px */
  --space-md:  clamp(1rem, 0.857rem + 0.714vw, 2rem);        /* 16px -> 32px */
  --space-lg:  clamp(1.5rem, 1.286rem + 1.071vw, 3rem);      /* 24px -> 48px */
  --space-xl:  clamp(2rem, 1.714rem + 1.429vw, 4rem);        /* 32px -> 64px */
  --space-2xl: clamp(3rem, 2.571rem + 2.143vw, 6rem);        /* 48px -> 96px */
  --space-3xl: clamp(4rem, 3.429rem + 2.857vw, 8rem);        /* 64px -> 128px */

  /* Fluid Typography Scale (320px to 1440px viewport) */
  --font-xs:   clamp(0.75rem, 0.714rem + 0.179vw, 0.875rem); /* 12px -> 14px */
  --font-sm:   clamp(0.875rem, 0.839rem + 0.179vw, 1rem);    /* 14px -> 16px */
  --font-base: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);    /* 16px -> 18px */
  --font-lg:   clamp(1.125rem, 1.054rem + 0.357vw, 1.375rem);/* 18px -> 22px */
  --font-xl:   clamp(1.25rem, 1.107rem + 0.714vw, 1.75rem);  /* 20px -> 28px */
  --font-2xl:  clamp(1.5rem, 1.286rem + 1.071vw, 2.25rem);   /* 24px -> 36px */
  --font-3xl:  clamp(1.75rem, 1.393rem + 1.786vw, 3rem);     /* 28px -> 48px */
  --font-4xl:  clamp(2rem, 1.429rem + 2.857vw, 4rem);        /* 32px -> 64px */
}