/*
  theme.css -- override any :root variable here to retheme the site.

  This is the only file you need to edit to customize the site's visual
  appearance. All defaults are listed below as comments. Uncomment and
  change any value to override it.

  Base.astro puts its defaults inside @layer base, so declarations here
  (which are unlayered) always take priority -- no specificity tricks needed.

  Note: this template defines explicit dark mode colors in Base.astro.
  Overriding light-mode --color-* variables here won't affect dark mode.
  To customize dark mode, also override --color-* variables inside a
  @media (prefers-color-scheme: dark) block and/or in the :root.dark rule.
*/

:root {
	/* --- Colors ---
	--color-bg: #fafafa;
	--color-text: #1a1a1a;
	--color-muted: #6b7280;
	--color-border: #e5e7eb;
	--color-surface: #ffffff;
	--color-accent: #7c3aed;
	--color-accent-muted: #a78bfa;
	*/

	/* --- Typography ---
	--font-sans: system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, monospace;
	--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;
	*/

	/* --- 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;
	*/
}
