/*
 * KICAP Human Frame v2 foundation.
 *
 * Primitive brand tokens remain stable. Components consume semantic tokens so
 * the resolved palette can change without rewriting component CSS.
 */
:root {
	/* Brand primitives: keep these aligned with packages/brand/tokens.css. */
	--kicap-carbon: #111315;
	--kicap-graphite: #25292d;
	--kicap-paper: #f6f6f2;
	--kicap-copper: #c86535;
	--kicap-copper-light: #e07a43;
	--kicap-mist: #e2e5e7;
	--kicap-alloy: #697077;

	/* Typography. */
	--kicap-font-sans: Inter, "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--kicap-font-size-xs: 0.75rem;
	--kicap-font-size-sm: 0.875rem;
	--kicap-font-size-base: 1rem;
	--kicap-font-size-lg: 1.125rem;
	--kicap-font-size-xl: 1.25rem;
	--kicap-font-size-2xl: 1.5rem;
	--kicap-line-height-tight: 1.2;
	--kicap-line-height-base: 1.5;
	--kicap-line-height-relaxed: 1.65;

	/* Spacing, radius and layout. */
	--kicap-space-1: 0.125rem;
	--kicap-space-2: 0.25rem;
	--kicap-space-3: 0.5rem;
	--kicap-space-4: 0.75rem;
	--kicap-space-5: 1rem;
	--kicap-space-6: 1.5rem;
	--kicap-space-7: 2rem;
	--kicap-space-8: 3rem;
	--kicap-space-9: 4rem;
	--kicap-space-10: 6rem;
	--kicap-space-11: 8rem;
	--kicap-radius-sm: 8px;
	--kicap-radius-md: 14px;
	--kicap-radius-lg: 22px;
	--kicap-radius-pill: 999px;
	--kicap-container-width: 1280px;
	--kicap-container-gutter: 24px;
	--kicap-section-space: clamp(3rem, 7vw, 6rem);

	/* Motion and layer scale. */
	--kicap-motion-fast: 160ms;
	--kicap-motion-base: 240ms;
	--kicap-motion-slow: 360ms;
	--kicap-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--kicap-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--kicap-z-base: 0;
	--kicap-z-dropdown: 100;
	--kicap-z-sticky: 1000;
	--kicap-z-overlay: 1050;
	--kicap-z-modal: 1100;
	--kicap-z-toast: 1200;

	/* Semantic light palette. Copper is reserved for intentional Human Points. */
	--kicap-page: var(--kicap-paper);
	--kicap-surface: #fbfaf7;
	--kicap-surface-elevated: #fffefa;
	--kicap-surface-inverse: var(--kicap-carbon);
	--kicap-text: #171817;
	--kicap-text-muted: #66655f;
	--kicap-text-subtle: #85827b;
	--kicap-text-inverse: #f5f2eb;
	--kicap-border: #d9d5cc;
	--kicap-border-strong: #c8c2b7;
	--kicap-color-accent: var(--kicap-copper);
	--kicap-color-accent-strong: #a95029;
	--kicap-color-accent-subtle: #f4dfd4;
	--kicap-button-primary-bg: var(--kicap-carbon);
	--kicap-button-primary-text: var(--kicap-text-inverse);
	--kicap-button-secondary-bg: var(--kicap-surface-elevated);
	--kicap-button-secondary-text: var(--kicap-text);
	--kicap-button-secondary-border: var(--kicap-border-strong);
	--kicap-input-bg: var(--kicap-surface-elevated);
	--kicap-input-text: var(--kicap-text);
	--kicap-input-placeholder: var(--kicap-text-subtle);
	--kicap-input-border: var(--kicap-border);
	--kicap-status-success: #2f7955;
	--kicap-status-success-subtle: #e2f0e8;
	--kicap-status-warning: #a86b18;
	--kicap-status-warning-subtle: #f8ecd6;
	--kicap-status-danger: #ad4650;
	--kicap-status-danger-subtle: #f7e1e3;
	--kicap-status-info: #406d9f;
	--kicap-status-info-subtle: #e0eaf5;
	--kicap-focus-ring: var(--kicap-color-accent);
	--kicap-focus-shadow: rgba(200, 101, 53, 0.3);
	--kicap-focus-width: 2px;
	--kicap-focus-offset: 2px;
	--kicap-overlay: rgba(17, 19, 21, 0.46);
	--kicap-skeleton: #e8e5de;
	--kicap-skeleton-highlight: #f6f4ee;
	--kicap-shadow-soft: 0 12px 36px rgba(17, 19, 21, 0.1);
	--kicap-shadow-elevated: 0 18px 60px rgba(24, 24, 20, 0.1);
	color-scheme: light;
}

html[data-theme="dark"] {
	--kicap-page: #161916;
	--kicap-surface: #1b1e1b;
	--kicap-surface-elevated: #242724;
	--kicap-surface-inverse: #eeece5;
	--kicap-text: #f0eee7;
	--kicap-text-muted: #b4b1a8;
	--kicap-text-subtle: #898c85;
	--kicap-text-inverse: #171a17;
	--kicap-border: #343833;
	--kicap-border-strong: #464b44;
	--kicap-color-accent: #d98558;
	--kicap-color-accent-strong: #eca677;
	--kicap-color-accent-subtle: #3d2c24;
	--kicap-button-primary-bg: #e8e6de;
	--kicap-button-primary-text: #1b1e1b;
	--kicap-button-secondary-bg: var(--kicap-surface-elevated);
	--kicap-button-secondary-text: var(--kicap-text);
	--kicap-button-secondary-border: var(--kicap-border-strong);
	--kicap-input-bg: #202320;
	--kicap-input-text: var(--kicap-text);
	--kicap-input-placeholder: var(--kicap-text-subtle);
	--kicap-input-border: var(--kicap-border);
	--kicap-status-success: #79c79b;
	--kicap-status-success-subtle: #21382b;
	--kicap-status-warning: #e5b45c;
	--kicap-status-warning-subtle: #3d3020;
	--kicap-status-danger: #ea9299;
	--kicap-status-danger-subtle: #42272a;
	--kicap-status-info: #93b8e4;
	--kicap-status-info-subtle: #26364a;
	--kicap-focus-ring: var(--kicap-color-accent);
	--kicap-focus-shadow: rgba(217, 133, 88, 0.38);
	--kicap-overlay: rgba(8, 10, 9, 0.68);
	--kicap-skeleton: #2d312d;
	--kicap-skeleton-highlight: #393e39;
	--kicap-shadow-soft: 0 12px 36px rgba(8, 10, 9, 0.24);
	--kicap-shadow-elevated: 0 18px 70px rgba(8, 10, 9, 0.36);
	color-scheme: dark;
}

