:root{
  /* --- Base palette --------------------------------------------------- */
  --color-primary:#2d6cdf;          /* Brava Blue      — CTAs, links, emphasis */
  --color-primary-light:#4980fd;    /* Electric Blue   — highlights, gradients */
  --color-cyan:#3cc9fe;             /* Digital Cyan    — luminous detail */
  --color-violet:#5548fc;           /* Brava Violet    — gradient endpoint */
  --color-periwinkle:#5868f5;       /* Periwinkle      — icons, graphics */

  --color-navy:#071338;             /* Deep Digital Navy — immersive sections */
  --color-midnight:#050718;         /* Midnight          — footer, overlays */
  --color-white:#ffffff;
  --color-surface-soft:#f6f8fc;     /* Cool Off-White */

  --color-text:#111827;             /* Ink */
  --color-text-muted:#4b5563;       /* Slate */
  --color-text-inverse:#ffffff;
  --color-border:#dce2ec;           /* Cool Gray */
  --color-disabled:#9ca3af;

  /* Semantic / state. Kept deliberately small — the brand palette is cool-only. */
  --color-focus:#2d6cdf;
  --color-error:#c02b3a;
  --color-error-surface:#fdf2f3;

  /* --- Semantic aliases ------------------------------------------------ */
  --surface-page:var(--color-white);
  --surface-soft:var(--color-surface-soft);
  --surface-dark:var(--color-navy);
  --surface-darkest:var(--color-midnight);
  --surface-card:var(--color-white);
  --surface-card-dark:rgba(255,255,255,.04);

  --text-heading:var(--color-text);
  --text-body:var(--color-text-muted);
  --text-on-dark:var(--color-text-inverse);
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--color-primary);

  --border-default:var(--color-border);
  --border-on-dark:rgba(255,255,255,.16);

  --action-primary-bg:var(--color-primary);
  --action-primary-fg:var(--color-white);
  --action-primary-bg-hover:#255ec9;
  --action-secondary-fg:var(--color-primary);
  --action-on-dark-bg:var(--color-white);
  --action-on-dark-fg:var(--color-text);

  /* --- Gradients & overlays -------------------------------------------- */
  --gradient-brand:linear-gradient(135deg,#3cc9fe 0%,#4980fd 45%,#5548fc 100%); /* @kind color */
  --gradient-brand-vertical:linear-gradient(180deg,#3cc9fe 0%,#4980fd 45%,#5548fc 100%); /* @kind color */
  --gradient-image-scrim:linear-gradient(90deg,rgba(5,7,24,.82) 0%,rgba(5,7,24,.35) 55%,rgba(5,7,24,.05) 100%); /* @kind color */
  --gradient-image-scrim-bottom:linear-gradient(180deg,rgba(5,7,24,0) 0%,rgba(5,7,24,.55) 60%,rgba(5,7,24,.9) 100%); /* @kind color */
}