/*
 * SBVC design tokens.
 *
 * Values from design/sbvc/project/tokens/{colors,spacing,typography}.css, with
 * three deliberate differences:
 *   1. Fonts: Montserrat (display) and Gabarito (body), self-hosted through
 *      theme.json, replace Cinzel and Jost (Kapono, 30 Oct 2026).
 *   2. The navy and sand tints are plain rgba() of the same colors rather than
 *      oklch(from ...), so they render in every browser the club's parents use.
 *   3. --text-link and --button-bg use teal-dark: white on Channel Teal is
 *      2.99:1 and teal on ivory 2.70:1, both under WCAG AA. Teal-dark is 4.57:1
 *      under white text. Plain teal stays for accents on navy (5.50:1).
 *   4. Display sizes clamp down on phones (the system's are fixed, sized for
 *      print and social), and body text is 17px rather than 16px for web reading.
 */

:root {
	--navy: #0D1F3A;
	--navy-2: #152a4d;
	--teal: #00A79D;
	--teal-dark: #00847c;
	--ivory: #F6F3ED;
	--sand: #DCCCB3;
	--fuchsia: #FF2D8F;
	--lime: #B6E02E;
	--gray-bg: #EAEAEA;
	--white: #FFFFFF;
	--danger: #C23B3B;

	--navy-10: rgba(13, 31, 58, 0.10);
	--navy-40: rgba(13, 31, 58, 0.40);
	--teal-10: rgba(0, 167, 157, 0.12);

	--surface-page: var(--ivory);
	--surface-card: var(--white);
	--surface-sunken: rgba(220, 204, 179, 0.25);
	--surface-inverse: var(--navy);

	--text-primary: var(--navy);
	--text-secondary: rgba(13, 31, 58, 0.72);
	--text-muted: rgba(13, 31, 58, 0.60);
	--text-inverse: var(--ivory);
	--text-inverse-secondary: rgba(246, 243, 237, 0.80);
	--text-link: var(--navy);
	--text-link-underline: var(--teal-dark);

	--border-default: rgba(13, 31, 58, 0.16);
	--border-strong: rgba(13, 31, 58, 0.35);
	--border-inverse: rgba(246, 243, 237, 0.24);
	--focus-ring: var(--teal);

	--button-bg: var(--teal-dark);
	--button-text: var(--white);

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(13, 31, 58, 0.08);
	--shadow-md: 0 4px 16px rgba(13, 31, 58, 0.12);
	--shadow-lg: 0 12px 32px rgba(13, 31, 58, 0.18);

	--container-max: 1200px;
	--container-text: 760px;
	--gutter: clamp(16px, 4vw, 32px);

	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;

	--font-display: Montserrat, 'Helvetica Neue', Arial, sans-serif;
	--font-body: Gabarito, 'Century Gothic', Avenir, 'Gill Sans', sans-serif;

	--tracking-badge: 0.14em;
	--tracking-wide: 0.06em;

	--text-display-xl: clamp(36px, 5.5vw, 64px);
	--text-display-lg: clamp(30px, 4vw, 44px);
	--text-display-md: clamp(24px, 3vw, 32px);
	--text-display-sm: 22px;
	--text-body-lg: 19px;
	--text-body-md: 17px;
	--text-body-sm: 15px;
	--text-caption: 12px;

	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.55;
}