/* CBK Conference — global design system. Values are copied 1:1 from UI_KIT (00, 03, 07, 09). */

:root {
	--navy: #0C1F52;
	--navy-deep: #07142F;
	--amber: #E86A33;
	--amber-deep: #B8501C;
	--amber-tint: #FDEBE1;
	--white: #FFFFFF;
	--gray-bg: #EEF0F3;
	--tint: #F7F8FA;
	--graphite: #2B2F38;
	--muted: #5B6272;
	--border: #E2E4EA;

	--font-body: 'Inter', system-ui, sans-serif;
	--font-heading: 'IBM Plex Sans Condensed', 'Roboto Condensed', sans-serif;

	--gutter: 96px;
	--section-py: 64px;
	/* Side padding that also centres content on viewports wider than the 1440px reference. */
	--page-pad: max(var(--gutter), calc((100% - 1248px) / 2));
}

@media (max-width: 720px) {
	:root {
		--gutter: 24px;
	}
}

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

body {
	margin: 0;
	background: var(--white);
	color: var(--graphite);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
}

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

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--font-heading);
}

/* Focus ring — global, applies to every interactive element. */
:focus-visible {
	outline: 3px solid var(--amber-deep);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(12, 31, 82, 0.15);
	border-radius: 4px;
}

/* Layout: sections are always full width; the inner container is capped
   (1440px reference width, 96px gutter -> 24px under 720px). */
.section {
	width: 100%;
	padding-block: var(--section-py);
}

.section--gray {
	background: var(--gray-bg);
}

.section--tint {
	background: var(--tint);
}

.section--navy {
	background: var(--navy);
	color: var(--white);
}

.section--navy-deep {
	background: var(--navy-deep);
	color: var(--white);
}

.site-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Typography helpers */
.kicker {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--amber-deep);
}

.kicker--on-dark {
	color: var(--amber);
}

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

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--navy);
}

.section-heading h2 {
	font-size: 23px;
	font-weight: 700;
	color: var(--navy);
}

.section-heading__meta {
	font-family: var(--font-heading);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--amber-deep);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	font-family: var(--font-body);
	border: 1.5px solid transparent;
	cursor: pointer;
}

.btn--sm {
	padding: 10px 20px;
	font-size: 14px;
}

.btn-primary {
	background: var(--amber-deep);
	color: #ffffff;
}

.btn-secondary {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-navy {
	background: transparent;
	color: var(--navy);
	border-color: var(--navy);
}

/* Hover / disabled are not in the frozen design (spec §31): conservative, token-only. */
.btn-primary:hover {
	filter: brightness(0.92);
}

.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.09);
}

.btn-outline-navy:hover {
	background: var(--tint);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
}

.btn[aria-disabled="true"] {
	pointer-events: none;
}

/* Links */
.text-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--navy);
	font-weight: 600;
	font-size: 14px;
}

.inline-link {
	color: var(--navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Cards */
.card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(12, 31, 82, 0.05), 0 8px 22px rgba(12, 31, 82, 0.07);
}

.card--flat {
	border: 1px solid var(--border);
	box-shadow: none;
}

/* Chips & badges */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
}

.pill--dark {
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff;
	padding: 11px 20px;
}

.pill--light {
	background: #ffffff;
	border: 1px solid var(--border);
	color: var(--navy);
	padding: 9px 16px;
}

/* Role labels are text, never colour alone and never a pill. */
.speaker-eyebrow,
.ed-badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--amber-deep);
}