/* SystemLagbe — amber on slate. Overrides tokens only.

   Amber is a fill colour, not a text colour: #f59e0b on white fails contrast.
   --brand paints surfaces and --brand-on is near-black text on top of it, while
   --brand-ink carries anything that has to be readable as text on light. */

:root{
  --brand:#f59e0b;
  --brand-ink:#b45309;
  --brand-deep:#92400e;
  --brand-soft:#fffbeb;
  --brand-line:#fde68a;
  --brand-on:#1c1206;

  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --bg-sunk:#eef2f7;
  --ink:#0f172a;
  --ink-2:#25324b;
  --muted:#57657d;
  --line:#e2e8f0;
  --line-strong:#c6d0dd;

  --dark:#0f172a;
  --dark-2:#16213a;
  --dark-card:#1b2740;
  --dark-ink:#f1f5f9;
  --dark-muted:#94a3b8;
  --dark-line:#2b3a58;
}

/* darker, more "control panel" hero than the sister brand */
.hero{
  background:
    radial-gradient(1000px 380px at 82% -12%, #fef3c7, transparent 60%),
    linear-gradient(180deg, #f8fafc, var(--bg));
}