@import "tailwindcss";

/*
 * Sibling packages that build on these utilities.
 *
 * They are reached through workspace symlinks, which Tailwind's automatic
 * content detection skips — without these the classes in the editor and the
 * questionnaire views resolve to nothing at all, silently.
 */
@source "../../../packages/editor/src/**/*.tsx";
@source "../../../packages/question/src/**/*.tsx";

/*
 * The palette.
 *
 * Light only, and deliberately small: this is the complete set of tokens the
 * editor and questionnaire styles actually read. The editor's own stylesheet
 * remaps MDXEditor's Radix variables onto these, so there is one place to
 * change a colour and no second theme to keep in step.
 *
 * `static` emits the palette whole. Without it Tailwind keeps only the tokens
 * it can see a utility class using, and it looks for those in the content
 * files — so a token read solely through `var()` in a stylesheet is pruned.
 */
@theme static {
	--color-background: oklch(1 0 0);
	--color-foreground: oklch(0.21 0.006 285);

	/* The chrome around the document: a tint, so the plan is the only white surface. */
	--color-surface: oklch(0.985 0.001 285);

	--color-muted: oklch(0.968 0.002 285);
	--color-muted-foreground: oklch(0.552 0.014 285);

	--color-card: oklch(1 0 0);
	--color-card-foreground: oklch(0.21 0.006 285);

	--color-popover: oklch(1 0 0);
	--color-popover-foreground: oklch(0.21 0.006 285);

	--color-primary: oklch(0.55 0.15 258);
	--color-primary-foreground: oklch(0.985 0 0);
	--color-primary-hover: oklch(0.48 0.16 258);

	--color-secondary: oklch(0.968 0.002 285);
	--color-secondary-foreground: oklch(0.21 0.006 285);

	/*
	 * Used as a wash rather than a fill: highlights mix it down to 16–45%, so
	 * it needs enough chroma to survive being diluted against white.
	 */
	--color-accent: oklch(0.85 0.09 250);
	--color-accent-foreground: oklch(0.21 0.006 285);

	--color-destructive: oklch(0.58 0.22 27);
	--color-destructive-foreground: oklch(0.985 0 0);

	--color-success: oklch(0.62 0.13 155);
	--color-warning: oklch(0.72 0.15 75);

	--color-border: oklch(0.92 0.004 285);
	--color-input: oklch(0.92 0.004 285);
	--color-ring: oklch(0.62 0.14 258);

	/* Code and formula surfaces, which want to read as insets rather than cards. */
	--color-code: oklch(0.972 0.003 285);

	/*
	 * Wide steps from `base` up, where a heading needs to outrank its body by
	 * more than weight; narrow below, where the sizes are already near the floor
	 * of legibility. Line heights are declared beside each size because
	 * Tailwind's defaults are computed against Tailwind's sizes.
	 */
	--text-*: initial;
	--text-2xs: 0.6875rem; /* 11px — timestamps, counts, gutter chips */
	--text-2xs--line-height: 1rem;
	--text-xs: 0.75rem; /* 12px — secondary chrome */
	--text-xs--line-height: 1rem;
	--text-sm: 0.8125rem; /* 13px — rail body */
	--text-sm--line-height: 1.25rem;
	--text-base: 0.9375rem; /* 15px — the document */
	--text-base--line-height: 1.5rem;
	--text-lg: 1.125rem; /* 18px — h3 */
	--text-lg--line-height: 1.5rem;
	--text-xl: 1.375rem; /* 22px — h2 */
	--text-xl--line-height: 1.75rem;
	--text-2xl: 1.75rem; /* 28px — h1 */
	--text-2xl--line-height: 2.125rem;

	/*
	 * Tailwind's own values, declared here so the scale has one owner: a change
	 * lands in one place, and a misspelt rung is caught rather than waved through.
	 */
	--radius-*: initial;
	--radius-sm: 0.25rem; /* 4px — buttons, grips, toolbar cells */
	--radius-md: 0.375rem; /* 6px — cards, inputs, callouts, code blocks */
	--radius-lg: 0.5rem; /* 8px — popovers and panels */

	/*
	 * Two stops from `sm` up: a tight contact shadow where the surface meets the
	 * page, a wide ambient fall-off around it. One stop has to choose, and either
	 * choice reads as a blurred border. Mixed from `foreground` rather than black,
	 * which would grey toward a different hue than the rest of the page.
	 *
	 * `initial` first, here and in the scales below: `@theme` merges with
	 * Tailwind's rather than replacing it, so a rung we do not declare keeps
	 * resolving to a value from a different design system. Reaching for one
	 * should draw nothing, not something plausible.
	 */
	--shadow-*: initial;
	--shadow-xs: 0 1px 2px -1px color-mix(in oklch, var(--color-foreground) 8%, transparent);
	--shadow-sm:
		0 1px 2px -1px color-mix(in oklch, var(--color-foreground) 8%, transparent),
		0 2px 4px -1px color-mix(in oklch, var(--color-foreground) 5%, transparent);
	--shadow-md:
		0 2px 4px -2px color-mix(in oklch, var(--color-foreground) 8%, transparent),
		0 6px 12px -2px color-mix(in oklch, var(--color-foreground) 7%, transparent);
	--shadow-lg:
		0 4px 8px -4px color-mix(in oklch, var(--color-foreground) 10%, transparent),
		0 16px 28px -6px color-mix(in oklch, var(--color-foreground) 8%, transparent);

	/* Inter is loaded in `main.tsx`; the editor reads this token rather than repeating the stack. */
	--font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html,
body,
#root {
	height: 100%;
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-sans);

	/* macOS subpixel smoothing thickens Inter past the weight asked for. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}