/*
 * МОДУС client token layer — the ONLY hand-written file that may contain raw colour/size literals.
 * Colours, fonts, radii, spacing, shadows and timing come from the generated kit tokens (--ck-*, tokens.css);
 * this file (1) maps them to the short names the design export uses, and (2) holds what the kit has no slot for
 * (type scale, mobile/desktop layout constants, a few one-off surface values). See report rows KIT-01..KIT-08.
 */
:root {
	/* colour: kit semantic tokens */
	--color-canvas: var(--ck-color-canvas);
	--color-ink: var(--ck-color-text);
	--color-ink-muted: var(--ck-color-text-muted);
	--color-ink-subtle: var(--ck-color-text-subtle);
	--color-primary: var(--ck-color-action);
	--color-primary-hover: var(--ck-color-action-hover);
	--color-primary-focus: var(--ck-color-action-active);
	--color-on-primary: var(--ck-color-action-text);
	--color-accent: var(--ck-color-link);
	--color-accent-hover: var(--ck-color-link-hover);
	--color-danger: var(--ck-color-danger);
	--color-logo-plate: var(--ck-color-logo-plate);
	--color-surface-lowest: var(--ck-color-surface-lowest);
	--glass-surface-1: var(--ck-glass-surface1);
	--glass-surface-2: var(--ck-glass-surface2);
	--glass-surface-3: var(--ck-glass-surface3);
	--glass-border: var(--ck-glass-border);
	--glass-border-strong: var(--ck-glass-border-strong);
	--glass-blur: var(--ck-glass-blur);
	--glass-blur-sm: var(--ck-glass-blur-small);

	/* shape, space, elevation, motion: kit semantic tokens */
	--radius-sm: var(--ck-shape-sm);
	--radius-md: var(--ck-shape-md);
	--radius-lg: var(--ck-shape-lg);
	--radius-glass-card: var(--ck-shape-glass-card);
	--radius-glass-panel: var(--ck-shape-glass-panel);
	--radius-pill: var(--ck-shape-pill);
	--space-xxs: var(--ck-spacing-xxs);
	--space-xs: var(--ck-spacing-xs);
	--space-sm: var(--ck-spacing-sm);
	--space-md: var(--ck-spacing-md);
	--space-lg: var(--ck-spacing-lg);
	--space-xl: var(--ck-spacing-xl);
	--space-xxl: var(--ck-spacing-xxl);
	--space-section: var(--ck-spacing-section);
	--shadow-glass: var(--ck-elevation-glass);
	--shadow-glass-hover: var(--ck-elevation-glass-hover);
	--shadow-ambient: var(--ck-elevation-ambient);
	--ease-standard: var(--ck-motion-easing);
	--duration-fast: var(--ck-motion-timing-fast);
	--duration-standard: var(--ck-motion-timing-standard);
	--font-text: var(--ck-type-body);
	--font-display: var(--ck-type-display);
	--font-mono: var(--ck-type-mono);

	/* derived from kit colours (no literals) */
	--ring-focus: 0 0 0 2px color-mix(in srgb, var(--ck-color-action) 55%, transparent);
	--ring-danger: 0 0 0 1px var(--ck-color-danger);
	--overlay-dialog: color-mix(in srgb, var(--ck-color-surface-lowest) 70%, transparent);
	--overlay-menu: color-mix(in srgb, var(--ck-color-surface-lowest) 50%, transparent);

	/* KIT-04: type scale (kit has body + heading size only) */
	--text-headline-size: 28px; --text-headline-weight: 600; --text-headline-lh: 1.2; --text-headline-ls: -0.6px;
	--text-card-title-size: 22px; --text-card-title-weight: 500; --text-card-title-lh: 1.25; --text-card-title-ls: -0.4px;
	--text-subhead-size: 20px; --text-subhead-weight: 400; --text-subhead-lh: 1.4; --text-subhead-ls: -0.2px;
	--text-body-lg-size: 18px; --text-body-lg-lh: 1.5;
	--text-body-size: 16px; --text-body-lh: 1.5; --text-body-ls: -0.05px;
	--text-body-sm-size: 14px;
	--text-caption-size: 12px; --text-caption-lh: 1.4;
	--text-button-size: 14px; --text-button-weight: 500; --text-button-lh: 1.2;
	--text-eyebrow-ls: 0.4px;
	--text-display-lg-size: 56px; --text-display-lg-weight: 600; --text-display-lg-lh: 1.10; --text-display-lg-ls: -1.8px;

	/* KIT-05: one-off surface values without a kit slot */
	--modus-logo-plate-border: rgba(0, 0, 0, 0.06);
	--modus-chip-bg: rgba(0, 0, 0, 0.16);
	--modus-studio-bg-mid: #1d1f21;
	--modus-studio-bg-end: #2a2c2f;
	--radius-xxl: 24px; /* KIT-05: the kit shape scale stops at glass-panel */
	--modus-mask-on: #000000;
	--modus-overlay-chip: rgba(0, 0, 0, 0.6);
	--modus-frame-border: rgba(255, 255, 255, 0.12);
	--modus-plan-bg: #ffffff;
	--modus-overlay-screen: rgba(8, 13, 17, 0.5);
	--modus-overlay-lightbox: rgba(8, 13, 17, 0.7);
	--modus-scrim-screen: linear-gradient(180deg, rgba(8, 13, 17, 0.62) 0%, rgba(8, 13, 17, 0.12) 20%, rgba(8, 13, 17, 0.06) 38%, rgba(8, 13, 17, 0.55) 72%, rgba(8, 13, 17, 0.88) 100%);
	--modus-scrim-hero: linear-gradient(180deg, rgba(8, 13, 17, 0.5) 0%, rgba(8, 13, 17, 0) 18%, rgba(8, 13, 17, 0) 52%, rgba(8, 13, 17, 0.62) 82%, rgba(18, 20, 21, 1) 100%);
	--modus-scrim-next: linear-gradient(180deg, rgba(8, 13, 17, 0.1) 30%, rgba(8, 13, 17, 0.8) 100%);
	--modus-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--modus-blur-menu: 14px;
	--modus-blur-overlay: 22px;

	/* layout constants (design: 48px gutter / 96px section, 16 / 48 on phones) */
	--modus-gutter: var(--space-xxl);
	--modus-panel-pad: var(--space-lg);
	--modus-section: var(--space-section);
	--modus-grid-gap: var(--space-sm);
}
@media (max-width: 680px) {
	:root {
		--modus-gutter: var(--space-md);
		--modus-panel-pad: var(--space-md);
		--modus-section: var(--space-xxl);
	}
}