/* ============ Base ramps ============ */
:root{
  /* Steel — the brand primary. Desaturated slate blue: authoritative, never corporate-navy. */
  --steel-50:#F2F5F7;
  --steel-100:#E3E9ED;
  --steel-200:#C9D4DB;
  --steel-300:#A7B7C2;
  --steel-400:#7E93A2;
  --steel-500:#5E7A8C;
  --steel-600:#4F6C82;
  --steel-700:#3F576A;
  --steel-800:#32454F;
  --steel-900:#23313A;

  /* Ink — cool neutral ramp. Dark sections are near-black, never pure black. */
  --ink-950:#0F1214;
  --ink-900:#17191B;
  --ink-800:#212427;
  --ink-700:#2C3033;
  --ink-600:#4A5055;
  --ink-500:#6B737A;
  --ink-400:#949BA1;
  --ink-300:#BEC4C9;
  --ink-200:#DDE1E4;
  --ink-100:#EDEFF1;
  --ink-50:#F7F8F9;
  --white:#FFFFFF;

  /* Tinted light surfaces — the two section washes that break up white */
  --mist-100:#E9E7EC;   /* lavender-grey wash */
  --mist-200:#DAD7DF;
  --haze-100:#E8EDF1;   /* cool blue-grey wash */
  --haze-200:#D6DEE5;

  /* Semantic hues */
  --green-500:#3FBF6F;
  --green-100:#DFF4E8;
  --amber-500:#E0A02E;
  --amber-100:#FBEED6;
  --red-500:#C9483F;
  --red-100:#F8E3E1;
}

/* ============ Semantic aliases — light context (default) ============ */
:root{
  --text-heading:var(--ink-950);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-link:var(--steel-700);
  --text-link-hover:var(--ink-950);
  --text-on-accent:var(--white);

  --surface-page:var(--white);
  --surface-page-alt:var(--ink-50);
  --surface-card:var(--white);
  --surface-card-hover:var(--ink-50);
  --surface-sunken:var(--ink-100);
  --surface-wash-mist:var(--mist-100);
  --surface-wash-haze:var(--haze-100);
  --surface-inverse:var(--ink-900);
  --surface-field:var(--ink-50);
  --surface-pill:var(--haze-200);

  --border-hairline:rgba(15,18,20,.08);
  --border-default:rgba(15,18,20,.12);
  --border-strong:rgba(15,18,20,.20);
  --border-field:rgba(15,18,20,.14);
  --border-focus:var(--steel-600);

  --accent:var(--steel-600);
  --accent-hover:var(--steel-700);
  --accent-active:var(--steel-800);
  --accent-soft:var(--steel-100);
  --accent-on-soft:var(--steel-800);

  --status-ok:var(--green-500);
  --status-warn:var(--amber-500);
  --status-bad:var(--red-500);
}

/* ============ Semantic aliases — dark context ============ */
/* Apply .on-dark to any dark section; every component re-reads these vars. */
.on-dark{
  --text-heading:var(--white);
  --text-body:rgba(255,255,255,.72);
  --text-muted:rgba(255,255,255,.54);
  --text-faint:rgba(255,255,255,.38);
  --text-link:var(--white);
  --text-link-hover:var(--steel-300);

  --surface-page:var(--ink-900);
  --surface-page-alt:var(--ink-950);
  --surface-card:var(--ink-800);
  --surface-card-hover:var(--ink-700);
  --surface-sunken:var(--ink-950);
  --surface-inverse:var(--white);
  --surface-field:rgba(255,255,255,.05);
  --surface-pill:rgba(255,255,255,.10);

  --border-hairline:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.24);
  --border-field:rgba(255,255,255,.16);

  --accent:var(--steel-500);
  --accent-hover:var(--steel-400);
  --accent-active:var(--steel-600);
  --accent-soft:rgba(255,255,255,.10);
  --accent-on-soft:var(--white);
}

/* ============ Semantic aliases — light counter-scope ============ */
/* `.on-dark` only ever ENTERS dark context. Any always-light surface nested inside a
   dark section (the enquiry panel, a dialog) must carry `.on-light` to return. */
.on-light{
  --text-heading:var(--ink-950);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--white);
  --text-link:var(--steel-700);
  --text-link-hover:var(--ink-950);
  --text-on-accent:var(--white);

  --surface-page:var(--white);
  --surface-page-alt:var(--ink-50);
  --surface-card:var(--white);
  --surface-card-hover:var(--ink-50);
  --surface-sunken:var(--ink-100);
  --surface-inverse:var(--ink-900);
  --surface-field:var(--ink-50);
  --surface-pill:var(--haze-200);

  --border-hairline:rgba(15,18,20,.08);
  --border-default:rgba(15,18,20,.12);
  --border-strong:rgba(15,18,20,.20);
  --border-field:rgba(15,18,20,.14);
  --border-focus:var(--steel-600);

  --accent:var(--steel-600);
  --accent-hover:var(--steel-700);
  --accent-active:var(--steel-800);
  --accent-soft:var(--steel-100);
  --accent-on-soft:var(--steel-800);
}