/* ============================================
   SWEET JAMES — BRAND TOKENS (2026)
   Single source of truth. SB37-safe defaults.
   Adopts the sweetjames.com 2026 visual system:
   Inter everywhere, true-yellow accent, soft layered
   elevation, chunky radii, pill controls, flat bands.
   ============================================ */
:root {
	/* ---------- COLOR ---------- */
	--sj-navy: #0a1254;
	/* primary navy */
	--sj-navy-ink: #07092e;
	/* deeper ink for footer/cta bands */
	--sj-gold: #ff0;
	/* true pop yellow */
	--sj-gold-hover: #f5f500;
	--sj-gold-deep: #d4d400;
	--sj-paper: #fafaf7;
	/* off-white page bg */
	--sj-cream: #f4f2ec;
	--sj-bone: #eae6da;
	--sj-white: #fff;
	--sj-black: #000;
	--sj-ink: #0a0e2c;
	--sj-ink-soft: #3a3e58;
	--sj-muted: #6b6f85;
	--sj-muted-2: #9095aa;
	--sj-line: rgba(10, 14, 44, .1);
	--sj-line-strong: rgba(10, 14, 44, .2);
	/* state */
	--sj-success: #0e8a5f;
	--sj-danger: #d33f4a;
	/* ---------- Legacy aliases (kept for backwards compat) ---------- */
	--sj-primary: var(--sj-navy);
	--sj-secondary: var(--sj-navy);
	--sj-accent: var(--sj-gold);
	--sj-neutral: var(--sj-paper);
	--sj-text: var(--sj-ink);
	--sj-line-soft: rgba(10, 14, 44, .04);
	--sj-on-navy-muted: rgba(255, 255, 255, .65);
	--sj-on-navy-line: rgba(255, 255, 255, .1);
	--sj-on-navy-card: rgba(255, 255, 255, .04);
	/* ---------- TYPE ---------- */
	--sj-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sj-font-display: "Inter", system-ui, -apple-system, sans-serif;
	/* tight-tracked Inter */
	--sj-font-script: "Inter", system-ui, -apple-system, sans-serif;
	/* legacy alias */
	--sj-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	/* fluid type scale */
	--sj-fs-xs: 12px;
	--sj-fs-sm: 13px;
	--sj-fs-base: 15px;
	--sj-fs-md: 16px;
	--sj-fs-lg: 18px;
	--sj-fs-xl: clamp(20px, 2.4vw, 24px);
	--sj-fs-2xl: clamp(24px, 3vw, 30px);
	--sj-fs-3xl: clamp(28px, 3.6vw, 40px);
	--sj-fs-4xl: clamp(34px, 4.8vw, 56px);
	--sj-fs-5xl: clamp(42px, 6.4vw, 78px);
	--sj-fs-6xl: clamp(52px, 8vw, 104px);
	/* ---------- SPACE ---------- */
	--sj-s-1: 4px;
	--sj-s-2: 8px;
	--sj-s-3: 12px;
	--sj-s-4: 16px;
	--sj-s-5: 24px;
	--sj-s-6: 32px;
	--sj-s-7: 48px;
	--sj-s-8: 64px;
	--sj-s-9: 80px;
	--sj-s-10: 96px;
	--sj-s-11: 120px;
	/* ---------- RADII (chunky 2026) ---------- */
	--sj-r-sm: 12px;
	--sj-r: 16px;
	--sj-r-lg: 20px;
	--sj-r-xl: 24px;
	--sj-r-2xl: 32px;
	--sj-r-full: 999px;
	/* ---------- ELEVATION (soft, close) ---------- */
	--sj-shadow-sm: 0 1px 2px rgba(10, 14, 44, .04), 0 2px 6px rgba(10, 14, 44, .04);
	--sj-shadow: 0 2px 4px rgba(10, 14, 44, .05), 0 8px 16px rgba(10, 14, 44, .06);
	--sj-shadow-lg: 0 4px 12px rgba(10, 14, 44, .08), 0 16px 32px rgba(10, 14, 44, .08);
	--sj-shadow-xl: 0 8px 24px rgba(10, 14, 44, .1), 0 32px 64px rgba(10, 14, 44, .1);
	/* ---------- LAYOUT ---------- */
	--sj-container: 1280px;
	--sj-container-narrow: 880px;
	--sj-gutter: 32px;
	/* unified controls (pill) */
	--sj-cta-h: 54px;
	--sj-cta-px: 28px;
	--sj-input-h: 54px;
	--sj-tap-min: 44px;
	/* motion (premium expo-out) */
	--sj-ease: cubic-bezier(.16, 1, .3, 1);
	--sj-ease-io: cubic-bezier(.65, 0, .35, 1);
	--sj-dur: 220ms;
	--sj-dur-med: 320ms;
	--sj-dur-slow: 560ms;
}

