/*
 * Design tokens (dev-003 T1) - single source of truth for colour, spacing,
 * radius, type and elevation. Component styles live in style.css and must only
 * reference these variables (no literal colour / spacing values).
 *
 * Source of truth for the values: docs/design/设计方向_v0.md §3, §10.2, §10.3.
 */

:root {
	/* --- colour: one accent, page theme locked --------------------------------- */
	--kl-ink: #0c1116;
	--kl-slate: #566270;
	--kl-paper: #ffffff;
	--kl-paper-alt: #f5f7f8;
	--kl-accent: #0e7c86;
	--kl-accent-hover: #0b626b;
	--kl-navy: #0b1f33;

	/* evidence levels - used for evidence marks only, never for decoration */
	--kl-level-a: #1f7a4c;
	--kl-level-b: #b57614;
	--kl-level-c: #a3321f;

	/* --- derived ---------------------------------------------------------------- */
	--kl-border: rgba(12, 17, 22, 0.08);
	--kl-border-strong: rgba(12, 17, 22, 0.16);
	--kl-accent-soft: rgba(14, 124, 134, 0.08);
	--kl-accent-ring: rgba(14, 124, 134, 0.28);
	--kl-on-navy: #ffffff;
	--kl-on-navy-muted: rgba(255, 255, 255, 0.74);
	--kl-disabled-bg: #e4e8ec;
	--kl-disabled-ink: #5b6472;
	--kl-note-bg: #fdf6ec;
	/* The one scrim (dev-025): the backdrop behind the mobile selector. */
	--kl-scrim: rgba(12, 17, 22, 0.45);

	/* --- spacing: the only scale (8pt) ------------------------------------------ */
	--kl-space-1: 4px;
	--kl-space-2: 8px;
	--kl-space-3: 12px;
	--kl-space-4: 16px;
	--kl-space-5: 24px;
	--kl-space-6: 32px;
	--kl-space-7: 48px;
	--kl-space-8: 64px;
	--kl-space-9: 96px;

	/* --- radius: exactly three -------------------------------------------------- */
	--kl-radius-card: 14px;
	--kl-radius-pill: 999px;
	--kl-radius-input: 10px;

	/* --- type ------------------------------------------------------------------- */
	--kl-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Thai", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--kl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--kl-text-xs: 12px;
	--kl-text-sm: 13px;
	--kl-text-base: 15px;
	--kl-text-md: 16px;
	--kl-text-lg: 18px;
	--kl-text-xl: 22px;
	--kl-text-2xl: 28px;
	--kl-text-3xl: 34px;
	--kl-text-4xl: 44px;

	--kl-leading-tight: 1.2;
	--kl-leading-snug: 1.45;
	--kl-leading-body: 1.7;

	--kl-weight-regular: 400;
	--kl-weight-semibold: 600;

	--kl-tracking-caps: 0.06em;

	/* --- elevation: overlays only ------------------------------------------------ */
	--kl-shadow-1: 0 1px 2px rgba(12, 17, 22, 0.06);
	--kl-shadow-2: 0 8px 24px rgba(12, 17, 22, 0.12);

	/* --- layout ----------------------------------------------------------------- */
	--kl-container: 1200px;
	/* fix-007 T7 (ledger ui-007): the second container width (1360px) was
	   retired - the whole site now shares this one axis, so the brand and the
	   page content line up instead of sitting 80px apart on desktop. */
	--kl-measure: 72ch;

	/* --- motion ----------------------------------------------------------------- */
	/* dev-024 (mobile interaction basics) adds two durations and keeps the one
	   easing curve. The allowed motions are enumerated in
	   prompts/dev/dev-024-mobile-interaction-master.md §四.2; the values follow
	   docs/design/参考_留学生保险H5的UI与动效_v1_20260928.md §6.
	   fast = hover / focus; base = the reading-gate progress bar and the header
	   search reveal; slow = the reading gate's "now available" confirmation. */
	--kl-dur-fast: 150ms;
	--kl-dur-base: 220ms;
	--kl-dur-slow: 320ms;
	--kl-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}