:root {
  /* Colors — core */
  --c-dark:        #282828;
  --c-white:       #ffffff;
  --c-blue:        #3485fd;
  --c-blue-light:  #609cf5;
  --c-pink:        #f772d0;
  --c-border:      #d0d5dd;
  --c-text-muted:  #6b7280;
  --c-grey:        #f8f8f8;

  /* Colors — extended palette (card & integration icon colors) */
  --c-green:       #34d399;
  --c-orange:      #f59e0b;
  --c-red:         #f43f5e;
  --c-teal:        #14b8a6;
  --c-purple:      #8b5cf6;

  /* Fonts */
  --font-display: 'Lexend', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Fragment Mono', monospace;

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  /* Section padding */
  --section-py: var(--space-2xl);

  /* Max widths */
  --width-content: 1440px;

  /* Border radius */
  --radius-pill:   100px;
  --radius-btn:    48px;
  --radius-card:   32px;
  --radius-icon:   20px;

  /* Card gradients - use cases */
  --card-blue:   linear-gradient(#d9e4ff 0%, #e6f7ff 44.14%, #fff 91%);
  --card-purple: linear-gradient(#e8d9ff 0%, #fee6ff 44.14%, #fff 91%);
  --card-green:  linear-gradient(#b0f7d1 0%, #d1ffec 44.14%, #fff 91%);
  --card-orange: linear-gradient(#ffeaD9 0%, #fff8dc 44.14%, #fff 91%);
  --card-pink:   linear-gradient(#ffd9d9 0%, #fae6e6 44.14%, #fff 91%);
  --card-teal:   linear-gradient(#c9f2f5 0%, #daf4f7 44.14%, #fff 91%);
  --card-grey:   linear-gradient(#eaecf0 0%, #f8f8f8 44.14%, #fff 91%);

  /* Section backgrounds */
  --section-bg-1: linear-gradient(#f0f4fa 0%, #fff 100%);
  --section-bg-2: linear-gradient(#f8f8f8 0%, #fff 100%);
  --badge-bg:     linear-gradient(#f0f3f7 0%, #fff 100%);

  /* Body text (card descriptions, muted copy) */
  --c-body:             #4b5563;

  /* Card system */
  --card-border:        rgba(255,255,255,0.8);
  --shadow-card:        0 2px 16px rgba(0,0,0,0.07);
  --shadow-card-hover:  0 12px 40px rgba(0,0,0,0.12);

  /* Grid gaps */
  --gap-cards:   28px;   /* card grids: 2/3/4 col */
  --gap-text:    40px;   /* text/link grids */
  --gap-content: 60px;   /* 2-col content splits */

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