/*
 * Agent Circuits — marketing demo tokens
 *
 * Single source of identity. Every colour, type ramp, radius, surface, and
 * motion value used by the demo site flows through this file.
 *
 * Two namespaces:
 *
 *   --*       Product tokens, copied verbatim from
 *             agentcircuits.ui/src/app.css. Do not hand-edit values; if the
 *             product source changes, re-extract. Light values live in
 *             :root, dark values live in .dark (matches the product).
 *
 *   --mkt-*   Marketing-only extensions. Display type ramp, surface
 *             conventions, motion language, semantic status colours that
 *             the product references via Tailwind utilities (text-green-500
 *             etc.) and that we need as explicit OKLCH so the demo renders
 *             without Tailwind. Anything net-new for marketing goes here.
 *
 * OKLCH is preserved end-to-end. Modern browsers support it; we get better
 * perceptual uniformity than HSL and a single-line brand swap later.
 */

:root {
	/* ---- Product tokens — type ---------------------------------------- */
	--ac-font-sans:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--ac-font-mono:
		ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas,
		'Liberation Mono', Menlo, monospace;
	--font-sans: var(--ac-font-sans);
	--font-mono: var(--ac-font-mono);

	--text-xs: 0.8125rem;
	--text-xs--line-height: calc(1.125 / 0.8125);
	--text-sm: 0.9375rem;
	--text-sm--line-height: calc(1.375 / 0.9375);

	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	/* ---- Product tokens — colour (light) ------------------------------ */
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.875 0 0);
	--input: oklch(0.92 0 0);
	--ring: oklch(0.708 0 0);

	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);

	--sidebar: oklch(0.987 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.97 0 0);
	--sidebar-accent-foreground: oklch(0.205 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);

	--code-background: oklch(0.975 0 0);
	--code-foreground: oklch(0.145 0 0);

	/* ---- Marketing tokens — display type ramp ------------------------- */
	/*
	 * Marketing type goes larger than product (product body is 15px, scenes
	 * read at presentation distance and on a public page). Headlines step
	 * 1.25× for a quiet ramp; display sizes are reserved for chapter/scene
	 * titles. Numeric scale matches Tailwind's familiar ladder so values
	 * are predictable.
	 */
	--mkt-text-base: 1rem; /* 16px — body copy on marketing scenes */
	--mkt-text-lg: 1.125rem; /* 18px — emphasised body, blurbs */
	--mkt-text-xl: 1.25rem; /* 20px — sub-titles */
	--mkt-text-2xl: 1.5rem; /* 24px — feature scene titles (small-caps optional) */
	--mkt-text-3xl: 1.875rem; /* 30px — feature scene titles (default) */
	--mkt-text-4xl: 2.25rem; /* 36px — chapter intro sub-headline */
	--mkt-text-5xl: 3rem; /* 48px — chapter intro headline */
	--mkt-text-6xl: 3.75rem; /* 60px — chapter intro display */
	--mkt-text-display: 5rem; /* 80px — site intro / hero only */

	--mkt-line-tight: 1.1;
	--mkt-line-snug: 1.25;
	--mkt-line-normal: 1.5;
	--mkt-line-relaxed: 1.625;

	--mkt-tracking-tight: -0.02em;
	--mkt-tracking-normal: 0;
	--mkt-tracking-wide: 0.04em;
	--mkt-tracking-caps: 0.08em; /* small-caps and labels */

	--mkt-weight-regular: 400;
	--mkt-weight-medium: 500;
	--mkt-weight-semibold: 600;
	--mkt-weight-bold: 700;

	/* ---- Marketing tokens — surfaces ---------------------------------- */
	/*
	 * Marketing tilt: more breathing room than product. Product card pads
	 * py-6 (1.5rem); marketing panels use 2rem at minimum, 2.5rem when the
	 * panel stands alone in a scene.
	 */
	--mkt-panel-radius: var(--radius-lg);
	--mkt-panel-radius-lg: var(--radius-xl);
	--mkt-radius-pill: 999px; /* fully-rounded ends — user message bubble, status chips */
	--mkt-radius-input: 1.25rem; /* generous corner — composer / input surfaces */
	--mkt-panel-padding: 1.5rem;
	--mkt-panel-padding-lg: 2rem;
	--mkt-panel-padding-xl: 2.5rem;
	--mkt-panel-gap: 0.75rem;
	--mkt-panel-gap-lg: 1.25rem;

	/*
	 * Subtle shadow. Avoid bigger drop-shadows — they read as "marketing
	 * cliché" and can't be GPU-cheaply animated (§6.7 forbids animating
	 * box-shadow anyway).
	 */
	--mkt-shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.04);
	--mkt-shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.06);
	--mkt-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.06);

	/* ---- Marketing tokens — semantic status --------------------------- */
	/*
	 * Product references these as Tailwind utilities (text-green-500,
	 * text-amber-500, etc.). We need explicit OKLCH so the demo renders
	 * faithfully without Tailwind. Values match Tailwind v4 default scale
	 * so a viewer comparing screenshots sees the same hues.
	 */
	--mkt-status-pending: var(--muted-foreground);
	--mkt-status-running: oklch(0.65 0.2 250); /* product tool-call highlight blue */
	--mkt-status-success: oklch(0.7227 0.192 149.58); /* tw green-500 */
	--mkt-status-warning: oklch(0.7686 0.1647 70.08); /* tw amber-500 */
	--mkt-status-attention: oklch(0.7049 0.1867 47.604); /* tw orange-500 */
	--mkt-status-error: var(--destructive);

	/* Soft tints for status backgrounds (e.g. error pre block on a card). */
	--mkt-status-success-soft: oklch(0.7227 0.192 149.58 / 0.12);
	--mkt-status-warning-soft: oklch(0.7686 0.1647 70.08 / 0.12);
	--mkt-status-attention-soft: oklch(0.7049 0.1867 47.604 / 0.12);
	--mkt-status-error-soft: oklch(0.577 0.245 27.325 / 0.12);
	--mkt-status-running-soft: oklch(0.65 0.2 250 / 0.12);

	/* ---- Marketing tokens — motion ------------------------------------ */
	/*
	 * CSS-side easings, advisory only. GSAP timelines should use the named
	 * equivalents listed in DESIGN.md; these are here so any non-GSAP
	 * transition (hover affordances, side-rail focus) shares the language.
	 */
	--mkt-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ≈ GSAP "power3.out" */
	--mkt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ≈ GSAP "power2.inOut" */
	--mkt-ease-emphasis: cubic-bezier(0.34, 1.32, 0.64, 1); /* gentle overshoot, sparingly */

	--mkt-duration-quick: 200ms;
	--mkt-duration-medium: 500ms;
	--mkt-duration-slow: 900ms;

	/* ---- Marketing tokens — layout scaffolding ------------------------ */
	--mkt-rail-width: 14rem; /* side-rail navigation width */
	--mkt-scene-max-width: 72rem; /* content max-width inside a scene */
	--mkt-content-padding-x: 4rem;
}

