/*
 * BuddyPilot — Base styles
 * Reset, @font-face, CSS custom properties, typography base.
 *
 * WCAG AAA: all text contrast ratios verified ≥7:1 normal / ≥4.5:1 large text.
 * prefers-reduced-motion: all transitions disabled per WCAG 2.3.3.
 */

/* ═══════════════════════════════════════════════════
   @font-face — Geist (variable font, local)
   ═══════════════════════════════════════════════════ */

/* cyrillic */
@font-face {
	font-family: 'Geist';
	font-style:  normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/geist/geist-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
	font-family: 'Geist';
	font-style:  normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/geist/geist-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
	               U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
	               U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
	               U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Geist';
	font-style:  normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/geist/geist-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	               U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════
   @font-face — Nunito (variable font, local)
   Używany jako --bp-font-body dla paragrafów (p).
   latin-ext pokrywa polskie znaki: ą ę ó ś ź ż ć ń ł
   ═══════════════════════════════════════════════════ */

/* latin-ext (Polish + extended Latin) */
@font-face {
	font-family: 'Nunito';
	font-style:  normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/nunito/nunito-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
	               U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
	               U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
	               U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Nunito';
	font-style:  normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/nunito/nunito-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
	               U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════
   Design tokens — CSS custom properties
   ═══════════════════════════════════════════════════ */

:root {
	/* Brand palette */
	--bp-navy:   #0A0F1E;
	--bp-cobalt: #1944CB;
	--bp-orange: #FD9045;
	--bp-sky:    #93C5FD;
	--bp-ice:    #EFF6FF;
	--bp-dark:   #0F1F3D;
	--bp-white:  #FFFFFF;
	--bp-border: #DBEAFE;

	/* WCAG AAA Text — light backgrounds (white / ice) */
	--bp-tx-pri:  #0F1F3D; /* 26.5:1 on white */
	--bp-tx-sec:  #374151; /* 10.3:1 on white */
	--bp-tx-link: #1944CB; /* 7.68:1 on white */

	/* WCAG AAA Text — dark backgrounds (navy / dark) */
	--bp-tx-l1:  #F1F5F9; /* 17.6:1 on navy */
	--bp-tx-l2:  #CBD5E1; /* 12.7:1 on navy */
	--bp-tx-l3:  #A0AEC0; /*  8.96:1 on dark — use ≥18px only */
	--bp-tx-sky: #93C5FD; /* 10.9:1 on navy */
	--bp-tx-org: #FD9045; /*  7.54:1 on dark */

	/* Button text — WCAG AAA */
	--bp-btn-orange-text: #0F1F3D; /* 7.54:1 on #FD9045 */
	--bp-btn-cobalt-text: #FFFFFF; /* 7.68:1 on #1944CB */

	/* Comparison table — WCAG AAA on white */
	--bp-c-yes:     #1b5e3f; /* 7.72:1 */
	--bp-c-partial: #92400e; /* 7.09:1 */
	--bp-c-no:      #a01f1f; /* 7.75:1 */

	/* Semantic state colors — forms, alerts (WCAG AAA on their bg) */
	--bp-cobalt-dark:   #1436a8; /* 8.7:1 on white — button hover */
	--bp-success-tx:    #14532d; /* 9.21:1 on --bp-success-bg */
	--bp-success-bg:    #f0fdf4;
	--bp-success-bd:    #86efac;
	--bp-error-tx:      #7f1d1d; /* 11.4:1 on --bp-error-bg */
	--bp-error-bd-inp:  #dc2626; /* invalid input border */
	--bp-error-bg:      #fef2f2;
	--bp-error-bd:      #fca5a5;
	--bp-error-tip:     #b91c1c; /* 7.42:1 on white — inline tip */
	--bp-warning-tx:    #78350f; /* 9.1:1 on --bp-warning-bg */
	--bp-warning-bg:    #fffbeb;
	--bp-warning-bd:    #fcd34d;

	/* Typography */
	--bp-font:      'Geist',  system-ui, -apple-system, sans-serif;
	--bp-font-body: 'Nunito', system-ui, -apple-system, sans-serif;
	--bp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	/* Radii */
	--bp-r:    12px;
	--bp-r-lg: 20px;

	/* Shadows */
	--bp-sh:    0 4px 16px rgba(10, 15, 30, .10), 0 2px 6px rgba(10, 15, 30, .06);
	--bp-sh-lg: 0 12px 40px rgba(10, 15, 30, .18), 0 4px 12px rgba(10, 15, 30, .10);

	/* Layout */
	--bp-container: 1140px;

	/* Runway — anchor dla proporcji pasa i samolotu (PNG ratio: 1024×276) */
	--plane-w: clamp(90px, 11vw, 175px);
}

/* ═══════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}


html {
	font-size:       16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--bp-font);
	color:       var(--bp-tx-pri);
	background:  var(--bp-white);
	overflow-x:  hidden;
	line-height: 1.65;
}

/* WCAG 1.4.8 — max line width for readability */
p {
	font-family: var(--bp-font-body);
	line-height: 1.65;
	max-width:   75ch;
}

img,
video {
	display:   block;
	max-width: 100%;
	height:    auto;
}

ul,
ol {
	list-style: none;
	padding:    0;
}

a {
	color: var(--bp-tx-link);
}

/* ═══════════════════════════════════════════════════
   WCAG 2.4.7 — Focus Visible (enhanced)
   ═══════════════════════════════════════════════════ */

:focus-visible {
	outline:        3px solid var(--bp-cobalt);
	outline-offset: 3px;
	border-radius:  4px;
}

*:focus:not(:focus-visible) {
	outline: none;
}

/* ═══════════════════════════════════════════════════
   WCAG 2.4.1 — Skip Navigation
   ═══════════════════════════════════════════════════ */

.skip-link {
	position:      absolute;
	top:           -100%;
	left:          1rem;
	z-index:       9999;
	background:    var(--bp-cobalt);
	color:         var(--bp-white);
	padding:       .75rem 1.5rem;
	border-radius: 0 0 var(--bp-r) var(--bp-r);
	font-weight:   700;
	font-size:     1rem;
	text-decoration: none;
	transition:    top 200ms;
}

.skip-link:focus {
	top: 0;
}

/* ═══════════════════════════════════════════════════
   Typography scale
   ═══════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
	font-family:     var(--bp-font);
	letter-spacing:  -.02em;
	line-height:     1.2;
}

h1 {
	font-size:      clamp(2rem, 4.5vw, 3.25rem);
	font-weight:    800;
	letter-spacing: -.03em;
	line-height:    1.15;
}

h2 {
	font-size:      clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight:    800;
	letter-spacing: -.03em;
}

h3 {
	font-size:   1.0625rem;
	font-weight: 700;
}

/* ═══════════════════════════════════════════════════
   Shared button styles
   ═══════════════════════════════════════════════════ */

.btn-primary {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	background:      var(--bp-orange);
	color:           var(--bp-btn-orange-text);
	padding:         .875rem 1.75rem;
	border-radius:   10px;
	font-weight:     700;
	font-size:       1rem;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	transition:      filter 150ms, transform 150ms;
	min-height:      44px; /* WCAG 2.5.5 — minimum touch target */
}

.btn-primary:hover {
	filter:    brightness(1.06);
	transform: translateY(-1px);
}

.btn-outline {
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	background:      transparent;
	color:           var(--bp-tx-l1);
	padding:         .875rem 1.75rem;
	border-radius:   10px;
	font-weight:     600;
	font-size:       1rem;
	text-decoration: none;
	border:          2px solid var(--bp-tx-l2);
	cursor:          pointer;
	transition:      border-color 150ms, background 150ms;
	min-height:      44px;
}

.btn-outline:hover {
	border-color: var(--bp-tx-l1);
	background:   rgba(255, 255, 255, .06);
}

/* ═══════════════════════════════════════════════════
   Brand name markup — .bp-brand
   PHP always outputs the same spans; CSS handles
   light / dark context via cascade.
   buddy = 700 + dark    → on light backgrounds
   buddy = 700 + white   → on dark backgrounds
   pilot = 400 + cobalt  → on light backgrounds
   pilot = 400 + sky     → on dark backgrounds
   text-transform: lowercase enforced on both parts.
   ═══════════════════════════════════════════════════ */

.bp-brand {
	display: inline;
	white-space: nowrap;
}

.bp-brand__buddy,
.bp-brand__pilot {
	text-transform: lowercase;
}

.bp-brand__buddy {
	font-weight: 700;
	color: var(--bp-tx-pri);
}

.bp-brand__pilot {
	font-weight: 400;
	color: var(--bp-cobalt);
}

/* Dark sections — cascade overrides */
.bp-hero         .bp-brand__buddy,
.bp-problems     .bp-brand__buddy,
.bp-cta-band     .bp-brand__buddy,
.has-navy-background-color .bp-brand__buddy {
	color: var(--bp-white, #fff);
}

.bp-hero         .bp-brand__pilot,
.bp-problems     .bp-brand__pilot,
.bp-cta-band     .bp-brand__pilot,
.has-navy-background-color .bp-brand__pilot {
	color: var(--bp-sky);
}

/* ═══════════════════════════════════════════════════
   WCAG 2.3.3 — prefers-reduced-motion
   Disable all transitions and animations for users
   who prefer reduced motion.
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration:   0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  0.01ms !important;
		scroll-behavior:      auto !important;
	}

	html {
		scroll-behavior: auto;
	}
}