/**
 * Global design tokens.
 *
 * Values are based on the approved dynamic alpine visual direction.
 */

:root {
	/* Brand colors */
	--color-navy-950: #141d31;
	--color-navy-800: #202e51;
	--color-navy-700: #374865;

	--color-coral-500: #fe4158;
	--color-coral-700: #c9344b;

	--color-blue-500: #398fd1;
	--color-blue-700: #236fa8;

	/* Neutral colors */
	--color-white: #ffffff;
	--color-gray-50: #f8fafc;
	--color-gray-200: #d4d3d9;
	--color-gray-500: #9ca2a8;
	--color-gray-700: #555a67;

	/* Semantic assignments */
	--color-background: var(--color-gray-50);
	--color-surface: var(--color-white);
	--color-text: var(--color-navy-950);
	--color-heading: var(--color-navy-800);
	--color-muted: var(--color-gray-700);
	--color-border: var(--color-gray-200);
	--color-accent: var(--color-coral-500);
	--color-accent-strong: var(--color-coral-700);
	--color-focus: var(--color-coral-500);

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

	/* Fluid layout spacing */
	--gutter: clamp(1rem, 4vw, 3rem);
	--section-space: clamp(4rem, 8vw, 7.5rem);
	--section-space-compact: clamp(2.5rem, 5vw, 4.5rem);

	/* Containers */
	--container-default: 80rem;
	--container-wide: 90rem;
	--container-narrow: 48rem;
	--content-measure: 70ch;

	/* Borders and corners */
	--border-width: 1px;
	--radius-sm: 0.125rem;
	--radius-md: 0.25rem;

	/* Shadows */
	--shadow-card: 0 0.75rem 2.5rem rgb(20 29 49 / 8%);
	--shadow-overlay: 0 1rem 3rem rgb(20 29 49 / 18%);

	/* Motion */
	--transition-fast: 160ms ease;
	--transition-standard: 240ms ease;
}

/*
 * Breakpoint contract:
 *
 * Small:   30rem / 480px
 * Medium:  48rem / 768px
 * Large:   64rem / 1024px
 * XLarge:  80rem / 1280px
 * Wide:    90rem / 1440px
 *
 * CSS custom properties cannot be reliably used directly inside media
 * query conditions, so breakpoints are documented rather than exposed
 * as misleading variables.
 */