/* ==========================================================================
   Step4ward Design System - CSS Custom Properties
   ==========================================================================
   Brand tokens for step4ward.es - a mentorship organization
   for women in tech in Spain.
   ========================================================================== */

:root {
  /* ---- Colors: Primary ---- */
  --s4w-primary: #19116F;
  --s4w-primary-light: #2A1F9E;
  --s4w-primary-dark: #0E0A4A;

  /* ---- Colors: Accent ---- */
  --s4w-accent: #FF3976;
  --s4w-accent-light: #FF6B9A;
  --s4w-accent-dark: #E6225F;

  /* ---- Colors: Secondary ---- */
  --s4w-secondary: #8C52FF;
  --s4w-secondary-light: #A47AFF;
  --s4w-secondary-dark: #7035E0;

  /* ---- Colors: Background ---- */
  --s4w-bg-light: #F8F7FC;
  --s4w-bg-white: #FFFFFF;

  /* ---- Colors: Text ---- */
  --s4w-text: #1A1A2E;
  --s4w-text-light: #6B6B80;
  --s4w-text-inverse: #FFFFFF;

  /* ---- Colors: UI ---- */
  --s4w-border: #E5E5EE;
  --s4w-shadow: rgba(25, 17, 111, 0.08);
  --s4w-shadow-hover: rgba(25, 17, 111, 0.15);
  --s4w-overlay: rgba(25, 17, 111, 0.6);

  /* ---- Typography: Font Family ---- */
  --s4w-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Typography: Fluid Font Sizes ---- */
  --s4w-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --s4w-font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --s4w-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --s4w-font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --s4w-font-size-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --s4w-font-size-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --s4w-font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);

  /* ---- Spacing Scale ---- */
  --s4w-space-xs: 0.5rem;
  --s4w-space-sm: 1rem;
  --s4w-space-md: 1.5rem;
  --s4w-space-lg: 2rem;
  --s4w-space-xl: 3rem;
  --s4w-space-2xl: 3.5rem;
  --s4w-space-3xl: 5rem;

  /* ---- Layout ---- */
  --s4w-container-max: 1200px;
  --s4w-container-padding: 1.5rem;
  --s4w-header-height: 80px;

  /* ---- Borders & Radii ---- */
  --s4w-border-radius: 8px;
  --s4w-border-radius-lg: 16px;

  /* ---- Motion ---- */
  --s4w-transition: 0.3s ease;
}