/* =========================================================================
   Alok Bento — semantic tokens (light default, dark via html[data-theme])
   Source of truth: the style guide's colour table. No-JS = light.
   ========================================================================= */

:root {
	--alok-canvas: #f7f7f3;
	--alok-surface: #ffffff;
	--alok-surface-soft: #e9edeb;
	--alok-surface-partner: #e7ebdf;
	--alok-surface-warm: #f5eebf;
	--alok-surface-inverse: #202621;
	--alok-ink: #20231f;
	--alok-body: #5b635a;
	--alok-muted: #636960;
	--alok-border: #e3e5df;
	--alok-divider: #dfe2dc;
	--alok-accent: #f8d94a;
	--alok-accent-border: #edce37;
	--alok-accent-ink: #20231f;
	--alok-accent-body: #414a3e;
	--alok-accent-muted: #50573f;
	--alok-inverse-ink: #edf1eb;
	--alok-inverse-body: #d1d7cf;
	--alok-inverse-line: #4a554c;
	--alok-link-hover: #645000;
	--alok-focus: #765600;
	--alok-article-ink: #303730;
	--alok-article-link: #655006;
	--alok-footer-ink: #626a60;
	--alok-control-border: #cbd1c8;
	--alok-hover-soft: #e9edeb;
	--alok-button-bg: #20231f;
	--alok-button-ink: #ffffff;
	--alok-button-hover: #454a40;
	--alok-tag-ink: #485047;
	--alok-tag-border: #dce0d8;
	--alok-cover-shadow: #cbd4ce;
	--alok-code-bg: #202621;
	--alok-code-ink: #f7f7f3;
	--alok-code-border: #202621;

	--alok-label-title: 18px;
	--alok-title-body: 14px;
	--alok-body-action: 26px;
	--alok-card-radius: 13px;
	--alok-gap: 20px;
	--alok-card-pad: clamp(28px, 3.2vw, 46px);
	--alok-gutter: clamp(20px, 4vw, 64px);

	--alok-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--alok-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

	color-scheme: light;
}

[data-theme="dark"] {
	--alok-canvas: #151a17;
	--alok-surface: #222b24;
	--alok-surface-soft: #29362c;
	--alok-surface-partner: #29362c;
	--alok-surface-warm: #383a25;
	--alok-surface-inverse: #0e1410;
	--alok-ink: #edf1eb;
	--alok-body: #c4cec2;
	--alok-muted: #b6c2b2;
	--alok-border: #3a453c;
	--alok-divider: #384139;
	--alok-accent-body: #394134;
	--alok-accent-muted: #50573b;
	--alok-inverse-body: #c4cec2;
	--alok-inverse-line: #384139;
	--alok-link-hover: #f8d94a;
	--alok-focus: #f8d94a;
	--alok-article-ink: #e4ebe0;
	--alok-article-link: #f8d94a;
	--alok-footer-ink: #b8c5b4;
	--alok-control-border: #56624f;
	--alok-hover-soft: #29362c;
	--alok-button-bg: #f8d94a;
	--alok-button-ink: #20231f;
	--alok-button-hover: #ecca30;
	--alok-tag-ink: #d5dfd0;
	--alok-tag-border: #56624f;
	--alok-cover-shadow: #405344;
	--alok-code-bg: #0e1410;
	--alok-code-border: #3a453c;

	color-scheme: dark;
}