.dark {
	/* ---- Product tokens — colour (dark) ------------------------------- */
	--background: oklch(0.16 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--popover: oklch(0.205 0 0);
	--popover-foreground: oklch(0.985 0 0);
	--primary: oklch(0.922 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--accent: oklch(0.269 0 0);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 30%);
	--input: oklch(1 0 0 / 30%);
	--ring: oklch(0.556 0 0);

	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);

	--sidebar: oklch(0.19 0 0);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.269 0 0);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: oklch(1 0 0 / 10%);
	--sidebar-ring: oklch(0.556 0 0);

	--code-background: oklch(0.225 0 0);
	--code-foreground: oklch(0.875 0 0);

	/* ---- Marketing tokens — shadows (dark) ---------------------------- */
	/* Slightly stronger shadows in dark mode so cards still detach. */
	--mkt-shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.4);
	--mkt-shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.5), 0 1px 2px -1px oklch(0 0 0 / 0.4);
	--mkt-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.5), 0 2px 4px -2px oklch(0 0 0 / 0.4);
}

/*
 * prefers-reduced-motion: collapse all marketing motion durations.
 * Pairs with the GSAP-side handling — any scene timeline that respects
 * the user setting jumps to progress(1) on entry. CSS transitions here
 * become instant.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mkt-duration-quick: 0ms;
		--mkt-duration-medium: 0ms;
		--mkt-duration-slow: 0ms;
	}
}