/* QAIL 2026 — Design tokens.
 * Two complete theme palettes scoped via [data-mode="human|agent"].
 * Components must always reference tokens, never hard-code colors.
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/InterVariable.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

:root {
	/* Type families */
	--ff-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale (rem-based, 1rem = 16px) */
	--fs-display:  clamp(2.5rem, 5vw + 1rem, 4.5rem);
	--fs-h1:       clamp(2rem, 3vw + 1rem, 3rem);
	--fs-h2:       clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
	--fs-h3:       1.25rem;
	--fs-body-lg:  1.125rem;
	--fs-body:     1rem;
	--fs-small:    0.875rem;
	--fs-mono-sm:  0.8125rem;

	/* Weights */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Line heights */
	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-base:     1.5;
	--lh-relaxed:  1.65;

	/* Spacing scale (4px base) */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  3rem;
	--space-8:  4rem;
	--space-9:  6rem;
	--space-10: 8rem;

	/* Border radius */
	--radius-sm:   6px;
	--radius-md:   10px;
	--radius-lg:   16px;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md:       0 4px 16px rgba(0, 0, 0, 0.06);
	--shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.10);

	/* Motion */
	--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-state:    cubic-bezier(0.4, 0, 0.2, 1);
	--ease-gauge:    cubic-bezier(0.5, 0, 0.2, 1);
	--dur-state:     250ms;
	--dur-toggle:    300ms;
	--dur-theme:     400ms;
	--dur-element:   400ms;
	--dur-section:   600ms;
	--dur-gauge:     1500ms;

	/* Layout */
	--container-max:        1200px;
	--container-narrow-max: 880px;
}

/* Light theme — Human mode (default when [data-mode] is unset or "human") */
:root[data-mode="human"],
:root:not([data-mode]) {
	--bg:            #F4F4F3;
	--bg-elevated:   #FFFFFF;
	--bg-sunken:     #ECECEA;
	--surface-card:  #FFFFFF;
	--text:          #0A0A0C;
	--text-muted:    #6B6B70;
	--text-subtle:   #9A9AA0;
	--border:        #E5E5E3;
	--border-strong: #D0D0CE;
	--accent:        #3B82F6;
	--accent-soft:   rgba(59, 130, 246, 0.08);
	--success:       #16A34A;
	--warning:       #D97706;
	--danger:        #DC2626;
	--code-bg:       #0E0E10;
	--code-text:     #A8E6C4;
	color-scheme: light;
}

/* Dark theme — Agent mode */
:root[data-mode="agent"] {
	--bg:            #0A0A0C;
	--bg-elevated:   #14141A;
	--bg-sunken:     #050507;
	--surface-card:  #14141A;
	--text:          #F4F4F3;
	--text-muted:    #8A8A95;
	--text-subtle:   #5A5A60;
	--border:        #1F1F25;
	--border-strong: #2A2A33;
	--accent:        #22D3EE;
	--accent-soft:   rgba(34, 211, 238, 0.12);
	--success:       #22C55E;
	--warning:       #F59E0B;
	--danger:        #EF4444;
	--code-bg:       #050507;
	--code-text:     #5AF;
	color-scheme: dark;
}