/**
 * FindCaptains Design System — tokens
 * Brand System owns brand HEX; this file maps them to semantic implementation tokens.
 */
:root {
	/* Locked brand primitives (from docs/BRAND_SYSTEM.md / brand/colors) */
	--fc-brand-atlantic-navy: #0b1f33;
	--fc-brand-sea-glass: #19938f;
	--fc-brand-captains-gold: #c49a57;
	--fc-brand-warm-sand: #e8d9b5;
	--fc-brand-slate: #55616d;
	--fc-brand-white: #ffffff;

	/* Brand aliases used by components */
	--fc-color-ocean-navy: var(--fc-brand-atlantic-navy);
	--fc-color-deep-blue: var(--fc-brand-sea-glass);
	--fc-color-seafoam: var(--fc-brand-sea-glass);
	--fc-color-gold: var(--fc-brand-captains-gold);
	--fc-color-slate: var(--fc-brand-slate);
	--fc-color-light-sand: color-mix(in srgb, var(--fc-brand-warm-sand) 55%, var(--fc-brand-white));

	/* Semantic status (UI — not brand marketing colors) */
	--fc-color-success: #1b7f4e;
	--fc-color-success-bg: #e8f6ef;
	--fc-color-success-ink: #14532d;
	--fc-color-warning: #a16207;
	--fc-color-warning-bg: #fef6e7;
	--fc-color-warning-ink: #713f12;
	--fc-color-danger: #b91c1c;
	--fc-color-danger-bg: #fef2f2;
	--fc-color-danger-ink: #7f1d1d;
	--fc-color-danger-hover: #991b1b;
	--fc-color-info: #1d4f91;
	--fc-color-info-bg: #e8f1fa;
	--fc-color-info-ink: #1e3a5f;
	--fc-color-skeleton-mid: #e2e8f0;

	/* Surfaces — public website uses white canvas; Warm Sand is accent-only */
	--fc-color-bg: var(--fc-brand-white);
	--fc-color-surface: var(--fc-brand-white);
	--fc-color-surface-raised: var(--fc-brand-white);
	--fc-color-muted: var(--fc-brand-slate);
	--fc-color-border: color-mix(in srgb, var(--fc-brand-slate) 28%, var(--fc-brand-white));
	--fc-color-border-strong: color-mix(in srgb, var(--fc-brand-slate) 45%, var(--fc-brand-white));
	--fc-color-text: var(--fc-brand-atlantic-navy);
	--fc-color-text-inverse: var(--fc-brand-white);
	--fc-color-focus: var(--fc-brand-sea-glass);
	--fc-color-overlay: color-mix(in srgb, var(--fc-brand-atlantic-navy) 48%, transparent);
	--fc-color-action: var(--fc-brand-sea-glass);
	--fc-color-action-hover: color-mix(in srgb, var(--fc-brand-atlantic-navy) 35%, var(--fc-brand-sea-glass));

	/* Typography — Montserrat throughout UI/marketing; Myriad only in outlined logo SVG */
	--fc-font-sans: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--fc-font-display: var(--fc-font-sans);

	--fc-text-display: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
	--fc-text-h1: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem);
	--fc-text-h2: 1.5rem;
	--fc-text-h3: 1.25rem;
	--fc-text-h4: 1.125rem;
	--fc-text-h5: 1rem;
	--fc-text-h6: 0.875rem;
	--fc-text-body: 1rem;
	--fc-text-small: 0.875rem;
	--fc-text-caption: 0.75rem;

	--fc-leading-tight: 1.25;
	--fc-leading-snug: 1.375;
	--fc-leading-normal: 1.55;
	--fc-leading-relaxed: 1.7;

	--fc-weight-regular: 400;
	--fc-weight-medium: 500;
	--fc-weight-semibold: 600;
	--fc-weight-bold: 700;

	/* Spacing scale */
	--fc-space-1: 0.25rem;
	--fc-space-2: 0.5rem;
	--fc-space-3: 0.75rem;
	--fc-space-4: 1rem;
	--fc-space-5: 1.25rem;
	--fc-space-6: 1.5rem;
	--fc-space-8: 2rem;
	--fc-space-10: 2.5rem;
	--fc-space-12: 3rem;
	--fc-space-16: 4rem;

	/* Modest white breathing room between final public content/CTA band and navy footer. */
	--fc-public-pre-footer-gap: 2.25rem;

	/* Public section rhythm (UI-05B) */
	--fc-section-space-compact: 2.75rem; /* ~44px */
	--fc-section-space: 3.75rem; /* ~60px default */
	--fc-section-space-spacious: 5rem; /* ~80px */
	--fc-section-space-normal: var(--fc-section-space);
	--fc-section-space-comfortable: var(--fc-section-space-spacious);
	--fc-section-space-hero: var(--fc-section-space-spacious);

	/* Homepage customer band — section owns outer pad; children do not */
	--fc-home-customer-section-space: var(--fc-space-8); /* 2rem, tighter than compact */
	--fc-home-customer-content-gap: var(--fc-space-5); /* intro → content */
	--fc-home-authority-cta-gap: var(--fc-space-4); /* cards → guide CTA */
	--fc-home-cta-section-space: var(--fc-space-6); /* sand band, compact and balanced */

	/* Centered content widths */
	--fc-prose-heading: 45rem; /* ~720px */
	--fc-prose-lede: 42.5rem; /* ~680px */
	--fc-prose-hero-lede: 40rem; /* ~640px */
	--fc-prose-cta: 43.75rem; /* ~700px */

	/* Cards */
	--fc-card-padding-compact: 1rem;
	--fc-card-padding: 1.25rem;
	--fc-card-padding-featured: 1.5rem;
	--fc-card-gap: 1rem;

	/* Portal density (EXPERIENCE-01K / FA-08) — tight within sections, modest between subsections */
	--fc-portal-page-gap: 1rem;
	--fc-portal-section-gap: 1rem;
	--fc-portal-card-padding: 0.875rem;
	--fc-portal-card-padding-compact: 0.75rem;
	--fc-portal-row-padding: 0.4rem 0.65rem;
	--fc-portal-field-gap: 0.5rem;
	--fc-portal-action-gap: 0.5rem;
	--fc-portal-helper-gap: 0.25rem;
	--fc-portal-content-section-gap: 1.25rem;

	/* Section surfaces (EXPERIENCE-01B) */
	--fc-section-surface: var(--fc-brand-white);
	--fc-section-tint: color-mix(in srgb, var(--fc-brand-sea-glass) 6%, var(--fc-brand-white));
	--fc-section-sand: var(--fc-color-light-sand);
	--fc-hero-overlay: 62%;
	--fc-action-panel-max: 28rem;

	/* Header / logo */
	--fc-header-height: 4.5rem; /* 72px compact public header */
	--fc-header-logo-width: 15rem; /* 240px desktop — optically substantial */
	--fc-header-mark-height: 3rem; /* 48px mobile mark */

	/* Hero */
	--fc-hero-min-height: 20rem; /* 320px navy fallback */
	--fc-hero-min-height-photo: 24rem; /* 384px with photography */

	/* Radius */
	--fc-radius-sm: 0.25rem;
	--fc-radius-md: 0.5rem;
	--fc-radius-lg: 0.75rem;
	--fc-radius-xl: 1rem;
	--fc-radius-full: 9999px;

	/* Shadow */
	--fc-shadow-none: none;
	--fc-shadow-sm: 0 1px 2px color-mix(in srgb, var(--fc-brand-atlantic-navy) 8%, transparent);
	--fc-shadow-md: 0 4px 12px color-mix(in srgb, var(--fc-brand-atlantic-navy) 10%, transparent);
	--fc-shadow-lg: 0 12px 28px color-mix(in srgb, var(--fc-brand-atlantic-navy) 14%, transparent);

	/* Layout — public site content shell
	   Canonical rail is --fc-container / .fc-container (header, footer, normal page content).
	   Inner prose/forms may use --fc-container-narrow. --fc-container-wide is an alias, not a
	   second public page width. */
	--fc-page-gutter: 1.25rem;
	--fc-container-narrow: 45rem; /* ~720px prose / legal / forms */
	--fc-container: 76rem; /* 1216px canonical public content max */
	--fc-container-standard: var(--fc-container);
	--fc-container-wide: var(--fc-container);
	--fc-content-width: var(--fc-container-narrow);
	--fc-sidebar-width: 15.5rem;
	--fc-logo-width: var(--fc-header-logo-width);
	--fc-logo-height: auto;
	--fc-touch-min: 2.75rem;

	/* Motion */
	--fc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--fc-duration-fast: 120ms;
	--fc-duration: 180ms;
	--fc-duration-slow: 280ms;

	/* Z-index */
	--fc-z-base: 1;
	--fc-z-sticky: 20;
	--fc-z-header: 30; /* global site header; above sticky internals, below dropdowns/overlays */
	--fc-z-dropdown: 40;
	--fc-z-overlay: 60;
	--fc-z-modal: 80;

	/* Sticky internals sit under the global public header (Portal Menu). */
	--fc-sticky-below-header-top: var(--fc-header-height);

	--fc-bp-mobile: 0;
	--fc-bp-tablet: 48rem;
	--fc-bp-desktop: 64rem;
	--fc-bp-wide: 80rem;
}

