/* variables.css — design tokens */
:root {
  /* Brand colors */
  --color-purple-dark:    #472366;
  --color-purple-mid:     #7200e5;
  --color-purple-bright:  #6b0cde;
  --color-purple-grad:    #9929ea;
  --color-purple-end:     #5808fb;
  --color-purple-light:   #e9e6f2;
  --color-purple-lighter: #f2f0f7;

  /* Accent (secondary CTA) */
  --color-accent-start:   #4bc4d5;
  --color-accent-end:     #a4cd39;

  /* Neutrals */
  --color-dark:           #121217;
  --color-dark-2:         #1d1d22;
  --color-text:           #343434;
  --color-text-muted:     #6c6c89;
  --color-text-faint:     #3f3f50;
  --color-bg:             #ffffff;
  --color-bg-alt:         #f7f7f8;
  --color-border:         #e0dcea;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--color-purple-dark), var(--color-purple-mid), var(--color-purple-end));
  --grad-accent:  linear-gradient(135deg, var(--color-accent-start), var(--color-accent-end));
  --grad-hero:    linear-gradient(135deg, #2d1640 0%, #472366 40%, #6b0cde 100%);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Manrope', 'Montserrat', system-ui, sans-serif;
  --font-size-base: 15px;
  --line-height:  1.7;

  /* Sizing */
  --container-max: 1200px;
  --section-pad:   70px;
  --section-pad-sm: 40px;
  --gap:           30px;
  --gap-sm:        16px;

  /* Radii */
  --radius-btn:  100px;
  --radius-card: 20px;
  --radius-sm:   8px;

  /* Shadows */
  --shadow-card:  0 28px 50px rgba(0, 0, 0, 0.10);
  --shadow-nav:   0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-btn:   0 8px 24px rgba(114, 0, 229, 0.30);
  --shadow-btn-accent: 0 8px 24px rgba(75, 196, 213, 0.35);

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