/*
  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.

  The signature gradients are tokens too. Rebranding usually only needs
  new --color-brand-* / --color-accent-* values -- the gradients follow.
  For a flat, gradient-free brand, set the --gradient-* tokens to solid
  colors.

  --font-body is defined by the font pipeline in astro.config.mjs, not
  here. To swap the loaded webfont, edit the fonts entry there. To use a
  system font, or a different face for headings only, override
  --font-body / --font-heading in theme.css.
*/

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

		/* Colors */
		--color-bg: light-dark(#ffffff, #0f172a);
		--color-text: light-dark(#0f172a, #f1f5f9);
		--color-muted: light-dark(#64748b, #94a3b8);
		--color-border: light-dark(#e2e8f0, #334155);
		--color-surface: light-dark(#f8fafc, #1e293b);
		--color-brand: light-dark(#6366f1, #818cf8);
		--color-brand-strong: light-dark(#4f46e5, #6366f1);
		--color-brand-soft: light-dark(#818cf8, #a5b4fc);
		--color-accent: #f472b6; /* gradient partner to --color-brand */
		--color-accent-soft: #f9a8d4;
		--color-on-brand: white; /* text/icons on brand and gradient surfaces */
		--color-brand-ring: color-mix(in srgb, var(--color-brand) 10%, transparent);
		--color-success: #22c55e;
		--color-warning: #f59e0b;
		--color-danger: light-dark(#dc2626, #f87171);

		/* Gradients */
		--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
		--gradient-brand-strong: linear-gradient(
			135deg,
			var(--color-brand-strong),
			var(--color-accent)
		); /* CTA resting state; hovers to --gradient-brand */
		--gradient-brand-soft: linear-gradient(
			135deg,
			var(--color-brand-soft),
			var(--color-accent-soft)
		); /* hero image glow */
		--gradient-headline: linear-gradient(
			135deg,
			var(--color-text),
			var(--color-muted)
		); /* hero headline text fill */

		/* Typography */
		--font-heading: var(--font-body);
		--font-weight-heading: 700; /* h2-h6, card titles */
		--font-weight-display: 800; /* hero and section headlines, logo */

		/* Type scale */
		--font-size-xs: 0.75rem;
		--font-size-sm: 0.875rem;
		--font-size-base: 1rem;
		--font-size-lg: 1.125rem;
		--font-size-xl: 1.25rem;
		--font-size-2xl: 1.5rem;
		--font-size-3xl: 2rem;
		--font-size-4xl: 2.5rem;
		--font-size-5xl: 3.5rem;
		--font-size-6xl: 4.5rem;

		/* Line heights */
		--leading-tight: 1.1; /* hero headline */
		--leading-snug: 1.2; /* headings */
		--leading-normal: 1.6; /* body copy */
		--leading-relaxed: 1.7; /* FAQ answers, long-form */

		/* Letter spacing */
		--tracking-tight: -0.03em; /* hero headline, logo, prices */
		--tracking-snug: -0.02em; /* headings */

		/* 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;
		--spacing-5xl: 8rem;

		/* Layout */
		--max-width: 720px;
		--wide-width: 1200px;
		--radius-sm: 6px;
		--radius: 10px;
		--radius-lg: 16px;
		--radius-full: 9999px;

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

		/* Shadows */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	}

	/*
	 * 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: #ffffff;
			--color-text: #0f172a;
			--color-muted: #64748b;
			--color-border: #e2e8f0;
			--color-surface: #f8fafc;
			--color-brand: #6366f1;
			--color-brand-strong: #4f46e5;
			--color-brand-soft: #818cf8;
			--color-danger: #dc2626;
		}
	}
}