:root {
  /* ── Brand: Navy (primary) ──────────────────────────── */
  --navy-900: #000A40;   /* core brand navy — headings, primary text, buttons */
  --navy-800: #0C1550;   /* dashboard panel base */
  --navy-700: #131F62;
  --navy-600: #16246E;   /* dashboard panel top */
  --navy-500: #1E256C;
  --navy-400: #1D2A72;   /* hero glow navy */

  /* ── Brand: Yellow (accent) ─────────────────────────── */
  --yellow-500: #FFC700; /* core accent — CTAs, highlights, logo mark */
  --yellow-600: #F0B400;
  --yellow-700: #E6B400; /* CTA hover */
  --yellow-800: #B88900;
  --yellow-300: #FFD338;
  --yellow-200: #FFE88A;
  --yellow-100: #FFF8E8; /* soft yellow surface */

  /* ── Neutrals (slate) ───────────────────────────────── */
  --slate-900: #0F172A;
  --slate-700: #334155;
  --slate-600: #4B5563;  /* body copy */
  --slate-500: #64748B;  /* muted / captions */
  --slate-200: #E2E8F0;  /* borders */
  --slate-100: #F1F5F9;  /* hairline borders */
  --white: #FFFFFF;

  /* ── Surfaces ───────────────────────────────────────── */
  --surface-cream: #FFFCF8; /* hero gradient top */
  --surface-lilac: #F7F8FD; /* hero gradient bottom / section bg */
  --surface-indigo-50: #F5F7FF;
  --surface-indigo-100: #F2F5FC;

  /* ── Semantic status ────────────────────────────────── */
  --success: #34D399;
  --danger:  #E40014;
  --danger-strong: #BF000F;

  /* ── Semantic aliases ───────────────────────────────── */
  --text-strong:   var(--navy-900);
  --text-body:     var(--slate-600);
  --text-muted:    var(--slate-500);
  --text-on-navy:  var(--white);
  --text-on-yellow:var(--navy-900);

  --bg-page:       var(--white);
  --bg-subtle:     var(--surface-lilac);
  --bg-cream:      var(--surface-cream);
  --bg-navy:       var(--navy-900);
  --bg-yellow-soft:var(--yellow-100);

  --accent:        var(--yellow-500);
  --accent-hover:  var(--yellow-700);

  --border:        var(--slate-200);
  --border-subtle: var(--slate-100);

  /* hero ambient gradient used across marketing sections */
  --hero-gradient:
    radial-gradient(ellipse 120% 70% at 50% -18%, rgba(255,199,0,0.10), transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 118%, rgba(29,42,114,0.09), transparent 62%),
    linear-gradient(180deg, #FFFCF8 0%, #FFFFFF 45%, #F7F8FD 100%); /* @kind other */
}