/* Kade palette — cool stone paper, slate-ink dark punctuation, amber as the only accent. */
:root {
  /* Stone — the default canvas. Cool, quarried, never white. */
  --color-stone: #EFF0EE;
  --color-stone-2: #E5E7E4;
  --color-stone-3: #D8DBD7;
  --color-stone-rule: #CDD1CD;

  /* Ink ramp — text on stone. */
  --color-ink-body: #171C22;
  --color-ink-muted: #3A424C;
  --color-ink-dim: #6B7480;

  /* Slate — the sparing dark surface. One or two blocks per page. */
  --color-slate: #101720;
  --color-slate-2: #18202B;
  --color-slate-3: #232C39;

  /* Neutral ramp — text on slate. Pure white does not exist in this system. */
  --color-neutral-1: #F4F5F4;
  --color-neutral-2: #E4E7E6;
  --color-neutral-3: #BAC0C0;
  --color-neutral-4: #6C7783;

  /* Amber — the single accent. Reserved for action, state and signal. */
  --color-amber: #E8913A;
  --color-amber-deep: #C4741F;
  --color-amber-soft: #F0B476;
  --color-amber-tint: rgba(232, 145, 58, 0.10);
  --color-amber-ring: rgba(232, 145, 58, 0.22);

  /* Semantic aliases — prefer these in component code. */
  --surface-page: var(--color-stone);
  --surface-card: var(--color-stone-2);
  --surface-card-hover: var(--color-stone-3);
  --surface-dark: var(--color-slate);
  --surface-dark-card: var(--color-slate-2);

  --text-body: var(--color-ink-body);
  --text-muted: var(--color-ink-muted);
  --text-dim: var(--color-ink-dim);
  --text-accent: var(--color-amber-deep);
  --text-on-accent: var(--color-ink-body);

  --border-hairline: var(--color-stone-rule);
  --border-strong: var(--color-ink-muted);

  --action-fill: var(--color-amber);
  --action-fill-hover: var(--color-amber-deep);
  --focus-ring: var(--color-amber-ring);
  --focus-border: var(--color-amber);
  --signal-error: var(--color-amber-deep);
}

/* Slate scope — inside a dark block the ramps invert. Apply to the block, not the page. */
[data-surface="slate"] {
  --surface-page: var(--color-slate);
  --surface-card: var(--color-slate-2);
  --surface-card-hover: var(--color-slate-3);
  --text-body: var(--color-neutral-1);
  --text-muted: var(--color-neutral-2);
  --text-dim: var(--color-neutral-4);
  --text-accent: var(--color-amber);
  --border-hairline: var(--color-slate-3);
  --border-strong: var(--color-neutral-3);
}