@media (max-width: 768px) {
	:root {
		--sj-gutter: 20px;
	}
}

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

/* ---------- BASE ---------- */
*, *::before, *::after {
	box-sizing: border-box;
}

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

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--sj-font-body);
	background: var(--sj-paper);
	color: var(--sj-ink);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 0;
}

input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
}

/* a11y focus */
:focus-visible {
	outline: 2px solid var(--sj-gold);
	outline-offset: 2px;
	border-radius: 6px;
}

/* skip link */
.sj-skip {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 100;
	background: var(--sj-gold);
	color: var(--sj-ink);
	padding: 10px 18px;
	border-radius: var(--sj-r-full);
	font-weight: 700;
	font-size: 14px;
}

.sj-skip:focus {
	top: 12px;
}

/* container */
.sj-container {
	max-width: var(--sj-container);
	margin: 0 auto;
	padding-inline: var(--sj-gutter);
}

.sj-container--narrow {
	max-width: var(--sj-container-narrow);
}

/* utility helpers */
.sj-text-accent {
	color: var(--sj-gold);
}

.sj-text-primary {
	color: var(--sj-navy);
}

.sj-text-white {
	color: var(--sj-white);
}

.sj-text-muted {
	color: var(--sj-muted);
}

.sj-text-ink-soft {
	color: var(--sj-ink-soft);
}

.sj-bg-primary, .sj-bg-navy {
	background: var(--sj-navy);
	color: var(--sj-white);
}

.sj-bg-ink {
	background: var(--sj-navy-ink);
	color: var(--sj-white);
}

.sj-bg-white {
	background: var(--sj-white);
	color: var(--sj-ink);
}

.sj-bg-paper, .sj-bg-neutral {
	background: var(--sj-paper);
	color: var(--sj-ink);
}

.sj-bg-cream {
	background: var(--sj-cream);
	color: var(--sj-ink);
}

.sj-center {
	text-align: center;
}

.sj-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- DISPLAY HEADINGS (Inter, tight-tracked) ---------- */
.sj-display {
	font-family: var(--sj-font-display);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: .98;
	text-transform: none;
	/* explicit — no more ALL CAPS by default */
	margin: 0;
}

.sj-display--xl {
	font-size: var(--sj-fs-6xl);
	letter-spacing: -.04em;
}

.sj-display--lg {
	font-size: var(--sj-fs-5xl);
	letter-spacing: -.04em;
}

.sj-display--md {
	font-size: var(--sj-fs-4xl);
}

.sj-display--sm {
	font-size: var(--sj-fs-3xl);
	letter-spacing: -.03em;
}

.sj-h1, .sj-h2, .sj-h3, .sj-h4 {
	margin: 0;
	font-weight: 800;
	letter-spacing: -.02em;
}

.sj-h1 {
	font-size: var(--sj-fs-5xl);
	line-height: 1.02;
}

.sj-h2 {
	font-size: var(--sj-fs-4xl);
	line-height: 1.08;
}

.sj-h3 {
	font-size: var(--sj-fs-3xl);
	line-height: 1.15;
}

.sj-h4 {
	font-size: var(--sj-fs-xl);
	line-height: 1.25;
}

.sj-eyebrow {
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sj-gold);
}

.sj-eyebrow--dark {
	color: #039;
}

.sj-lead {
	font-size: var(--sj-fs-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
	max-width: 60ch;
}

.sj-bg-white .sj-lead, .sj-bg-paper .sj-lead, .sj-bg-cream .sj-lead {
	color: var(--sj-ink-soft);
}

.sj-text-gold {
	color: var(--sj-gold);
}