:root{
  /* Primary structural */
  --ao-navy:#001BB7;
  --ao-blue:#0046FF;
  --ao-orange:#FF8040;

  /* Surfaces */
  --ao-white:#FFFFFF;
  --ao-sky:#F2F9FF;          /* soft surface — replaces cream */
  --ao-sky-tile:#E7F1FF;     /* icon tiles */

  /* Text + neutrals */
  --ao-ink:#33363F;          /* body — never pure black */
  --ao-mid:#8A8F98;          /* muted */
  --ao-border:#E6E8EC;
  --ao-on-navy:#CFE0FF;      /* light-on-navy body */

  /* Semantic aliases */
  --ao-bg:var(--ao-white);
  --ao-surface:var(--ao-white);
  --ao-surface-soft:var(--ao-sky);
  --ao-surface-dark:var(--ao-navy);
  --ao-text:var(--ao-ink);
  --ao-text-muted:var(--ao-mid);
  --ao-text-heading:var(--ao-navy);
  --ao-text-link:var(--ao-blue);
  --ao-text-on-dark:#FFFFFF;
  --ao-text-on-dark-mute:var(--ao-on-navy);

  /* Focus */
  --ao-focus:var(--ao-orange);

  /* Signature-device colors — glows, ticks, dots */
  --ao-glow-orange:rgba(255,128,64,0.45);
  --ao-glow-blue:rgba(0,70,255,0.35);
  --ao-dot:rgba(0,70,255,0.16);

  /* Card hover shadow — the signature blue-tint elevation */
  --ao-hover-shadow:0 10px 30px rgba(0,70,255,0.08);
}