/* ==========================================================================
   Design Tokens & CSS Variables - Eazy Communications
   ========================================================================== */

:root {
  /* Colors - Primary Brand */
  --primary-deep: #2868b2;
  --primary-bright: #0094d1;
  --primary-cyan: #00aeef;
  --primary-gradient: linear-gradient(180deg, #2868b2 0%, #0094d1 100%);
  --primary-gradient-horizontal: linear-gradient(90deg, #2868b2 0%, #0094d1 100%);
  --primary-gradient-reverse: linear-gradient(180deg, #0094d1 0%, #2868b2 100%);
  
  /* Colors - Accents */
  --accent-yellow-light: #f5e2a6;
  --accent-yellow-gold: #FFD400;
  --badge-popular: #0551d3;
  --badge-seller: #16ad70;
  --badge-value: #e35d25;

  /* Colors - Text & Neutrals */
  --color-black: #000000;
  --color-dark: #121212;
  --color-charcoal: #343434;
  --color-gray-dark: #373737;
  --color-gray-muted: rgba(55, 55, 55, 0.7);
  --color-gray-light: rgba(55, 55, 55, 0.5);
  --color-white: #ffffff;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-60: rgba(250, 250, 250, 0.6);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-15: rgba(255, 255, 255, 0.15);

  /* Colors - Borders & Surfaces */
  --border-card: #efefef;
  --border-light: rgba(0, 0, 0, 0.08);
  --border-glass: rgba(255, 255, 255, 0.3);
  --bg-pill-subtle: linear-gradient(90deg, #f3f5f7 0%, #c4e7ff 100%);
  --bg-questions: linear-gradient(197.8deg, rgb(49, 112, 184) 7.9%, rgb(52, 97, 174) 83.7%);

  /* Typography */
  --font-heading: 'Questrial', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-meta: 'Inter', sans-serif;

  /* Layout & Spacing */
  --max-content-width: 1240px;
  --section-px: 100px;
  --section-py: 100px;

  /* Radii */
  --radius-xs: 5px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-card-hover: 0 16px 36px rgba(0, 148, 209, 0.12);
  --shadow-testimonial: -32px 36px 12px rgba(0, 0, 0, 0.04), 0px 2px 8px rgba(0, 0, 0, 0.07);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}