/**
 * Uthini design tokens – aligned to branding/ logo palette
 * Logo: orange #FFC577, purple #8503B0 / #9900CC, cyan #73ECFF / #BFFFF6, magenta #E600E2
 */
:root {
  /* Brand colours from logo */
  --color-primary: #8503B0;
  --color-secondary: #9900CC;
  --color-accent: #5c0390;
  --color-highlight: #73ECFF;
  --color-highlight-alt: #FFC577;
  --color-background: #faf8fc;
  --color-surface: #ffffff;
  --color-text: #1a0a24;
  --color-text-muted: #5c4d66;
  /* Hero: gradient matches logo (purple → cyan) */
  --hero-gradient: linear-gradient(145deg, #5c0390 0%, #8503B0 35%, #9900CC 70%, #0d7a8a 100%);
  --hero-overlay: rgba(92, 3, 144, 0.85);

  /* Typography */
  --font-heading: "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Spacing and layout */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --max-width: 72rem;
  --header-height: 7rem;

  /* Breakpoints (use in media queries) */
  --bp-sm: 30rem;      /* 480px – phone */
  --bp-md: 48rem;      /* 768px – tablet */
  --bp-md-down: 47.9375rem;  /* just below tablet */
  --bp-lg: 64rem;      /* 1024px – desktop */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-normal: 0.25s var(--ease-out);
}