/*
 * TFTI design tokens.
 *
 * TFTI v1: paper by default, optional ink theme, blue for the next action.
 * The kit and production components consume this same scale.
 */
:root {
	/* palette */
	--tfti-palette-ink: #0c0c0a;
	--tfti-palette-ink-raised: #141410;
	--tfti-palette-ink-muted: #26261f;
	--tfti-palette-ink-border: #33332b;
	--tfti-palette-paper: #f5f4f0;
	--tfti-palette-paper-bright: #fbfaf6;
	--tfti-palette-paper-border: #e1dfd8;
	--tfti-palette-gray-strong: #6b6b62;
	--tfti-palette-gray: #8c8c83;
	--tfti-palette-gray-faint: #a8a69d;
	--tfti-palette-red: #e5372a;
	--tfti-palette-blue: #3e6ef0;
	--tfti-palette-amber: #f2a413;
	--tfti-palette-yellow: #f2c230;
	--tfti-palette-green: #2fbf71;
	--tfti-palette-heart: #ff5470;

}

:root,
[data-tfti-theme='paper'] {
	/* semantic colour roles */
	--tfti-color-canvas: var(--tfti-palette-paper);
	--tfti-color-background-dot: rgba(20, 20, 15, 0.10);
	--tfti-color-surface: var(--tfti-palette-paper-bright);
	--tfti-color-surface-raised: #ffffff;
	--tfti-color-surface-muted: #eeede7;
	--tfti-color-surface-inverse: var(--tfti-palette-ink-raised);
	--tfti-color-text: var(--tfti-palette-ink);
	--tfti-color-text-muted: var(--tfti-palette-gray-strong);
	--tfti-color-text-faint: var(--tfti-palette-gray);
	--tfti-color-text-inverse: var(--tfti-palette-paper);
	--tfti-color-border: var(--tfti-palette-paper-border);
	--tfti-color-border-inverse: var(--tfti-palette-ink-border);
	--tfti-color-action: var(--tfti-palette-blue);
	--tfti-color-action-text: #ffffff;
	--tfti-color-accent: var(--tfti-palette-red);
	--tfti-color-collective: var(--tfti-palette-blue);
	--tfti-color-warning: var(--tfti-palette-amber);
	--tfti-color-pool-near-start: #e99512;
	--tfti-color-pool-near-end: #ffe683;
	--tfti-color-success: var(--tfti-palette-green);
	--tfti-color-danger: var(--tfti-palette-red);
	--tfti-color-affection: var(--tfti-palette-heart);
	--tfti-color-focus: var(--tfti-palette-blue);
	--tfti-color-link: #315bd1;
	--tfti-color-danger-text: #bb2f25;
	--tfti-color-success-text: #187844;
	--tfti-color-warning-text: #8b5600;
	--tfti-color-disabled: #d9d7cf;
	--tfti-color-disabled-text: #77756e;
	--tfti-color-highlight: rgba(62, 110, 240, 0.12);
	--tfti-color-paper: var(--tfti-palette-paper-bright);
	--tfti-color-paper-text: var(--tfti-palette-ink);
	--tfti-color-paper-muted: var(--tfti-palette-gray-strong);
	--tfti-color-chrome: var(--tfti-palette-ink);
	--tfti-color-chrome-text: var(--tfti-palette-paper);
	--tfti-color-scrim: rgba(8, 8, 7, 0.84);

}

