/*
  LastPick - CSS Variables
  This file contains all global CSS variables for colors, layout, spacing, etc.
*/

:root {
  color-scheme: light;
  /* Brand Colors (Unchanged) */
  --dark-green: #0f5b3c;
  --deep-green: #083826;
  --leaf-green: #a7d46f;
  --cream: #fffdf7;
  --warm-cream: #f8f3e7;
  --gold: #d6b25e;
  --text: #152f24;
  --muted: #53665c;
  --light-muted: #8a9b93; /* New variable for subtle text */
  --line: rgba(15, 91, 60, 0.12);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem); /* 16px -> 40px */
  --header-height: 72px;
  --section-gap: clamp(2rem, 6vw, 4rem); /* REFINEMENT: Reduced gap between sections for a more cohesive flow. */
  --section-y-mobile: clamp(1.75rem, 5vw, 2.5rem); /* REFINEMENT: Further reduced vertical padding on mobile for a tighter layout. */
  --section-y-smallest-mobile: clamp(1.75rem, 4vw, 2.25rem); /* NEW: Added for 320px screens */
  --section-y: clamp(2.5rem, 5vw, 4rem); /* REFINEMENT: Adjusted desktop padding for better rhythm. */

  /* Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-xxl: 3rem;    /* 48px */

  /* Borders & Radius */
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;

  /* Shadows & Transitions */
  --shadow-sm: 0 4px 12px rgba(15, 91, 60, 0.06);
  --shadow-md: 0 6px 12px rgba(15, 91, 60, 0.12);
  --shadow-lg: 0 24px 48px rgba(15, 91, 60, 0.12); /* New variable for stronger shadow */
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography (Unchanged) */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', var(--font-sans);

  /* --- Font Variables --- */
  --font-primary: 'Sora', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* PREMIUM POLISH STYLES */
  --shadow-xl: 0 32px 64px rgba(15, 91, 60, 0.16);
}