/*
 * Tallpine tokens v0.3
 * Shared by tallpine.eu (marketing) and docs.tallpine.eu (docs theme).
 * The page is a spruce field; the product (redrawn app UI) keeps the app's own neutral greys,
 * so it reads as an object placed on the page. Colour means state: status colours are copied
 * unchanged from the app and are the only saturated colours. Pine is the brand: logo, focus, links.
 * Theme: dark by default; light via [data-theme="light"], or prefers-color-scheme without JS.
 */
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geist Mono";
	src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist Mono";
	src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ── Brand: deep pine (hue 165). ── */
	--tp-pine: oklch(0.42 0.10 165);        /* #005d3f  logo tile, light-theme buttons, links */
	--tp-pine-deep: oklch(0.35 0.085 165);  /* hover/pressed on light */
	--tp-pine-lift: oklch(0.66 0.11 165);   /* dark theme: underlines, selected marks, focus (non-text) */
	--tp-ivory: oklch(0.965 0.008 95);      /* #f5f3ee  dark-theme primary button and logo strokes */
	--tp-ink: oklch(0.2 0.012 165);

	/* ── Type ──
	 * Display: Bricolage Grotesque, set narrow (font-stretch) and heavy. Body: Geist, the app's own
	 * bundled face, also used inside the redrawn product UI. Mono strictly for code-like values. */
	--tp-font-sans: "Geist", -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
	--tp-font-display: "Bricolage Grotesque", var(--tp-font-sans);
	--tp-font-mono: "Geist Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--tp-display-stretch: 80%;

	/* Scale: the classic typographic scale (12 14 16 18 21 24 36 48 60 72), fluid at the top. */
	--tp-text-hero: clamp(3.25rem, 1.2rem + 5.4vw, 7rem);
	--tp-text-h1: clamp(2.5rem, 1.7rem + 3.2vw, 4.5rem);
	--tp-text-h2: clamp(2rem, 1.5rem + 2vw, 3.375rem);
	--tp-text-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);
	--tp-text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	--tp-text-body: 1.0625rem;
	--tp-text-sm: 0.9375rem;
	--tp-text-xs: 0.8125rem;
	--tp-leading-hero: 0.88;
	--tp-leading-heading: 1;
	--tp-leading-body: 1.55;
	--tp-tracking-hero: -0.008em;
	--tp-tracking-heading: -0.006em;
	--tp-tracking-wordmark: -0.02em;

	/* ── Space ── */
	--tp-space-1: 4px;
	--tp-space-2: 8px;
	--tp-space-3: 12px;
	--tp-space-4: 16px;
	--tp-space-6: 24px;
	--tp-space-8: 32px;
	--tp-space-12: 48px;
	--tp-space-16: 64px;
	--tp-space-24: 96px;
	--tp-section: clamp(80px, 5vw + 48px, 168px);
	--tp-gutter: clamp(20px, 4vw, 80px);
	--tp-max: 1440px;
	--tp-measure: 36rem;

	/* ── Shape: radius follows hierarchy ── */
	--tp-radius-control: 8px;  /* buttons, inputs, chips */
	--tp-radius-block: 10px;   /* code blocks, nodes */
	--tp-radius-window: 14px;  /* redrawn app windows */
	--tp-radius-full: 999px;

	/* ── Motion (app values) ── */
	--tp-duration-fast: 120ms;
	--tp-duration-settle: 280ms;
	--tp-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Dark (default): spruce field ── */