:root {
	/* type */
	--tfti-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tfti-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
	--tfti-font-weight-regular: 400;
	--tfti-font-weight-medium: 500;
	--tfti-font-weight-semibold: 600;
	--tfti-font-weight-bold: 700;
	--tfti-font-weight-extrabold: 800;
	--tfti-font-weight-black: 900;
	--tfti-font-size-label-xs: 0.5625rem;
	--tfti-font-size-label-sm: 0.6875rem;
	--tfti-font-size-body-sm: 0.8125rem;
	--tfti-font-size-body: 1rem;
	--tfti-font-size-title-sm: 1.25rem;
	--tfti-font-size-title: 2rem;
	--tfti-font-size-display: clamp(2rem, 5vw, 2.875rem);

	/* spacing */
	--tfti-space-1: 0.25rem;
	--tfti-space-2: 0.5rem;
	--tfti-space-3: 0.75rem;
	--tfti-space-4: 1rem;
	--tfti-space-5: 1.25rem;
	--tfti-space-6: 1.5rem;
	--tfti-space-8: 2rem;
	--tfti-space-10: 2.5rem;
	--tfti-space-12: 3rem;
	--tfti-space-16: 4rem;

	/* shape and controls */
	--tfti-radius-xs: 6px;
	--tfti-radius-sm: 8px;
	--tfti-radius-md: 12px;
	--tfti-radius-lg: 16px;
	--tfti-radius-overlay: 20px;
	--tfti-radius-pill: 9999px;
	--tfti-border-hairline: 1px;
	--tfti-border-emphasis: 1.5px;
	--tfti-control-height-chip: 28px;
	--tfti-control-height-utility: 34px;
	--tfti-control-height-action: 44px;
	--tfti-control-height-commitment: 52px;
	--tfti-control-height-flow: 58px;

	/* depth */
	--tfti-shadow-control: 0 4px 0 var(--tfti-palette-ink);
	--tfti-shadow-float: 0 18px 55px rgba(0, 0, 0, 0.34);
	--tfti-shadow-shell: 0 0 70px -20px rgba(12, 12, 10, 0.55);

	/* motion */
	--tfti-duration-instant: 100ms;
	--tfti-duration-fast: 150ms;
	--tfti-duration-interface: 300ms;
	--tfti-duration-flip: 660ms;
	--tfti-ease-interface: cubic-bezier(0.2, 0.8, 0.2, 1);
	--tfti-ease-flip: cubic-bezier(0.38, 0.03, 0.26, 1);

	/* layout facts; media queries still use literal breakpoints in CSS */
	--tfti-layout-shell-max: 430px;
	--tfti-layout-content-max: 1120px;
	--tfti-layout-reading-max: 720px;
	--tfti-layout-dialog-max: 520px;
	--tfti-layout-mobile-max: 760px;
	--tfti-layout-print-aspect: 4 / 5;
	--tfti-safe-top: env(safe-area-inset-top, 0px);
	--tfti-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.tfti-theme--dark,
[data-tfti-theme='ink'],
.tfti-root.proposal-dark,
.m-shell .shell.dk {
	--tfti-color-canvas: var(--tfti-palette-ink);
	--tfti-color-background-dot: rgba(255, 255, 255, 0.07);
	--tfti-color-surface: var(--tfti-palette-ink-raised);
	--tfti-color-surface-raised: #1c1c17;
	--tfti-color-surface-muted: #10100d;
	--tfti-color-surface-inverse: var(--tfti-palette-paper);
	--tfti-color-text: var(--tfti-palette-paper);
	--tfti-color-text-muted: #b7b5ab;
	--tfti-color-text-faint: var(--tfti-palette-gray);
	--tfti-color-text-inverse: var(--tfti-palette-ink);
	--tfti-color-border: var(--tfti-palette-ink-border);
	--tfti-color-border-inverse: var(--tfti-palette-paper-border);
	--tfti-color-link: #8faef5;
	--tfti-color-danger-text: #ff887e;
	--tfti-color-success-text: #5cd68b;
	--tfti-color-warning-text: #f2bf62;
	--tfti-color-disabled: #272720;
	--tfti-color-disabled-text: #8c8c83;
}

/* Compatibility names still consumed by product patterns. Define them at each
 * theme boundary so an ink dialog never inherits resolved paper colours. New
 * primitives use the semantic names above. */
:where(.tfti-root, [data-tfti-theme], .m-shell .shell) {
	--bg: var(--tfti-color-canvas);
	--white: var(--tfti-color-surface);
	--black: var(--tfti-color-text);
	--gray-100: var(--tfti-color-surface-muted);
	--gray-200: var(--tfti-color-border);
	--gray-300: var(--tfti-color-border);
	--gray-400: var(--tfti-color-text-faint);
	--gray-500: var(--tfti-color-text-muted);
	--accent: var(--tfti-color-accent);
	--green: var(--tfti-color-success);
	--card-bg: var(--tfti-color-surface);
	--card-line: var(--tfti-color-border);
	--card-line-hover: var(--tfti-color-text-faint);
	--modal-bg: var(--tfti-color-surface);
	--modal-line: var(--tfti-color-border);
	--pool-bg: var(--tfti-color-surface-muted);
	--bar-track: var(--tfti-color-border);
	--text-strong: var(--tfti-color-text);
	--text-body: var(--tfti-color-text);
	--text-2: var(--tfti-color-text-muted);
	--text-3: var(--tfti-color-text-faint);
	--pill-active-bg: var(--tfti-color-text);
	--pill-active-fg: var(--tfti-color-canvas);
	--pill-line: var(--tfti-color-border);
	--line: var(--tfti-color-border);
	--mono: var(--tfti-font-mono);
	--body: var(--tfti-font-sans);
	--pixel: var(--tfti-font-sans);
	--radius-xs: var(--tfti-radius-xs);
	--radius-btn-sm: var(--tfti-radius-sm);
	--radius-btn: var(--tfti-radius-md);
	--radius-btn-lg: var(--tfti-radius-md);
	--radius-card: var(--tfti-radius-md);
	--radius-card-lg: var(--tfti-radius-lg);
	--radius-sm: var(--tfti-radius-sm);
	--radius-pill: var(--tfti-radius-pill);
	color-scheme: light;
}
:where([data-tfti-theme='ink'], .tfti-root.proposal-dark, .m-shell .shell.dk) { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
	:root {
		--tfti-duration-interface: 0ms;
		--tfti-duration-flip: 0ms;
	}
}