/* ==========================================================================
   Design tokens — single source of truth for the visual system.
   Shared by every page. Change a value here, it propagates everywhere.

   Spacing: the site uses a base-4 spacing system — every padding, margin,
   and gap is a multiple of 4px. There are intentionally no --space-* vars;
   raw multiples of 4 keep the CSS readable while staying on the grid.
   ========================================================================== */
:root {
  /* Brand */
  --c-purple:        #6d28d9;  /* primary brand purple */
  --c-purple-hover:  #7c3aed;  /* hover / pressed state for purple text & fills */
  --c-purple-bright: #964ceb;  /* primary CTA button base (hovers to --c-purple-hover) */
  --c-violet:        #a855f7;  /* light accent — gradient endpoint with --c-purple */
  --c-teal:          #3cb6ba;  /* title underline rule */
  --c-pink:          #ff7fc1;  /* decorative rules (hero, testimonials, contact) */

  /* Ink & neutrals */
  --c-ink:        #111827;  /* headings / near-black */
  --c-ink-soft:   #374151;  /* strong body */
  --c-ink-deep:   #2d2d2d;  /* dark surfaces (footer) + photo border */
  --c-gray-600:   #4b5563;  /* body text */
  --c-gray-500:   #6b7280;  /* secondary text */
  --c-gray-400:   #9ca3af;  /* muted / captions */
  --c-white:      #fff;

  /* Surfaces & lines (lavender family, light → dark) */
  --c-surface-lavender:        #f7f4ff;  /* filled card / chip background */
  --c-border-nav:              #f0ecf8;  /* nav + mobile-menu hairlines */
  --c-border-lavender:         #ede9fe;  /* filled card outline */
  --c-border-violet:           #ddd6fe;  /* secondary button outline */
  --c-border-lavender-strong:  #d4d0e7;  /* borders/dividers on lavender surfaces */
  --c-border-violet-hover:     #a78bfa;  /* secondary button outline, hovered */
  --c-border-gray:             #e5e7eb;  /* neutral section / footer divider */

  /* Success (result callouts, green chips) */
  --c-surface-success: #f0fdf4;
  --c-border-success:  #cdeed9;
  --c-ink-success:     #166534;

  /* Amber (systems chips) */
  --c-surface-amber: #fffbeb;
  --c-ink-amber:     #92400e;

  /* Ambient background wash (fixed layer) */
  --bg-pink:  #ffe7ee;
  --bg-lilac: #eadeff;

  /* Typography */
  --font-body:    'DM Sans', sans-serif;
  --font-display: 'Playfair Display', serif;

  /* Radii */
  --radius-sm:   6px;   /* buttons, inline images/video, small thumbs */
  --radius-card: 12px;  /* cards, callouts */
  --radius-pill: 20px;  /* chips */

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.10);                       /* raised cards */
  --shadow-asset: 0 0 4px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.10);  /* screenshots & video */
}