/* 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 {
	/* WCAG 2.1 contrast ratios — text vs bg pairs (post `--text-muted` bump).
	   Recompute when text or bg tokens change. text-tertiary alpha is the
	   resolved value of color-mix(60% muted, 40% secondary) = 0.6*.55+0.4*.70.
	   bg-elevated currently aliases bg-tertiary, so it shares that column.

	   text \ bg             | bg-primary  0c0c0f  | bg-inset    121216  | bg-secondary 141418 | bg-tertiary 1e1e24  |
	   ----------------------+---------------------+---------------------+---------------------+---------------------+
	   text-primary   .95    | 17.6:1  AAA         | 16.9:1  AAA         | 16.6:1  AAA         | 15.0:1  AAA         |
	   text-secondary .70    |  9.6:1  AAA         |  9.4:1  AAA         |  9.3:1  AAA         |  8.7:1  AAA         |
	   text-tertiary  .61    |  7.5:1  AAA         |  7.4:1  AAA         |  7.3:1  AAA         |  6.9:1  AA          |
	   text-muted     .55    |  6.3:1  AA          |  6.2:1  AA          |  6.2:1  AA          |  5.9:1  AA          |

	   Grade key: AAA ≥ 7.0, AA ≥ 4.5, AAlg ≥ 3.0 (large text only), FAIL < 3.0. */

	/* 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.55);
	--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 (share-gate title etc.) */

	/* Mobile input font size — iOS Safari zooms into <input>/<textarea>
	   when their font-size is < 16px. Apply this at <560px breakpoints
	   to suppress the zoom-on-focus behavior on touch devices. */
	--font-input-mobile: 16px;

	/* Responsive breakpoints. Centralized so new media queries reference
	   the same px value as responsive.css. media-query syntax doesn't
	   accept var(--…) inside the parens, so views still write the px
	   value literally — these tokens document the canonical values and
	   should match the numbers in responsive.css. */
	--breakpoint-tablet: 768px;
	--breakpoint-mobile: 560px;

	/* 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 */

	/* Muted accent — quiet variant of accent-cyan for affordances that
	   should read as "off-the-record" rather than "primary action".
	   Used by the KIP-45 incognito chrome (toggle icon, chip border,
	   conversation-panel border). Sits between --text-muted and
	   --accent-cyan in brightness so the surface still belongs to the
	   chrome family without recruiting the primary accent. */
	--accent-muted: color-mix(in srgb, var(--accent-cyan) 35%, var(--text-muted));

	/* 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);

	/* Content-rendering palette — used only by surfaces that re-render content
	   with its own established visual language (diffs, terminal, syntax). The
	   chrome palette (cyan + white on void) governs everywhere else. Tones are
	   muted to feel like workshop instruments, not IDE candy, and are aligned
	   with the xterm ANSI palette in js/terminal.js. */
	--content-green: #5cb85c;
	--content-red: #dc5c5c;
	--diff-add-fg: #7dd67d;
	--diff-remove-fg: #e88888;
	--diff-add-bg: color-mix(in srgb, var(--content-green) 14%, transparent);
	--diff-remove-bg: color-mix(in srgb, var(--content-red) 22%, transparent);
	--diff-add-word-bg: color-mix(in srgb, var(--content-green) 28%, transparent);
	--diff-remove-word-bg: color-mix(in srgb, var(--content-red) 28%, 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 */
	--radius-pill: 999px; /* Circular status chips, avatars, tabs, anything that should read as round */

	/* 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);
}