/* Useful when JavaScript is unavailable before the first paint. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--kicap-page: #161916;
		--kicap-surface: #1b1e1b;
		--kicap-surface-elevated: #242724;
		--kicap-surface-inverse: #eeece5;
		--kicap-text: #f0eee7;
		--kicap-text-muted: #b4b1a8;
		--kicap-text-subtle: #898c85;
		--kicap-text-inverse: #171a17;
		--kicap-border: #343833;
		--kicap-border-strong: #464b44;
		--kicap-color-accent: #d98558;
		--kicap-color-accent-strong: #eca677;
		--kicap-color-accent-subtle: #3d2c24;
		--kicap-button-primary-bg: #e8e6de;
		--kicap-button-primary-text: #1b1e1b;
		--kicap-button-secondary-bg: var(--kicap-surface-elevated);
		--kicap-button-secondary-text: var(--kicap-text);
		--kicap-button-secondary-border: var(--kicap-border-strong);
		--kicap-input-bg: #202320;
		--kicap-input-text: var(--kicap-text);
		--kicap-input-placeholder: var(--kicap-text-subtle);
		--kicap-input-border: var(--kicap-border);
		--kicap-status-success: #79c79b;
		--kicap-status-success-subtle: #21382b;
		--kicap-status-warning: #e5b45c;
		--kicap-status-warning-subtle: #3d3020;
		--kicap-status-danger: #ea9299;
		--kicap-status-danger-subtle: #42272a;
		--kicap-status-info: #93b8e4;
		--kicap-status-info-subtle: #26364a;
		--kicap-focus-ring: var(--kicap-color-accent);
		--kicap-focus-shadow: rgba(217, 133, 88, 0.38);
		--kicap-overlay: rgba(8, 10, 9, 0.68);
		--kicap-skeleton: #2d312d;
		--kicap-skeleton-highlight: #393e39;
		--kicap-shadow-soft: 0 12px 36px rgba(8, 10, 9, 0.24);
		--kicap-shadow-elevated: 0 18px 70px rgba(8, 10, 9, 0.36);
		color-scheme: dark;
	}
}

html,
body {
	background-color: var(--kicap-page);
}

html {
	font-size: 100%;
}

body {
	color: var(--kicap-text);
	font-family: var(--kicap-font-sans);
	line-height: var(--kicap-line-height-base);
	letter-spacing: normal;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.kicap-focus-visible:focus-visible {
	outline: var(--kicap-focus-width) solid var(--kicap-focus-ring);
	outline-offset: var(--kicap-focus-offset);
	box-shadow: 0 0 0 4px var(--kicap-focus-shadow);
}

.kicap-visually-hidden,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kicap-skip-link {
	position: fixed;
	z-index: var(--kicap-z-toast);
	top: var(--kicap-space-3);
	left: var(--kicap-space-3);
	padding: var(--kicap-space-3) var(--kicap-space-4);
	border: 1px solid var(--kicap-focus-ring);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-surface);
	color: var(--kicap-text);
	font: 700 var(--kicap-font-size-sm) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	text-decoration: none;
	transform: translateY(calc(-100% - var(--kicap-space-5)));
	transition: transform var(--kicap-motion-fast) var(--kicap-ease-out);
}

.kicap-skip-link:focus-visible {
	transform: translateY(0);
}

.kicap-container {
	width: min(calc(100% - (var(--kicap-container-gutter) * 2)), var(--kicap-container-width));
	margin-right: auto;
	margin-left: auto;
}

.kicap-section {
	padding-block: var(--kicap-section-space);
}

.kicap-surface {
	background-color: var(--kicap-surface);
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-md);
}

.kicap-surface--elevated {
	background-color: var(--kicap-surface-elevated);
	box-shadow: var(--kicap-shadow-elevated);
}

.kicap-divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background-color: var(--kicap-border);
}

@keyframes kicap-skeleton-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

.kicap-skeleton {
	display: block;
	min-height: 1em;
	background: linear-gradient(90deg, var(--kicap-skeleton) 25%, var(--kicap-skeleton-highlight) 50%, var(--kicap-skeleton) 75%);
	background-size: 200% 100%;
	border-radius: var(--kicap-radius-sm);
	animation: kicap-skeleton-shimmer 1.6s var(--kicap-ease-standard) infinite;
}

.kicap-loading {
	cursor: progress;
}

.kicap-loading[aria-busy="true"] {
	pointer-events: none;
}

@media (max-width: 767px) {
	:root {
		--kicap-container-gutter: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--kicap-motion-fast: 0ms;
		--kicap-motion-base: 0ms;
		--kicap-motion-slow: 0ms;
	}

	.kicap-skeleton {
		animation: none;
	}

	:where(html) {
		scroll-behavior: auto;
	}
}