:root {
  /* === Backgrounds (light theme) === */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F7F9FB;
  --bg-card:      #FFFFFF;
  --bg-soft:      #F0F4F7;

  /* === Accent (cyan/turquoise — как на референсе) === */
  --accent:        #00BCDB;
  --accent-hover:  #00A6C2;
  --accent-light:  #E6F8FC;
  --accent-grad:   linear-gradient(135deg, #00BCDB 0%, #2DD4F6 100%);
  --accent-grad-hover: linear-gradient(135deg, #00A6C2 0%, #22C0E0 100%);

  /* === Text === */
  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-on-accent: #FFFFFF;

  /* === Borders === */
  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-accent: rgba(0, 188, 219, 0.4);

  /* === States === */
  --success: #10B981;
  --error:   #EF4444;

  /* === Shadows === */
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card:  0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 4px 24px rgba(0, 188, 219, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-glow:  0 0 60px rgba(0, 188, 219, 0.18);

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.75rem;

  /* === Spacing === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Layout === */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --section-pad:   var(--space-24) 0;

  /* === Border Radius === */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* === Z-index === */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.75rem;
    --text-2xl: 1.25rem;
    --section-pad: var(--space-16) 0;
    --container-pad: var(--space-4);
  }
}