/* MAIDO! AI LABO — Color tokens (sampled from the brand business cards) */
:root{
  /* Brand blue ramp */
  --blue-50:#eef7fc; --blue-100:#e3f2fb; --blue-200:#c6e4f5; --blue-300:#9bcdea;
  --blue-400:#6db4df; --blue-500:#4a9fd4; --blue-600:#3585be; --blue-700:#2b6ea0;
  /* Navy (ink) ramp */
  --navy-900:#1c2f4a; --navy-800:#223a5e; --navy-700:#2c4a73; --navy-600:#3a5580;
  /* Neutrals */
  --white:#ffffff; --paper:#fbfdfe; --gray-50:#f3f7fa; --gray-100:#e8eef4;
  --gray-200:#d6e0ea; --gray-300:#b9c7d6; --gray-400:#94a6ba; --gray-500:#6d8298;
  --gray-600:#526379; --gray-700:#3a4a63;
  /* Playful accents (mascot & class icons) */
  --yellow-300:#ffe083; --yellow-400:#ffd54a; --yellow-500:#f3c23a;
  --pink-300:#fbd0e0; --pink-400:#f7a9c4; --pink-500:#ef8bb0;
  --mint-300:#bfead9; --mint-400:#8fd9bd;
  --robot-blue:#5b9bd5;

  /* Soft page gradients from the cards */
  --grad-page:linear-gradient(135deg,#eef7fc 0%,#dceff9 45%,#f2eaf3 100%); /* @kind other */
  --grad-header:linear-gradient(180deg,#4aa3d6 0%,#3f9fd6 100%); /* @kind other */
  --grad-hero:linear-gradient(135deg,#5aa9db 0%,#4a9fd4 60%,#6db4df 100%); /* @kind other */

  /* ---- Semantic aliases ---- */
  --brand-primary:var(--blue-500);
  --brand-primary-strong:var(--blue-600);
  --brand-accent:var(--yellow-400);
  --brand-accent-pink:var(--pink-400);

  --text-heading:var(--navy-800);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-on-brand:var(--white);
  --text-link:var(--blue-600);

  --surface-page:var(--grad-page);
  --surface-card:var(--white);
  --surface-soft:var(--blue-50);
  --surface-tint:var(--blue-100);

  --border-soft:var(--gray-200);
  --border-card:var(--blue-200);
  --border-focus:var(--blue-400);

  --state-hover-tint:var(--blue-50);
}