/* design variables and tokens */
:root {
  /* Color Palette - Premium Calm & Energetic Bright Green + Blue + White */
  --bg-primary: #FFFFFF;       /* White background (as requested) */
  --bg-secondary: #F7FBFA;     /* Very light background (as requested) */
  --bg-tertiary: #EDF4F2;      /* Light border/contrast accent */
  --bg-card: #FFFFFF;          /* Cards background (as requested) */
  
  --text-primary: #10231D;     /* Dark text (as requested) */
  --text-secondary: #485A54;   /* Muted grey-green body text */
  --text-muted: #8E9492;       /* Light gray for metadata and small labels */
  
  --color-accent: #19C37D;     /* Bright Green (as requested) */
  --color-accent-hover: #149E65;
  --color-accent-light: #EBF8F4; /* Very light sage-green */
  
  --color-blue: #1677FF;       /* Bright Blue (as requested) */
  --color-blue-hover: #096DD9;
  --color-blue-light: #E6F7FF; /* Very light blue */
  
  --color-border: rgba(30, 34, 33, 0.08); /* Sophisticated hairline borders */
  --color-border-hover: rgba(30, 34, 33, 0.15);
  
  /* Shadows - Minimal & Organic */
  --shadow-sm: 0 2px 8px rgba(30, 34, 33, 0.03);
  --shadow-md: 0 8px 24px rgba(30, 34, 33, 0.05);
  --shadow-lg: 0 16px 40px rgba(30, 34, 33, 0.08);
  
  /* Border Radii - Rounded Premium Feel */
  --radius-pill: 9999px;
  --radius-hero: 32px;
  --radius-card: 20px;
  --radius-button: 12px;
  --radius-image: 16px;
  
  /* Typography Scale */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.75rem;    /* 44px */
  --fs-4xl: 3.75rem;    /* 60px */
  --fs-5xl: 4.5rem;     /* 72px */
  
  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;
  
  /* Grid & Max Widths */
  --max-width-content: 1200px;
  --max-width-narrow: 800px;
  
  /* Transition / Animation Dynamics */
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease-out;
}

/* Fluid spacing and typography overrides for mobile/tablet viewports */
@media (max-width: 768px) {
  :root {
    --space-sm: 0.875rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.25rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4.5rem;
    
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --space-xs: 0.35rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.75rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3.5rem;
    
    --fs-lg: 1.15rem;
    --fs-xl: 1.35rem;
    --fs-2xl: 1.6rem;
    --fs-3xl: 1.85rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 2.75rem;
  }
}