/* ==========================================================================
   2° CONGRESO INTERNACIONAL DE SALUD MENTAL PERINATAL - MORELOS
   Design System Tokens & CSS Variables
   ========================================================================== */

:root {
  /* Color Palette (Official Branding) */
  --bg-main: #f3efe6;          /* Soft institutional beige */
  --bg-card: #ffffff;          /* Card background */
  --bg-dark: #2a1538;          /* Dark purple footer/hero background */
  
  --primary-purple: #8534b5;   /* Primary institutional purple */
  --primary-purple-hover: #6d2796;
  --primary-purple-light: #f4eafd;
  
  --accent-orange: #fd8606;    /* Secondary CTA / Highlight */
  --accent-orange-hover: #e07200;
  
  --accent-magenta: #f81c80;   /* Vibrant accent / key details */
  --accent-magenta-light: #fde8f2;
  
  --accent-olive: #a1b500;     /* Subtitles / Category tags */
  --accent-yellow: #fabf06;    /* Soft deadline alert badges */
  --accent-red: #ff3131;       /* Urgent alert badges / deadlines */
  
  --accent-cyan: #11b5ea;      /* Interactive links / Card borders */
  --accent-cyan-hover: #0d96c4;
  --accent-cyan-light: #e6f7fc;

  /* Neutral Text Colors */
  --text-dark: #221c28;        /* Main headings and dark text */
  --text-body: #3c3446;        /* Regular body copy */
  --text-muted: #6b6277;       /* Subtitles and timestamps */
  --text-light: #ffffff;       /* Light text on dark background */

  /* Borders & Dividers */
  --border-light: rgba(133, 52, 181, 0.12);
  --border-medium: rgba(133, 52, 181, 0.25);
  --border-focus: #11b5ea;

  /* Typography */
  --font-heading: 'Outfit', 'Sansation', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(42, 21, 56, 0.06);
  --shadow-md: 0 6px 18px rgba(42, 21, 56, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 21, 56, 0.12);
  --shadow-glow: 0 0 20px rgba(248, 28, 128, 0.25);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Widths */
  --container-max: 1240px;
  --header-height: 84px;
}