:root{
  /* ---- Brand blue (from the logo script) ---- */
  --blue-950:#0a1450;
  --blue-900:#0c1a5e;
  --blue-800:#0f2178;
  --blue-700:#14288c; /* PRIMARY brand blue */
  --blue-600:#1f38ad;
  --blue-500:#2f4bcf;
  --blue-400:#5a72e0;
  --blue-300:#94a5ec;
  --blue-200:#c3cdf5;
  --blue-100:#e0e6fa;
  --blue-50:#eef1fc;

  /* ---- Brand orange (capsule + CARWASH) ---- */
  --orange-800:#a34a06;
  --orange-700:#c85c0b;
  --orange-600:#e06d10;
  --orange-500:#f07818; /* PRIMARY accent / CTA */
  --orange-400:#f7913f;
  --orange-300:#fbb173;
  --orange-200:#fdd2a8;
  --orange-100:#fde8d3;
  --orange-50:#fff5eb;

  /* ---- Neutrals ---- */
  --white:#ffffff;
  --gray-950:#0f1117;
  --gray-900:#191c24;
  --gray-800:#282c37;
  --gray-700:#414553;
  --gray-600:#5b6070;
  --gray-500:#7a7f90;
  --gray-400:#a3a8b6;
  --gray-300:#cdd1db;
  --gray-200:#e4e7ee;
  --gray-100:#f1f3f7;
  --gray-50:#f8f9fc;

  /* ---- Semantic status ---- */
  --green-500:#1e9e5a;
  --green-100:#dcf3e6;
  --amber-500:#f0a818;
  --amber-100:#fdeecb;
  --red-500:#d64533;
  --red-100:#fbe0dc;

  /* ================= Semantic aliases ================= */
  /* Text */
  --text-strong:var(--blue-700);   /* headings — brand blue */
  --text-body:var(--gray-800);
  --text-muted:var(--gray-600);
  --text-subtle:var(--gray-500);
  --text-inverse:var(--white);
  --text-on-accent:var(--white);
  --text-link:var(--orange-600);
  --text-link-hover:var(--orange-700);

  /* Surfaces */
  --surface-page:var(--white);
  --surface-muted:var(--gray-50);
  --surface-card:var(--white);
  --surface-brand:var(--blue-700);
  --surface-brand-deep:var(--blue-900);
  --surface-accent:var(--orange-500);
  --surface-accent-soft:var(--orange-50);
  --surface-brand-soft:var(--blue-50);

  /* Borders */
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-brand:var(--blue-200);
  --border-focus:var(--blue-500);

  /* Interactive — primary (orange CTA) */
  --btn-primary-bg:var(--orange-500);
  --btn-primary-bg-hover:var(--orange-600);
  --btn-primary-bg-active:var(--orange-700);
  --btn-primary-fg:var(--white);
  /* Interactive — secondary (blue) */
  --btn-secondary-bg:var(--blue-700);
  --btn-secondary-bg-hover:var(--blue-800);
  --btn-secondary-bg-active:var(--blue-900);
  --btn-secondary-fg:var(--white);

  --focus-ring:0 0 0 3px color-mix(in srgb, var(--blue-500) 45%, transparent);
}