/*
 * Base Styles — Design Tokens, Reset, Typography
 * Unbreakable · Retro Comic Static Site
 *
 * Simplified palette modeled after vintage CMYK printing:
 * limited ink colors, maximum vibrance.
 */

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────── */

:root {
	/* === COLOR: Ink & Paper (the two essential comics colors) === */
	--color-ink:        #0A0A0A;
	--color-paper:      #FFF8E8;
	--color-white:      #FFFFFF;

	/* === COLOR: Dark tones (for section backgrounds) === */
	--color-charcoal:   #1A1A2E;
	--color-graphite:   #2D2D4A;

	/* === COLOR: Vibrant CMYK Spot Accents === */
	--color-crimson:    #FF1A2E;
	--color-cyan:       #00E5FF;
	--color-amber:      #FFCC00;
	--color-blue:       #3355FF;
	--color-violet:     #9944FF;

	/* === COLOR: Semantic Aliases === */
	--color-bg:         var(--color-ink);
	--color-text:       var(--color-paper);
	--color-heading:    var(--color-white);
	--color-link:       var(--color-crimson);
	--color-panel-bg:   var(--color-paper);
	--color-panel-text: var(--color-ink);

	/* === TYPOGRAPHY === */
	--font-heading:     'Bangers', 'Impact', 'Arial Black', cursive;
	--font-comic:       'Luckiest Guy', 'Comic Sans MS', cursive;
	--font-body:        'Inter', system-ui, -apple-system, sans-serif;

	--fs-hero:     clamp(3rem, 8vw, 7rem);
	--fs-h1:       clamp(2.5rem, 5vw, 4rem);
	--fs-h2:       clamp(1.875rem, 3.5vw, 2.75rem);
	--fs-h3:       clamp(1.25rem, 2.5vw, 1.75rem);
	--fs-body:     clamp(1rem, 1.1vw, 1.125rem);
	--fs-small:    0.875rem;
	--fs-caption:  0.75rem;

	--lh-heading: 1.1;
	--lh-body:    1.6;

	--ls-heading:    0.05em;
	--ls-uppercase:  0.1em;

	/* === SPACING === */
	--space-2xs:  0.25rem;
	--space-xs:   0.5rem;
	--space-sm:   0.75rem;
	--space-md:   1.25rem;
	--space-lg:   2rem;
	--space-xl:   3.5rem;
	--space-2xl:  6rem;
	--space-section: clamp(4rem, 8vw, 8rem);

	/* === EFFECTS === */
	--shadow-ink:   5px 5px 0 var(--color-ink);
	--shadow-ink-lg: 7px 7px 0 var(--color-ink);

	--border-panel:  3px solid var(--color-ink);
	--border-thick:  4px solid var(--color-ink);
	--radius-panel:  0;
	--radius-bubble: 16px;

	/* === TRANSITIONS === */
	--transition-base: 0.25s ease;

	/* === Z-INDEX === */
	--z-grain:     1;
	--z-skip:      500;
	--z-masthead:  100;
	--z-nav:       900;
	--z-hero-content: 10;
}


/* ─── RESET ──────────────────────────────────────────────────────────── */

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

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}


/* ─── BASE ELEMENTS ──────────────────────────────────────────────────── */

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-base);
}
a:hover,
a:focus {
	color: var(--color-cyan);
}

/* ── Headings — Bangers comic display font ── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: var(--space-md);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ── Paragraphs ── */
p {
	margin-top: 0;
	margin-bottom: var(--space-md);
}

/* ── Images ── */
img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Figures ── */
figure {
	margin: 0;
}
figcaption {
	font-size: var(--fs-small);
	color: var(--color-ink);
	opacity: 0.7;
	margin-top: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	font-family: var(--font-body);
}

/* ── Blockquotes ── */
blockquote {
	margin: 0;
	padding: 0;
}

/* ── Horizontal Rules ── */
hr {
	border: none;
	height: 3px;
	background: var(--color-ink);
	margin: var(--space-xl) 0;
}


/* ─── UTILITY CLASSES ────────────────────────────────────────────────── */

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

.u-text-impact {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 1.25em;
	color: var(--color-crimson);
	text-shadow: 2px 2px 0 var(--color-ink);
}

.u-text-crimson { color: var(--color-crimson); }
.u-text-cyan    { color: var(--color-cyan); }
.u-text-amber   { color: var(--color-amber); }
.u-text-blue    { color: var(--color-blue); }


/* ─── FOCUS STYLES ──────────────────────────────────────────────────── */

*:focus-visible {
	outline: 3px solid var(--color-amber);
	outline-offset: 3px;
}
*:focus:not(:focus-visible) {
	outline: none;
}


/* ─── SKIP LINK ──────────────────────────────────────────────────────── */

.c-skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-md);
	background: var(--color-crimson);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	text-transform: uppercase;
	padding: var(--space-sm) var(--space-lg);
	border: var(--border-panel);
	box-shadow: var(--shadow-ink);
	z-index: var(--z-skip);
	transition: top var(--transition-base);
}
.c-skip-link:focus { top: var(--space-md); }


/* ─── GRAIN OVERLAY ──────────────────────────────────────────────────── */

.c-grain {
	position: fixed;
	inset: 0;
	background-image: url('../images/noise-overlay.svg');
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: 0.04;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: var(--z-grain);
}


/* ─── SELECTION ──────────────────────────────────────────────────────── */

::selection {
	background: var(--color-crimson);
	color: var(--color-white);
}