/* kinra Web UI - Minnesota Aesthetic */

/* Inter — self-hosted variable font for chrome surfaces.
   Working surfaces (chat, code, terminal, file tree) stay mono via --font-mono. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Minnesota-Inspired Palette */
	--bg-primary: #0c0c0f; /* Near-black */
	--bg-secondary: #141418; /* Cards, modals */
	--bg-tertiary: #1e1e24; /* Interactive elements */
	--text-primary: rgba(255, 255, 255, 0.95);
	--text-secondary: rgba(255, 255, 255, 0.7);
	--text-muted: rgba(255, 255, 255, 0.45);
	--accent-cyan: var(--mn-flag-sky); /* MN flag sky blue (primary) */

	/* Minnesota state flag — canonical values (flagcolorcodes.com) */
	--mn-flag-navy: #002d5d; /* Flag dark blue ("night sky") */
	--mn-flag-sky: #52c9e8; /* Flag light blue ("waters of Minnesota") */

	--border-color: rgba(255, 255, 255, 0.1);
	--border-subtle: color-mix(in srgb, var(--border-color) 60%, transparent);
	--bg-elevated: var(--bg-tertiary);
	--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", "Consolas", monospace;
	/* Sans face for chrome surfaces — Inter loads first, system stack covers
	   the gap before the font arrives. Working surfaces stay on --font-mono. */
	--font-sans:
		"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Spacing scale (4px base) */
	--space-1: 4px; /* Tight - line padding, small gaps */
	--space-2: 8px; /* Compact - standard gaps, margins */
	--space-3: 12px; /* Regular - message margins, code padding */
	--space-4: 16px; /* Comfortable - container padding */
	--space-5: 20px; /* Spacious - modal padding */

	/* Safe area insets (notch, Dynamic Island, home indicator) */
	/* Default to 0px — harmless on desktop, active in standalone PWA */
	--sat: env(safe-area-inset-top, 0px);
	--sar: env(safe-area-inset-right, 0px);
	--sab: env(safe-area-inset-bottom, 0px);
	--sal: env(safe-area-inset-left, 0px);

	/* Indentation (ch-based for terminal authenticity) */
	--indent-1: 2ch;
	--indent-2: 4ch;
	--indent-3: 6ch;

	/* Font sizes */
	--font-xs: 10px; /* Status indicators */
	--font-sm: 12px; /* Secondary text, metadata */
	--font-md: 13px; /* Tool results, child tools */
	--font-body: 14px; /* Body / button baseline */
	--font-lg: 24px; /* Hero text (kiosk-gate title etc.) */

	/* Icon sizes (Phosphor: drives via font-size) */
	--icon-sm: 14px; /* Compact toolbars */
	--icon-md: 16px; /* Standard icon buttons */
	--icon-lg: 20px; /* Hero actions, view-close affordances */

	/* Accent opacity variants */
	--accent-cyan-60: color-mix(in srgb, var(--accent-cyan) 60%, transparent);
	--accent-cyan-50: color-mix(in srgb, var(--accent-cyan) 50%, transparent);
	--accent-cyan-45: color-mix(in srgb, var(--accent-cyan) 45%, transparent);
	--accent-cyan-35: color-mix(in srgb, var(--accent-cyan) 35%, transparent);
	--accent-cyan-30: color-mix(in srgb, var(--accent-cyan) 30%, transparent);
	--accent-cyan-25: color-mix(in srgb, var(--accent-cyan) 25%, transparent);
	--accent-cyan-20: color-mix(in srgb, var(--accent-cyan) 20%, transparent);
	--accent-cyan-18: color-mix(in srgb, var(--accent-cyan) 18%, transparent);
	--accent-cyan-15: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
	--accent-cyan-12: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
	--accent-cyan-10: color-mix(in srgb, var(--accent-cyan) 10%, transparent);

	/* Overlay tints (white on dark bg) */
	--overlay-light-3: rgba(255, 255, 255, 0.03);
	--overlay-light-5: rgba(255, 255, 255, 0.05);

	/* Backdrop */
	--bg-backdrop: rgba(0, 0, 0, 0.75);

	/* Tool panel backgrounds */
	--bg-panel: color-mix(in srgb, var(--bg-tertiary) 65%, transparent);
	--bg-inset: #121216;

	/* Z-index layer stack */
	--z-dropdown: 80; /* completion dropdown (input area) */
	--z-popup: 100; /* header/thinking dropdowns, context menus at popup layer */
	--z-context-menu: 200; /* right-click context menu (above popups) */
	--z-onboarding: 2000; /* onboarding overlay (above modals) */
	--z-modal: 1000; /* modal backdrops and dialogs */
	--z-toast: 1010; /* toasts must float above modals */
	--z-alert: 9999; /* connection-lost and system alerts */
	--z-alert-overlay: 10000; /* tooltips/popovers/PWA prompts above --z-alert */

	/* Easing curves (smooth, intentional motion) */
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth deceleration */
	--ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Balanced */
	--ease-out-smooth: cubic-bezier(0.33, 1, 0.68, 1); /* Quick start, smooth end */

	/* Tree geometry (read by JS virtual scroll) */
	--tree-item-height: 26px;

	/* Text on accent-colored backgrounds (avatars, colored badges). */
	--text-on-accent: #fff;

	/* Tertiary text (between muted and secondary) */
	--text-tertiary: color-mix(in srgb, var(--text-muted) 60%, var(--text-secondary));

	/* Layout */
	--header-height: 40px;

	/* List-page chrome geometry (shared template for full-page list+detail views) */
	--lp-list-pane-width: 360px;
	--lp-list-pane-min: 280px;
	--lp-detail-pane-min: 320px;
	--lp-title-row-height: 32px;
	--lp-filter-band-height: 36px;
	--lp-view-max-width: 1280px;

	/* Border radius scale (per design language: calm rounding, modern but not pillowy) */
	--radius-sm: 4px; /* Inputs, callouts, toolbar badges, small chips */
	--radius-md: 6px; /* Buttons, dropdowns, toasts, select menus */
	--radius-lg: 10px; /* Modals, panels, form containers */
	--radius-xl: 14px; /* Major cards, large containers, input area */

	/* Animation durations */
	--duration-fast: 100ms; /* Immediate feedback (highlights, focus) */
	--duration-normal: 150ms; /* Standard hover/transition */
	--duration-slow: 200ms; /* Entrances, exits */
	--duration-collapse: 300ms; /* Expand/collapse panels, reasoning, shell */

	/* Canonical focus ring (double-ring: dark gap + cyan) */
	--focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-cyan);

	/* Named transition intents (pair duration + curve) */
	--transition-hover: var(--duration-normal) var(--ease-out-smooth);
	--transition-enter: var(--duration-slow) var(--ease-out-expo);
	--transition-collapse: var(--duration-collapse) var(--ease-out-expo);
}