/* ============================================================
   QRPoupe — Design Tokens
   ============================================================ */

:root {
  /* Brand */
  --color-primary:        #2D7A4F;
  --color-primary-dark:   #256743;
  --color-primary-light:  #E8F5EE;
  --color-primary-lighter:#F5FBF8;

  /* Background */
  --color-background: #FFFFFF;
  --color-surface:    #F8F9FA;
  --color-card:       #FFFFFF;

  /* Text */
  --color-heading:    #111827;
  --color-text:       #374151;
  --color-text-light: #6B7280;
  --color-muted:      #9CA3AF;

  /* Border */
  --color-border: #E5E7EB;

  /* Success / Icons */
  --color-success: #2D7A4F;

  /* Border Radius */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  /* Shadows */
  --shadow-card:  0 10px 35px rgba(17, 24, 39, .06);
  --shadow-hover: 0 18px 45px rgba(17, 24, 39, .10);
  --shadow-phone: 0 40px 90px rgba(17, 24, 39, .18);
  --shadow-sm:    0 8px 20px  rgba(17, 24, 39, .05);
  --shadow-md:    0 12px 30px rgba(17, 24, 39, .08);
  --shadow-lg:    0 25px 60px rgba(17, 24, 39, .12);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --section-py: 96px;

  /* Transitions */
  --transition: 0.22s ease;
}

@media (max-width: 768px) {
  :root {
    --section-py: 64px;
  }
}