67 lines
2.2 KiB
CSS
67 lines
2.2 KiB
CSS
/* 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);
|
|
}
|