:root {
	color-scheme: dark;
	--tp-bg: oklch(0.19 0.016 165);
	--tp-surface: oklch(0.225 0.02 165);
	--tp-surface-2: oklch(0.27 0.022 165);
	--tp-hover: oklch(1 0 0 / 0.06);
	--tp-fg: var(--tp-ivory);
	--tp-fg-muted: oklch(0.8 0.012 165);
	--tp-fg-passive: oklch(0.7 0.014 165);
	--tp-border: oklch(0.85 0.04 165 / 0.12);
	--tp-border-strong: oklch(0.85 0.04 165 / 0.22);

	--tp-brand: var(--tp-pine);
	--tp-brand-mark: var(--tp-pine-lift);
	--tp-link: var(--tp-fg);
	--tp-focus: var(--tp-pine-lift);
	--tp-btn-primary: var(--tp-pine);       /* the brand action is pine in both themes */
	--tp-btn-primary-hover: oklch(0.47 0.105 165);
	--tp-btn-primary-fg: var(--tp-ivory);
	--tp-band: oklch(0.245 0.04 165);       /* the one brand-tinted surface (IT band) */
	--tp-band-border: oklch(0.34 0.05 165);
	--tp-band-btn: var(--tp-ivory);
	--tp-band-btn-hover: oklch(1 0 0);
	--tp-band-btn-fg: var(--tp-ink);
	/* Pine ridge on the end bands, far to near: haze lighter than the band, the tall pines darkest. */
	--tp-ridge-0: oklch(0.285 0.042 165);
	--tp-ridge-1: oklch(0.245 0.046 165);
	--tp-ridge-2: oklch(0.205 0.04 165);
	--tp-ridge-3: oklch(0.165 0.03 165);

	/* App surfaces, for redrawn product UI: the app's own neutral greys */
	--tp-app-bg: oklch(0.21 0.002 250);
	--tp-app-sidebar: oklch(0.18 0.002 250);
	--tp-app-card: oklch(0.25 0.002 250);
	--tp-app-muted: oklch(0.295 0.002 250);
	--tp-app-fg: oklch(0.97 0.002 250);
	--tp-app-fg-muted: oklch(0.72 0.002 250);
	--tp-app-fg-passive: oklch(0.665 0 0); /* 4.5:1 on the lightest app surface (card) */
	--tp-app-border: oklch(1 0 0 / 0.07);
	--tp-app-primary: oklch(0.9 0.002 250);
	--tp-app-primary-fg: oklch(0.21 0 0);
	--tp-app-link: #79b0dc;
	--tp-shadow-window: 0 0 0 1px oklch(0 0 0 / 0.55), 0 1px 0 0 oklch(1 0 0 / 0.06) inset, 0 60px 120px -50px oklch(0.05 0.02 165 / 0.9);

	/* Status (app, dark) */
	--tp-status-working: #60a5fa;
	--tp-status-needs-you: #ffab2e;
	--tp-status-validating: #facc15;
	--tp-status-in-review: #22d3ee;
	--tp-status-ready: #4ade80;
	--tp-status-merged: #c084fc;
	--tp-status-failed: oklch(0.704 0.191 22.216);
	--tp-badge-fg: #1a1205;               /* text on a needs-you count badge */

	/* Agent avatars in mockups */
	--tp-agent-claude: oklch(0.76 0.11 48);
	--tp-agent-codex: oklch(0.76 0.09 262);
	--tp-agent-kiro: oklch(0.76 0.10 305);
	/* Agent badge initials: lighter than the agent colour so they hold 4.5:1 on its tinted badge. */
	--tp-agent-claude-ink: oklch(0.86 0.075 48);
	--tp-agent-codex-ink: oklch(0.88 0.055 262);
	--tp-agent-kiro-ink: oklch(0.87 0.065 305);
}

/* ── Light: birch paper ── */
:root[data-theme="light"] {
	color-scheme: light;
	--tp-bg: oklch(0.975 0.006 150);
	--tp-surface: oklch(0.995 0.002 150);
	--tp-surface-2: oklch(0.935 0.01 155);
	--tp-hover: oklch(0 0 0 / 0.045);
	--tp-fg: var(--tp-ink);
	--tp-fg-muted: oklch(0.42 0.015 165);
	--tp-fg-passive: oklch(0.5 0.015 165);
	--tp-border: oklch(0.3 0.04 165 / 0.13);
	--tp-border-strong: oklch(0.3 0.04 165 / 0.24);

	--tp-brand: var(--tp-pine);
	--tp-brand-mark: var(--tp-pine);
	--tp-link: var(--tp-pine);
	--tp-focus: var(--tp-pine);
	--tp-btn-primary: var(--tp-pine);
	--tp-btn-primary-hover: var(--tp-pine-deep);
	--tp-btn-primary-fg: oklch(0.99 0.004 95);
	--tp-band: oklch(0.94 0.025 165);
	--tp-band-border: oklch(0.86 0.045 165);
	--tp-band-btn: var(--tp-pine);
	--tp-band-btn-hover: var(--tp-pine-deep);
	--tp-band-btn-fg: oklch(0.99 0.004 95);
	--tp-ridge-0: oklch(0.905 0.02 165);
	--tp-ridge-1: oklch(0.835 0.028 165);
	--tp-ridge-2: oklch(0.72 0.038 165);
	--tp-ridge-3: oklch(0.585 0.048 165);

	--tp-app-bg: oklch(0.97 0 0);
	--tp-app-sidebar: oklch(0.95 0 0);
	--tp-app-card: oklch(1 0 0);
	--tp-app-muted: oklch(0.935 0 0);
	--tp-app-fg: oklch(0.18 0 0);
	--tp-app-fg-muted: oklch(0.45 0 0);
	--tp-app-fg-passive: oklch(0.5 0 0);
	--tp-app-border: oklch(0 0 0 / 0.08);
	--tp-app-primary: oklch(0.24 0 0);
	--tp-app-primary-fg: oklch(0.97 0 0);
	--tp-app-link: #304c83;
	--tp-shadow-window: 0 0 0 1px oklch(0.3 0.04 165 / 0.14), 0 50px 100px -50px oklch(0.3 0.06 165 / 0.45);

	/* Status (app, light): working, needs-you and failed are a step darker than the app so the
	 * illustrations pass AA on the light app greys; hue unchanged. */
	--tp-status-working: #1d4ed8;
	--tp-status-needs-you: #a14a07;
	--tp-status-validating: #ca8a04;
	--tp-status-in-review: #0f766e;
	--tp-status-ready: #15803d;
	--tp-status-merged: #9333ea;
	--tp-status-failed: oklch(0.52 0.215 27.325);
	--tp-badge-fg: #fff;

	--tp-agent-claude: oklch(0.45 0.13 45);
	--tp-agent-codex: oklch(0.43 0.12 262);
	--tp-agent-kiro: oklch(0.44 0.14 305);
	--tp-agent-claude-ink: var(--tp-agent-claude);
	--tp-agent-codex-ink: var(--tp-agent-codex);
	--tp-agent-kiro-ink: var(--tp-agent-kiro);
}

