/* @todo: Update migration with the new names (better matching default Tailwind names) */
/* @todo: Install and document Prettier and ESLint plugins */

/**
 * Default Tâmia theme, extends default Tailwind theme (except colors, text
 * sizes and border radii).
 *
 * Each site can overwrite these values, as well as add custom ones.
 *
 * To add dark mode:
 *
 * @media (prefers-color-scheme: dark) {
 *   :root {
 *     --color-text: #e3e6e8;
 *     --color-background: #2e3033;
 *     --color-primary: #89abd2;
 *   }
 * }
 */

@theme {
	/* Remove default Tailwind tokens */
	--color-*: initial;
	--font-weight-*: initial;
	--text-*: initial;
	--leading-*: initial;
	--radius-*: initial;
	--shadow-*: initial;
	--inset-shadow-*: initial;
	--drop-shadow-*: initial;
	--text-shadow-*: initial;

	/* Colors (light defaults) */
	--color-text: #222;
	--color-background: #fff;
	--color-primary: #6e56ba;
	--color-secondary: #75757c;
	--color-accent: #d396c3;
	--color-border: #ddd;
	--color-selection: #faebaf;

	/* Fonts */
	--font-body: system-ui, sans-serif;
	--font-heading: system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Font sizes */
	--text-root: 1rem;
	--text-xs: 0.75rem;
	--text-sm: 0.9rem;
	--text-base: 1rem;
	--text-lg: 2rem;
	--text-xl: 3rem;

	/* Font weights */
	--font-weight-normal: 400;
	--font-weight-heading: 300;
	--font-weight-bold: 700;

	/* Line heights */
	--leading-normal: 1.5;
	--leading-heading: 1.1;
	--leading-code: 1.3;
	--leading-snug: 1.4;

	/* Semantic spacing */
	/* Whitespace under block elements (p, h1, h2, table, etc.) */
	--spacing-block-margin: 1rem;
	/* Whitespace above headings (h1, h2, etc.) */
	--spacing-heading-margin-top: 2rem;
	/* Horizontal spacing in lists */
	--spacing-list-margin: 1.3em;
	/* Site content horizontal spacing */
	--spacing-content-padding-x: 1rem;
	/* Maximum width of text elements (p, h1, h2, blockquote, etc.) */
	--spacing-text-max-width: 45rem;

	/* Radii */
	--radius-normal: 0.25em;
	--radius-button: 0.25em;
	--radius-full: calc(infinity * 1px);

	/* Borders */
	--border-width-focus: 3px;
	/* Distance from an element to the focus outline */
	--border-width-focus-offset: 2px;

	/* Easings */
	--ease-fade: ease-out;
	--ease-hover: ease-in;

	/* Durations (not in Tailwind theme) */
	--duration-fade: 0.15s;
	--duration-hover: 0.1s;

	/* Tailwind defaults */
	--default-font-family: var(--font-body);
	--default-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
	--default-mono-font-feature-settings: normal;
}

/**
 * Dark theme.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #e3e6e8;
		--color-background: #2e3033;
		--color-primary: #89abd2;
		--color-secondary: #94949e;
		--color-accent: #db76a7;
		--color-border: #dbe2e9;
		--color-selection: #61656b;
	}
}