:root{
  /* ===== Base ramps ===== */
  /* Bone — warm paper neutral to ink */
  --bone-0:#FBF8F1;    /* raised / card */
  --bone-50:#F4F0E7;   /* page */
  --bone-100:#EBE5D8;  /* sunken */
  --bone-200:#DED7C6;  /* inset */
  --sand-300:#C7BFAD;
  --sand-400:#A79E88;
  --stone-500:#6B665B;
  --stone-600:#4A463D;
  --ink-700:#39332A;
  --ink-800:#2A251D;
  --ink-900:#241F17;   /* warm espresso-charcoal (softened from cold near-black) */

  /* ===== Brand channel accent — SWAPPABLE =====
     The heart of the system: override --brand (and --brand-wash / --brand-ink)
     at :root or on any container to speak a client's brand language.
     Default channel = SeventhSlate house BLUE (Northwind #2E6BFF —
     a confident, distinctive signal blue, off the SoundCloud-orange path). */
  --brand:#2E6BFF;
  --brand-strong:#1E52D6;
  --brand-wash:rgba(46,107,255,0.20);   /* highlighter marker behind words */
  --brand-wash-solid:#CBD9FF;          /* opaque fallback for exports */
  --brand-ink:#FFFFFF;                  /* text ON a --brand fill */

  --white:#FFFFFF;

  /* Semantic hues (independent of the swappable brand) — filmic, earthy, non-primary */
  --moss-500:#3F7A47;    /* success — deep leaf green */
  --ochre-500:#C68A1E;   /* warning — mustard ochre */
  --brick-500:#B23A2A;   /* danger — terracotta brick */
  --teal-500:#2C7A78;    /* info — filmic teal-slate */

  /* Supporting accents — a warm editorial palette woven alongside the blue.
     Use for category coding, marker variety, sticky tags, dots, small pops.
     Never as page backgrounds; the base stays bone + ink. */
  --sun:#F4B740;       --sun-soft:#FBEBC4;    /* marigold gold */
  --rose:#F0607A;      --rose-soft:#FBDCE1;   /* warm rose */
  --sage:#4FA88A;      --sage-soft:#D8ECE3;   /* muted green */
  --clay:#D9663F;      --clay-soft:#F6DDD0;   /* terracotta */

  /* ===== Semantic aliases ===== */
  --surface-page:var(--bone-50);
  --surface-card:var(--bone-0);
  --surface-raised:var(--bone-0);
  --surface-sunken:var(--bone-100);
  --surface-inset:var(--bone-200);
  --surface-ink:var(--ink-900);
  --surface-ink-soft:var(--ink-800);
  --surface-brand:var(--brand);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-800);
  --text-muted:var(--stone-500);
  --text-subtle:var(--sand-400);
  --text-inverse:var(--bone-50);
  --text-inverse-muted:rgba(244,240,231,0.62);
  --text-accent:var(--brand);
  --text-on-brand:var(--brand-ink);

  /* Lines — warmer, lighter hairlines */
  --line:rgba(36,31,23,0.13);
  --line-2:rgba(36,31,23,0.26);
  --line-inverse:rgba(244,240,231,0.24);
  --border-subtle:var(--line);
  --border-default:var(--line-2);
  --border-strong:var(--ink-900);
  --border-inverse:var(--line-inverse);

  --accent:var(--brand);
  --accent-hover:var(--brand-strong);
  --focus-ring:var(--brand);

  --success:var(--moss-500);
  --success-soft:#DDE8D2;
  --warning:var(--ochre-500);
  --warning-soft:#F3E6C4;
  --danger:var(--brick-500);
  --danger-soft:#F1D8CF;
  --info:var(--teal-500);
  --info-soft:#D2E4E1;
}