/* ============================================================
   SDL Advisory — Color tokens
   Base palette + semantic aliases. Derived verbatim from the
   production stylesheet (sdl-advisory.css).
   ============================================================ */
:root {
  /* ---------- Base: Navy (brand core) ---------- */
  --navy-900: #011627;   /* darkest — footer */
  --navy-800: #022136;   /* dark — hero / CTA / dark cards */
  --navy-700: #0A1929;   /* near-black — body text */

  /* ---------- Base: Neutrals ---------- */
  --white:    #FFFFFF;
  --cream:    #F4EFE6;   /* warm section background */
  --grey-50:  #F9FAFB;   /* cool page background */
  --border-cream: #E5E0D5;

  /* ---------- Base: Teal (accent) ---------- */
  --teal-500: #2DD4BF;   /* primary accent */
  --teal-400: #5EEAD4;   /* soft / hover accent */
  --teal-100: #D6F7F1;   /* accent tint (icon boxes) */
  --teal-700: #0F766E;   /* deep teal (gradient partner) */
  --teal-ink: #04241F;   /* text/icons on teal */

  /* ---------- Base: Support ---------- */
  --yellow-300: #FDE047; /* highlight / mark / badge */
  --slate-500:  #5B6B7E; /* muted text on light */
  --slate-300:  #94A8BD; /* muted text on dark */

  /* ---------- Base: Topic-tile accent set ---------- */
  --tile-teal:    #0D9488;  --tile-teal-bg:   #E0F9F7;
  --tile-red:     #DC2626;  --tile-red-bg:    #FEE8E5;
  --tile-purple:  #9333EA;  --tile-purple-bg: #F3E8FF;
  --tile-amber:   #D97706;  --tile-amber-bg:  #FEF3C7;
  --tile-blue:    #2563EB;  --tile-blue-bg:   #DBEAFE;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  --bg-page:        var(--grey-50);
  --bg-dark:        var(--navy-800);
  --bg-darker:      var(--navy-900);
  --surface-card:   var(--white);
  --surface-cream:  var(--cream);

  --text-body:      var(--navy-700);
  --text-heading:   var(--navy-800);
  --text-muted:     var(--slate-500);
  --text-on-dark:   var(--white);
  --text-muted-on-dark: var(--slate-300);

  --accent:         var(--teal-500);
  --accent-hover:   var(--teal-400);
  --accent-tint:    var(--teal-100);
  --accent-ink:     var(--teal-ink);

  --highlight:      var(--yellow-300);

  --border:         var(--border-cream);
  --border-on-dark: rgba(255, 255, 255, 0.08);
  --border-on-dark-strong: rgba(255, 255, 255, 0.22);

  /* Focus ring */
  --ring: var(--teal-500);
}