/*
  tokens.css -- the design tokens for this template. These are the
  defaults; to customize the site, override any variable in
  src/styles/theme.css rather than editing this file. Declarations in
  theme.css are unlayered, so they always beat these @layer base
  defaults -- no specificity tricks needed.

  Colors use light-dark(): the first value applies in light mode, the
  second in dark mode. Overriding a color with a plain value changes
  both modes at once; use light-dark(<light>, <dark>) in an override to
  keep them distinct.

  --font-heading (the serif display face) is defined by the font
  pipeline in astro.config.mjs, not here. To swap it, edit the fonts
  entry there. --font-body is the deliberately quiet system sans stack
  below.
*/

@layer base {
	:root {
		color-scheme: light dark;

		/* Colors */
		--color-bg: light-dark(#fafafa, #0a0a0a);
		--color-text: light-dark(#1a1a1a, #f5f5f5);
		--color-muted: light-dark(#6b7280, #a1a1aa);
		--color-border: light-dark(#e5e7eb, #27272a);
		--color-surface: light-dark(#ffffff, #18181b);
		--color-brand: light-dark(#7c3aed, #a78bfa); /* the single accent, used sparingly */
		--color-on-brand: white; /* text on brand-colored surfaces */
		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
		--color-danger: light-dark(#dc2626, #f87171);

		/* Typography */
		--font-body: system-ui, -apple-system, sans-serif;
		--font-weight-heading: 500; /* serif headings and titles */
		--font-weight-display: 500; /* hero and page titles */

		/* Type scale */
		--font-size-xs: 0.75rem;
		--font-size-sm: 0.875rem;
		--font-size-base: 1.0625rem;
		--font-size-lg: 1.25rem;
		--font-size-xl: 1.5rem;
		--font-size-2xl: 2rem;
		--font-size-3xl: 2.75rem;
		--font-size-4xl: 3.5rem;

		/* Line heights */
		--leading-tight: 1.1; /* hero and project titles */
		--leading-snug: 1.2; /* headings */
		--leading-normal: 1.6; /* body copy */
		--leading-relaxed: 1.7; /* long-form content */

		/* Letter spacing */
		--tracking-tight: -0.02em; /* site title, hero title */
		--tracking-wide: 0.05em; /* uppercase meta lines, tag chips */

		/* Spacing */
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		--spacing-2xl: 3rem;
		--spacing-3xl: 4rem;
		--spacing-4xl: 6rem;

		/* Layout */
		--max-width: 720px;
		--wide-width: 1200px;
		--radius: 4px;

		/* Transitions */
		--transition-fast: 150ms ease;
		--transition-base: 200ms ease;
		--transition-slow: 300ms ease;
	}

	/*
	 * Light-mode values for browsers without light-dark() (Safari < 17.5,
	 * Chrome < 123). Must mirror the light values above.
	 */
	@supports not (color: light-dark(#000, #fff)) {
		:root {
			color-scheme: light;
			--color-bg: #fafafa;
			--color-text: #1a1a1a;
			--color-muted: #6b7280;
			--color-border: #e5e7eb;
			--color-surface: #ffffff;
			--color-brand: #7c3aed;
			--color-danger: #dc2626;
		}
	}
}