/**
 * Rhodes Boat — design tokens (Phase 2).
 * Single source of truth for colors, type, space, radius, shadow, breakpoints.
 */

:root {
	/* —— Brand colors —— */
	--rb-navy: #07131c;
	--rb-bg-primary: #07131c;
	--rb-dark: #091824;
	--rb-secondary-dark: #102532;
	--rb-gold: #d6af45;
	--rb-gold-light: #e8cb72;
	--rb-gold-dark: #b8942f;
	--rb-white: #ffffff;
	--rb-light: #f5f7f7;
	--rb-light-alt: #eef1f2;
	--rb-text: #17212b;
	--rb-muted: #6c7780;
	--rb-border: #e2e7e8;
	--rb-success: #2f6b4f;
	--rb-danger: #9b2c2c;
	--rb-focus: #d6af45;

	/* —— Surfaces —— */
	--rb-surface: var(--rb-white);
	--rb-surface-muted: var(--rb-light);
	--rb-surface-dark: var(--rb-navy);
	--rb-overlay: rgba(7, 19, 28, 0.55);
	--rb-overlay-strong: rgba(7, 19, 28, 0.72);

	/* —— Typography —— */
	--rb-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--rb-font-body: "Manrope", system-ui, -apple-system, sans-serif;

	--rb-text-xs: 0.6875rem;   /* 11px — eyebrow */
	--rb-text-sm: 0.8125rem;   /* 13px — UI / buttons */
	--rb-text-md: 0.9375rem;   /* 15px — body compact */
	--rb-text-base: 1rem;      /* 16px — body */
	--rb-text-lg: 1.0625rem;   /* 17px — lead */
	--rb-text-xl: 1.25rem;     /* 20px — card title */
	--rb-text-2xl: 1.625rem;   /* 26px — card heading max */
	--rb-text-3xl: clamp(1.75rem, 3vw, 2.25rem);   /* section ~36–42 */
	--rb-text-4xl: clamp(2.125rem, 4vw, 3.25rem);  /* section 42–56 */
	--rb-text-hero: clamp(2.5rem, 5.5vw, 5rem);    /* 40–80 */

	--rb-leading-tight: 1.1;
	--rb-leading-snug: 1.25;
	--rb-leading-normal: 1.6;
	--rb-tracking-eyebrow: 0.16em;
	--rb-tracking-btn: 0.08em;
	--rb-tracking-nav: 0.04em;

	/* —— Spacing scale —— */
	--rb-space-1: 0.25rem;
	--rb-space-2: 0.5rem;
	--rb-space-3: 1rem;
	--rb-space-4: 1.5rem;
	--rb-space-5: 2rem;
	--rb-space-6: 3rem;
	--rb-space-7: 4rem;
	--rb-space-8: 6rem;
	--rb-space-9: 8rem;

	/* —— Layout —— */
	--rb-container: 1200px;
	--rb-container-narrow: 760px;
	--rb-container-wide: 1400px;
	--rb-gutter: var(--rb-space-4);
	--rb-section-y: var(--rb-space-8);
	--rb-section-y-sm: var(--rb-space-6);

	/* —— Radius —— */
	--rb-radius-sm: 12px;
	--rb-radius: 16px;
	--rb-radius-lg: 20px;
	--rb-radius-pill: 999px;

	/* —— Shadows —— */
	--rb-shadow-sm: 0 2px 8px rgba(7, 19, 28, 0.06);
	--rb-shadow: 0 8px 30px rgba(7, 19, 28, 0.08);
	--rb-shadow-hover: 0 12px 40px rgba(7, 19, 28, 0.12);
	--rb-shadow-lg: 0 20px 50px rgba(7, 19, 28, 0.16);
	--rb-shadow-dark: 0 12px 40px rgba(0, 0, 0, 0.35);

	/* —— Borders —— */
	--rb-border-width: 1px;
	--rb-border-style: solid;
	--rb-hairline: var(--rb-border-width) var(--rb-border-style) var(--rb-border);

	/* —— Motion —— */
	--rb-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rb-duration-fast: 150ms;
	--rb-duration: 280ms;
	--rb-duration-slow: 500ms;

	/* —— Breakpoint reference (for JS / docs; media queries use px) —— */
	--rb-bp-xs: 360px;
	--rb-bp-sm: 480px;
	--rb-bp-md: 768px;
	--rb-bp-lg: 1024px;
	--rb-bp-xl: 1280px;
	--rb-bp-2xl: 1440px;
	--rb-bp-3xl: 1920px;

	/* —— Z-index —— */
	--rb-z-dropdown: 100;
	--rb-z-sticky: 1000;
	--rb-z-overlay: 1100;
	--rb-z-modal: 1200;
	--rb-z-toast: 1300;
}

@media (max-width: 768px) {
	:root {
		--rb-gutter: var(--rb-space-3);
		--rb-section-y: var(--rb-space-6);
		--rb-section-y-sm: var(--rb-space-5);
	}
}