/**
 * Falirakion Beach Studios — Design Tokens (Phase 2)
 * Source of truth for colors, type, space, radius, shadows, breakpoints.
 */

:root {
	/* Colors — Mediterranean premium (match design mockups) */
	--fbs-primary: #0a5ea8;
	--fbs-primary-dark: #084b87;
	--fbs-primary-light: #1a7bd1;
	--fbs-secondary: #2b7fc1;
	--fbs-accent: #fdcb08;
	--fbs-accent-dark: #e0b400;
	--fbs-accent-hover: #ffe14a;
	--fbs-dark: #122033;
	--fbs-dark-soft: #1e2f45;
	--fbs-light: #eaf3fa;
	--fbs-light-alt: #f5f8fb;
	--fbs-white: #ffffff;
	--fbs-muted: #4a5c6e;
	--fbs-border: #d5e2ee;
	--fbs-success: #1f8a5b;
	--fbs-error: #c0392b;
	--fbs-overlay: rgba(10, 30, 55, 0.45);

	/* Semantic aliases */
	--fbs-text: var(--fbs-dark);
	--fbs-text-muted: var(--fbs-muted);
	--fbs-text-inverse: var(--fbs-white);
	--fbs-bg: var(--fbs-white);
	--fbs-bg-alt: var(--fbs-light-alt);
	--fbs-link: var(--fbs-primary);
	--fbs-link-hover: var(--fbs-primary-dark);

	/* Typography — PRD: Great Vibes / Cormorant Garamond / Montserrat */
	--fbs-font-heading: "Cormorant Garamond", Georgia, serif;
	--fbs-font-body: "Montserrat", "Segoe UI", sans-serif;
	--fbs-font-nav: "Montserrat", "Segoe UI", sans-serif;
	--fbs-font-button: "Montserrat", "Segoe UI", sans-serif;
	--fbs-font-accent: "Great Vibes", cursive;
	--fbs-font-brand-script: "Great Vibes", cursive;
	--fbs-font-brand-serif: "Cormorant Garamond", Georgia, serif;
	--fbs-subtitle-gold: #a68226;

	--fbs-fw-regular: 400;
	--fbs-fw-medium: 500;
	--fbs-fw-semibold: 600;
	--fbs-fw-bold: 700;

	--fbs-fs-xs: 0.75rem;    /* 12px */
	--fbs-fs-sm: 0.875rem;   /* 14px */
	--fbs-fs-base: 1rem;     /* 16px */
	--fbs-fs-md: 1.125rem;   /* 18px */
	--fbs-fs-lg: 1.25rem;    /* 20px */
	--fbs-fs-xl: 1.5rem;     /* 24px */
	--fbs-fs-2xl: 2rem;      /* 32px */
	--fbs-fs-3xl: 2.5rem;    /* 40px */
	--fbs-fs-4xl: 3rem;      /* 48px */
	--fbs-fs-5xl: 3.5rem;    /* 56px */

	--fbs-lh-tight: 1.2;
	--fbs-lh-snug: 1.35;
	--fbs-lh-normal: 1.6;
	--fbs-lh-relaxed: 1.75;

	--fbs-ls-tight: -0.02em;
	--fbs-ls-normal: 0;
	--fbs-ls-wide: 0.08em;
	--fbs-ls-eyebrow: 0.14em;

	/* Spacing scale */
	--fbs-space-2xs: 0.25rem;  /* 4px */
	--fbs-space-xs: 0.5rem;    /* 8px */
	--fbs-space-sm: 0.75rem;   /* 12px */
	--fbs-space-md: 1rem;      /* 16px */
	--fbs-space-lg: 1.5rem;    /* 24px */
	--fbs-space-xl: 2rem;      /* 32px */
	--fbs-space-2xl: 3rem;     /* 48px */
	--fbs-space-3xl: 4rem;     /* 64px */
	--fbs-space-4xl: 5rem;     /* 80px */
	--fbs-space-5xl: 6.25rem;  /* 100px */

	/* Layout */
	--fbs-container: 72.5rem;       /* 1160px */
	--fbs-container-wide: 80rem;    /* 1280px */
	--fbs-container-narrow: 45rem;  /* 720px */
	--fbs-gutter: 1.25rem;
	--fbs-section-y: var(--fbs-space-4xl);

	/* Border radius */
	--fbs-radius-sm: 8px;
	--fbs-radius-md: 12px;
	--fbs-radius-lg: 16px;
	--fbs-radius-xl: 24px;
	--fbs-radius-pill: 999px;

	/* Shadows — soft, professional */
	--fbs-shadow-xs: 0 1px 2px rgba(18, 32, 51, 0.06);
	--fbs-shadow-sm: 0 4px 12px rgba(18, 32, 51, 0.08);
	--fbs-shadow-md: 0 8px 24px rgba(18, 32, 51, 0.1);
	--fbs-shadow-lg: 0 16px 40px rgba(18, 32, 51, 0.12);
	--fbs-shadow-hover: 0 10px 28px rgba(10, 94, 168, 0.18);

	/* Motion */
	--fbs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fbs-duration-fast: 150ms;
	--fbs-duration: 250ms;
	--fbs-duration-slow: 400ms;

	/* Breakpoint references (for documentation / JS; CSS uses media queries) */
	--fbs-bp-xs: 320px;
	--fbs-bp-sm: 375px;
	--fbs-bp-md: 768px;
	--fbs-bp-lg: 1024px;
	--fbs-bp-xl: 1366px;
	--fbs-bp-2xl: 1440px;
	--fbs-bp-3xl: 1920px;

	/* Focus */
	--fbs-focus-ring: 0 0 0 3px rgba(10, 94, 168, 0.55);

	/* Header / chrome (Phase 6 will refine) */
	--fbs-header-height: 5rem;
	--fbs-header-height-mobile: 4rem;
}

@media (max-width: 1023px) {
	:root {
		--fbs-section-y: var(--fbs-space-3xl);
		--fbs-gutter: 1rem;
	}
}

@media (max-width: 767px) {
	:root {
		--fbs-section-y: var(--fbs-space-2xl);
		--fbs-fs-4xl: 2.25rem;
		--fbs-fs-5xl: 2.5rem;
		--fbs-fs-3xl: 2rem;
		--fbs-gutter: 1rem;
	}
}

@media (max-width: 375px) {
	:root {
		--fbs-section-y: var(--fbs-space-xl);
		--fbs-fs-3xl: 1.85rem;
		--fbs-fs-4xl: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--fbs-duration-fast: 0ms;
		--fbs-duration: 0ms;
		--fbs-duration-slow: 0ms;
	}
}