/* =========================================================
   WHAPPENSTAR — DESIGN TOKENS
   "Concrete Zine" direction — photocopy/riso texture, single
   neon accent used structurally (drop-insert), red as the
   riso-misregistration ink color.

   ⚠️ PLACEHOLDER RED — swap --ws-red below to the exact
   WhappenStar brand hex once confirmed. This is the ONLY
   place the red value should ever be defined; everything
   else references var(--ws-red).
   ========================================================= */

:root {

	/* ---- Color: paper / ink (base) ---- */
	--ws-paper:        #ede9df;
	--ws-paper-dark:    #e2ddcf;
	--ws-ink:          #1c1c1a;
	--ws-ink-soft:     #4a4a45;
	--ws-line:         #999990;

	/* ---- Color: brand accents ---- */
	--ws-red:          #E8262A; /* ⚠️ PLACEHOLDER — swap to confirmed WhappenStar hex */
	--ws-red-dark:     #b81e21;
	--ws-neon:         #c6ff2e;
	--ws-neon-ink:     #15140f; /* dark surface the neon insert sits on */
	--ws-neon-ink-text: #c9c7bd; /* secondary text color on dark neon surfaces — 10.88:1 against --ws-neon-ink, passes WCAG AAA */

	/* ---- Neon glow recipe (reused anywhere the neon insert appears) ---- */
	--ws-neon-glow:
		0 0 4px rgba(198, 255, 46, 0.9),
		0 0 14px rgba(198, 255, 46, 0.6),
		0 0 30px rgba(198, 255, 46, 0.35);

	/* ---- Type ---- */
	--ws-font-display: 'Archivo Black', sans-serif;
	--ws-font-body:    'Courier Prime', monospace;

	/* ---- Type scale ---- */
	--ws-text-xs:   0.6875rem;  /* 11px — labels, meta */
	--ws-text-sm:   0.8125rem;  /* 13px — body small / UI chrome (buttons, nav, forms) */
	--ws-text-base: 1.125rem;   /* 18px — body copy (was 16px, bumped for readability) */
	--ws-text-lg:   1.375rem;   /* 22px */
	--ws-text-xl:   2rem;       /* 32px */
	--ws-text-2xl:  2.75rem;    /* 44px — masthead logo */
	--ws-text-3xl:  3.5rem;     /* 56px */

	/* ---- Spacing ---- */
	--ws-space-1: 0.5rem;
	--ws-space-2: 1rem;
	--ws-space-3: 1.5rem;
	--ws-space-4: 2rem;
	--ws-space-5: 3rem;
	--ws-space-6: 4rem;

	/* ---- Layout ---- */
	--ws-content-width: 1200px;
	--ws-border-width:  3px;

	/* ---- Texture ---- */
	--ws-halftone-dot: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
	--ws-halftone-size: 3px 3px;
}

/* Halftone paper texture applied at body level */
body.ws-textured {
	background-image: var(--ws-halftone-dot);
	background-size: var(--ws-halftone-size);
}