:root {
  /* colors */
  --color-bg:        #FAFAFA;
  --color-text:      #333;
  --color-navy:      #1D3557;
  --color-navy-dark: #003366;
  --color-gold:      #FFD700;
  --color-gold-dark: #B8860B;
  --color-gray-100:  #F8F9FA;
  --color-gray-200:  #555;
  --color-gray-300:  #666;
  --color-gray-400:  #ddd;
  --color-gray-500:  #ccc;

  /* typography */
  --font-base:       'Poppins', sans-serif;
  --font-size-base:  1rem;
  --line-height:     1.6;

  /* spacing */
  --space-xs: 0.5rem;    /* ~8px */
  --space-sm: 1rem;      /* ~16px */
  --space-md: 2rem;      /* ~32px */
  --space-lg: 2.5rem;    /* ~40px */
  --space-xl: 5rem;      /* ~80px */

  /* radius & shadow */
  --radius:     0.5rem;  /* 8px */
  --shadow-sm:  0 4px 10px rgba(0,0,0,0.1);

  /* responsive breakpoints */
  --bp-xs: 360px;   /* small phones */
  --bp-sm: 576px;   /* larger phones */
  --bp-md: 768px;   /* tablets */
  --bp-lg: 992px;   /* small desktops */
  --bp-xl: 1200px;  /* large desktops */
}