:root{
/* ---- Base ramp: cool charcoal, never pure black ---- */
--ink-1000:#08090A;
--ink-900:#101113;   /* off-black — the brand's true "black" */
--ink-850:#16181B;
--ink-800:#1C1E22;   /* primary dark surface */
--ink-700:#25282D;   /* raised dark surface */
--ink-600:#31353B;   /* dark hairline / divider */
--ink-500:#484D55;
--ink-400:#6A7078;
--ink-300:#8E949C;
--ink-200:#B6BAC0;
--ink-100:#D6D5D0;

/* ---- Paper ramp: warm bone, never pure white ---- */
--bone-100:#F5F3EE;  /* off-white — the brand's true "white" */
--bone-200:#EDEAE3;
--bone-300:#E1DDD4;  /* light hairline / divider */
--bone-400:#CFCAC0;

/* ---- Accent: signal ember. Used at 1–2 marks per view. ---- */
--ember-600:#8F2D12;
--ember-500:#B93A18;
--ember-400:#D4471F;  /* the accent */
--ember-300:#E56A44;
--ember-100:#F6D9CF;

/* ---- Muted supporting hues (rare; charts, statuses, annotations) ---- */
--moss-400:#6E8B6A;
--amber-400:#C8912F;
--slate-400:#5C6B73;

/* ---- Semantic aliases — DARK is the default context ---- */
--surface-void:var(--ink-900);
--surface-base:var(--ink-800);
--surface-raised:var(--ink-700);
--surface-sunken:var(--ink-1000);
--surface-inverse:var(--bone-100);
--surface-accent:var(--ember-400);

--text-primary:var(--bone-100);
--text-secondary:var(--ink-200);
--text-muted:var(--ink-300);
--text-faint:var(--ink-400);
--text-accent:var(--ember-300);
--text-inverse:var(--ink-900);
--text-on-accent:var(--bone-100);

--border-hairline:var(--ink-600);
--border-strong:var(--ink-500);
--border-accent:var(--ember-400);
--border-inverse:var(--bone-400);

--focus-ring:var(--ember-400);
--selection-bg:var(--ember-400);
--selection-fg:var(--bone-100);

--status-positive:var(--moss-400);
--status-caution:var(--amber-400);
--status-critical:var(--ember-400);
--status-neutral:var(--ink-300);
}

/* Light context — invert by scope, not by media query.
   Apply to a wrapper: <div class="on-paper"> … </div> */
.on-paper{
--surface-void:var(--bone-200);
--surface-base:var(--bone-100);
--surface-raised:#FFFFFF;
--surface-sunken:var(--bone-300);
--surface-inverse:var(--ink-900);

--text-primary:var(--ink-900);
--text-secondary:var(--ink-700);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-accent:var(--ember-500);
--text-inverse:var(--bone-100);

--border-hairline:var(--bone-300);
--border-strong:var(--bone-400);
--border-inverse:var(--ink-600);

--status-critical:var(--ember-500);
}