/* Generated by scripts/build.mjs from the block above. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
	color-scheme: light;
	--tp-bg: oklch(0.975 0.006 150);
	--tp-surface: oklch(0.995 0.002 150);
	--tp-surface-2: oklch(0.935 0.01 155);
	--tp-hover: oklch(0 0 0 / 0.045);
	--tp-fg: var(--tp-ink);
	--tp-fg-muted: oklch(0.42 0.015 165);
	--tp-fg-passive: oklch(0.5 0.015 165);
	--tp-border: oklch(0.3 0.04 165 / 0.13);
	--tp-border-strong: oklch(0.3 0.04 165 / 0.24);

	--tp-brand: var(--tp-pine);
	--tp-brand-mark: var(--tp-pine);
	--tp-link: var(--tp-pine);
	--tp-focus: var(--tp-pine);
	--tp-btn-primary: var(--tp-pine);
	--tp-btn-primary-hover: var(--tp-pine-deep);
	--tp-btn-primary-fg: oklch(0.99 0.004 95);
	--tp-band: oklch(0.94 0.025 165);
	--tp-band-border: oklch(0.86 0.045 165);
	--tp-band-btn: var(--tp-pine);
	--tp-band-btn-hover: var(--tp-pine-deep);
	--tp-band-btn-fg: oklch(0.99 0.004 95);
	--tp-ridge-0: oklch(0.905 0.02 165);
	--tp-ridge-1: oklch(0.835 0.028 165);
	--tp-ridge-2: oklch(0.72 0.038 165);
	--tp-ridge-3: oklch(0.585 0.048 165);

	--tp-app-bg: oklch(0.97 0 0);
	--tp-app-sidebar: oklch(0.95 0 0);
	--tp-app-card: oklch(1 0 0);
	--tp-app-muted: oklch(0.935 0 0);
	--tp-app-fg: oklch(0.18 0 0);
	--tp-app-fg-muted: oklch(0.45 0 0);
	--tp-app-fg-passive: oklch(0.5 0 0);
	--tp-app-border: oklch(0 0 0 / 0.08);
	--tp-app-primary: oklch(0.24 0 0);
	--tp-app-primary-fg: oklch(0.97 0 0);
	--tp-app-link: #304c83;
	--tp-shadow-window: 0 0 0 1px oklch(0.3 0.04 165 / 0.14), 0 50px 100px -50px oklch(0.3 0.06 165 / 0.45);

	/* Status (app, light): working, needs-you and failed are a step darker than the app so the
	 * illustrations pass AA on the light app greys; hue unchanged. */
	--tp-status-working: #1d4ed8;
	--tp-status-needs-you: #a14a07;
	--tp-status-validating: #ca8a04;
	--tp-status-in-review: #0f766e;
	--tp-status-ready: #15803d;
	--tp-status-merged: #9333ea;
	--tp-status-failed: oklch(0.52 0.215 27.325);
	--tp-badge-fg: #fff;

	--tp-agent-claude: oklch(0.45 0.13 45);
	--tp-agent-codex: oklch(0.43 0.12 262);
	--tp-agent-kiro: oklch(0.44 0.14 305);
	--tp-agent-claude-ink: var(--tp-agent-claude);
	--tp-agent-codex-ink: var(--tp-agent-codex);
	--tp-agent-kiro-ink: var(--tp-agent-kiro);
	}
}