/* ==========================================================================
   The AfroLiterary — Base tokens (v2 · "Night Stage")
   Design language adapted from the Jazzafari kit: dark stage, gold gradient,
   condensed uppercase display. Advanced with literary serif accents, grain,
   glass and a full motion system.
   Mustard is PROVISIONAL until the official logo is inspected.
   ========================================================================== */

:root {
	/* Brand */
	--afro-yellow: #F9B218;           /* mustard — sampled from the official logo */
	--afro-yellow-light: #FFD25A;
	--afro-yellow-deep: #AB7C15;      /* logo's deep chevron tone */
	--afro-yellow-soft: #FFF6DE;
	--afro-gold: linear-gradient(135deg, #FFD25A 0%, #F9B218 45%, #C98F12 100%);
	--afro-gold-text: linear-gradient(100deg, #C98F12 0%, #FFD25A 28%, #F9B218 50%, #FFD25A 72%, #C98F12 100%);
	--afro-black: #111111;
	--afro-ink: #1A1A1A;
	--afro-ink-2: #222222;
	--afro-ink-3: #2A2A2A;
	--afro-white: #ffffff;
	--afro-off-white: #F7F5EF;
	--afro-charcoal: #262626;

	/* Semantic (dark-first) */
	--afro-text: #CCCCCC;
	--afro-heading: #FFFFFF;
	--afro-text-muted: #9C978E;
	--afro-text-inverse: #CCCCCC;
	--afro-text-inverse-muted: #9C978E;
	--afro-surface: var(--afro-ink);
	--afro-surface-alt: var(--afro-ink-2);
	--afro-surface-ink: var(--afro-black);
	--afro-glass: rgba(34, 34, 34, .62);
	--afro-border: #3C3C3C;
	--afro-border-soft: rgba(255, 255, 255, .08);
	--afro-border-inverse: rgba(255, 255, 255, .1);
	--afro-link: var(--afro-yellow);
	--afro-hover: var(--afro-yellow-light);
	--afro-focus: #FFDB49;
	--afro-success: #3FB37F;
	--afro-error: #F0705A;

	/* Type */
	--afro-font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
	--afro-font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--afro-font-text: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--afro-fs-xs: .75rem;
	--afro-fs-sm: .875rem;
	--afro-fs-base: clamp(.95rem, .91rem + .2vw, 1.0625rem);
	--afro-fs-lede: clamp(1.05rem, .98rem + .35vw, 1.25rem);
	--afro-fs-h4: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
	--afro-fs-h3: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
	--afro-fs-h2: clamp(1.95rem, 1.45rem + 2.1vw, 3.4rem);
	--afro-fs-display: clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
	--afro-fs-mega: clamp(3.6rem, 1.2rem + 10vw, 11rem);

	/* Space */
	--afro-space-1: .25rem;
	--afro-space-2: .5rem;
	--afro-space-3: .75rem;
	--afro-space-4: 1rem;
	--afro-space-5: 1.5rem;
	--afro-space-6: 2rem;
	--afro-space-7: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	--afro-space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	--afro-space-9: clamp(4.5rem, 3rem + 6vw, 8.5rem);

	/* Layout */
	--afro-wrap: 1240px;
	--afro-wrap-narrow: 760px;
	--afro-gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
	--afro-radius: 16px;
	--afro-radius-lg: 24px;
	--afro-radius-pill: 999px;
	--afro-header-h: 78px;
	--afro-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
	--afro-glow: 0 0 0 1px rgba(219, 161, 77, .35), 0 20px 50px -20px rgba(219, 161, 77, .45);

	/* Motion */
	--afro-ease: cubic-bezier(.22, 1, .36, 1);
	--afro-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--afro-dur: .8s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--afro-header-h) + 1rem); background: var(--afro-ink); }
body.afro {
	margin: 0;
	background: var(--afro-surface);
	color: var(--afro-text);
	font-family: var(--afro-font-text);
	font-size: var(--afro-fs-base);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, video, svg { max-width: 100%; height: auto; }
img { display: block; }
figure { margin: 0; }
::selection { background: var(--afro-yellow); color: var(--afro-black); }

/* Accessibility */
.afro-skip {
	position: fixed; top: .75rem; left: .75rem; z-index: 1000;
	padding: .75rem 1.25rem; background: var(--afro-yellow); color: var(--afro-black);
	font-weight: 700; text-decoration: none; border-radius: var(--afro-radius-pill); transform: translateY(-200%);
	transition: transform .2s var(--afro-ease);
}
.afro-skip:focus { transform: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--afro-focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.afro-bg-mustard :where(a, button, input, select, textarea):focus-visible { outline-color: var(--afro-black); }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}

/* Layout primitives */
.afro-main { display: block; outline: none; }
.afro-wrap { width: 100%; max-width: var(--afro-wrap); margin-inline: auto; padding-inline: var(--afro-gutter); }
.afro-wrap--narrow { max-width: calc(var(--afro-wrap-narrow) + var(--afro-gutter) * 2); }
.afro-section { padding-block: var(--afro-space-9); position: relative; }
.afro-section--tight { padding-block: var(--afro-space-7); }

/* Surfaces (also usable on Elementor containers via CSS Classes) */
.afro-section--ink, .afro-bg-ink { background-color: var(--afro-black); color: var(--afro-text); }
.afro-section--paper, .afro-bg-paper { background-color: var(--afro-ink-2); }
.afro-bg-charcoal { background-color: var(--afro-charcoal); }
.afro-bg-light { background-color: var(--afro-off-white); color: #3A3833; }
.afro-section--mustard, .afro-bg-mustard { background: var(--afro-gold); color: var(--afro-black); }
.afro-bg-light :is(h1, h2, h3, h4, .elementor-heading-title),
.afro-bg-mustard :is(h1, h2, h3, h4, .elementor-heading-title) { color: var(--afro-black) !important; }
.afro-bg-mustard .afro-muted, .afro-bg-mustard .afro-muted p { color: rgba(17, 17, 17, .72) !important; }

/* Hairlines */
.afro-rule { border: 0; border-top: 1px solid var(--afro-border); margin: var(--afro-space-7) 0; }
.afro-divider-gold { display: block; width: 72px; height: 3px; margin: 1.5rem auto 0; background: var(--afro-gold); border-radius: 3px; }

/* Reading progress (articles) */
.afro-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 999; pointer-events: none; }
.afro-progress span { display: block; height: 100%; width: 100%; background: var(--afro-gold); transform-origin: 0 50%; transform: scaleX(0); }
body:not(.afro-reading) .afro-progress { display: none; }

/* Ambient page grain (very subtle, fixed) */
body.afro::after {
	content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.elementor-editor-active.afro::after { display: none; }