.fc-ds,
.fc-captain-portal-root,
.fc-captain-dashboard-root,
.fc-page,
.fc-directory-root,
.fc-public-profile-root,
.fc-public-site {
	color: var(--fc-color-text);
	font-family: var(--fc-font-sans);
	font-size: var(--fc-text-body);
	line-height: var(--fc-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.fc-ds *,
.fc-ds *::before,
.fc-ds *::after,
.fc-captain-portal-root *,
.fc-captain-portal-root *::before,
.fc-captain-portal-root *::after {
	box-sizing: border-box;
}

.fc-logo-slot {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.fc-logo {
	display: block;
	width: var(--fc-logo-width);
	height: auto;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
}

.fc-page__header .fc-logo--horizontal,
.fc-page__header .fc-logo--reversed,
.fc-page__header .fc-logo--horizontal-tagline,
.fc-page__header .fc-logo {
	width: var(--fc-header-logo-width);
	height: auto;
}

.fc-logo--mark,
.fc-logo--mark-small {
	width: auto;
	height: var(--fc-header-mark-height);
	/* Brand Assets V1 compact lockup ~3.7:1 — allow optical width without clipping. */
	max-width: 12rem;
}

.fc-page__footer .fc-logo {
	filter: none;
	width: 11rem;
}

@media (max-width: 63.99rem) {
	:root {
		--fc-header-logo-width: 11rem; /* ~176px tablet */
		--fc-section-space: 3.25rem;
	}
}

@media (max-width: 47.99rem) {
	:root {
		--fc-header-height: 4.5rem;
		--fc-header-logo-width: 9.5rem;
		--fc-header-mark-height: 3.125rem; /* 50px */
		--fc-section-space: 2.75rem;
		--fc-section-space-compact: 2.25rem;
		--fc-home-customer-section-space: var(--fc-space-6);
		--fc-home-customer-content-gap: var(--fc-space-4);
		--fc-home-authority-cta-gap: var(--fc-space-3);
		--fc-home-cta-section-space: var(--fc-space-5);
		--fc-card-padding: 1.25rem;
		--fc-hero-min-height: 21.25rem;
		--fc-hero-min-height-photo: 23.75rem;
	}
}