:root {
  /* Colors */
  --color-primary: #006AFF;       /* azure — primary CTAs, links, active accents, icon strokes */
  --color-primary-dark: #001027;  /* deep navy — footer, deepest surfaces */
  --color-deep-blue: #0F2A55;     /* deep blue — the single dark accent panel (Perché Aivy) */
  --color-accent: #B8D4FF;        /* light azure — secondary CTA on dark, underlines, small badges */
  --color-bg-soft: #F6F8F6;       /* softest neutral surface (inputs, chat background) */
  --color-tint: #E8EFEA;          /* light sage tint — card/icon/tag background on light surfaces */
  --color-bg-alt: #F3F6F4;        /* light sage surface for alternating sections */
  --color-ink: #323A4D;           /* body text on light surfaces (softened slate, lets the blue stand out) */
  --color-white: #FFFFFF;
  --color-muted: #5A6275;         /* secondary/supporting text */
  --color-border: #E1E7E3;        /* hairline borders/dividers */

  /* Typography */
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  --font-size-h1: 48px;
  --font-size-h2: 32px;
  --font-size-h3: 22px;
  --font-size-body: 16px;
  --font-size-caption: 13px;

  /* Spacing (multiples of 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Effects */
  --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-deep-blue) 100%); /* azure -> deep blue, main CTAs */
  --gradient-highlight: linear-gradient(90deg, var(--color-primary) 0%, var(--color-deep-blue) 25%, var(--color-primary) 50%, var(--color-deep-blue) 75%, var(--color-primary) 100%); /* two azure/deep-blue periods: the hero highlighted phrase, used at background-size 200% for the shimmer loop */
  --glow-dark: radial-gradient(circle at 88% 0%, rgba(0,106,255,0.22), transparent 55%),
               radial-gradient(circle at 0% 100%, rgba(184,212,255,0.08), transparent 45%); /* soft azure light on dark surfaces */

  /* Radius */
  --radius-control: 999px; /* pill buttons */
  --radius-card: 20px;     /* cards, containers */
  --radius-icon: 14px;     /* icon tiles */
}

/* Reference component styles — adapt as needed */

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-control);
  border: none;
  padding: 13px 26px;
}

.btn-secondary {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-control);
  border: none;
  padding: 13px 26px;
}

.btn-ghost {
  background: var(--color-white);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border);
  padding: 13px 26px;
}