/* ════════════════════════════════════════════════════════════════════════
   ZNK / Amirnet — Design Tokens (framework-agnostic CSS custom properties)
   ────────────────────────────────────────────────────────────────────────
   Drop this into any project: `<link rel="stylesheet" href="tokens.css">` or
   `@import "tokens.css"`. Everything keys off `--znk-*` variables.

   The system has TWO surfaces that coexist:
     1. NEUMORPHIC light UI  — cool-grey #E0E5EC base, soft dual shadows.
        Used for in-content cards, options, inputs, practice screens.
     2. WARM GAMIFIED hero   — deep purple→pink gradient with glows + a
        yellow neo-brutalist accent. Used for hero / "moment" surfaces.
   ════════════════════════════════════════════════════════════════════════ */
:root {
	/* ─── Brand palette ─────────────────────────────────────────────── */
	--znk-navy: #0d294b;
	/* primary ink, headings on light       */
	--znk-navy-light: #1a3d6b;
	--znk-pink: #ee2b73;
	/* brand accent — CTAs, "look here"      */
	--znk-yellow: #ffe600;
	/* energy accent — crown chip, big CTA   */
	--znk-purple: #4f4780;
	--znk-purple-light: #6b62a8;
	--znk-accent: #6c63ff;
	/* indigo — primary interactive          */
	--znk-accent-light: #8b84ff;
	--znk-secondary: #38b2ac;
	/* teal — secondary / "rules" accents    */
	
	/* extended type accents (per question-type colour coding) */
	--znk-sky: #0ea5e9;
	--znk-rose: #ec4899;
	--znk-amber: #f59e0b;
	--znk-green: #10b981;
	/* ─── Semantic ──────────────────────────────────────────────────── */
	--znk-correct: #10b981;
	--znk-correct-bg: #ecfdf5;
	--znk-wrong: #ef4444;
	--znk-wrong-bg: #fef2f2;
	--znk-warning: #f59e0b;
	--znk-info-bg: #eef2ff;
	/* selected / neutral feedback tint        */
	
	/* ─── Neumorphic surface + ink ──────────────────────────────────── */
	--znk-bg: #e0e5ec;
	/* THE neumorphic surface (and page bg)    */
	--znk-bg-card: #fff;
	/* flat white card (non-neu contexts)      */
	--znk-text: #3d4852;
	--znk-muted: #6b7280;
	--znk-light: #a0aec0;
	--znk-border: #e6eaf0;
	--znk-selected-bg: #eef2ff;
	/* shadow rgb stops (for neumorphism on the --znk-bg surface) */
	--znk-shadow-dark: 155, 168, 193;
	/* cool grey — deepened for Soft-UI Evolution */
	--znk-shadow-light: 255, 255, 255;
	/* ─── Soft-UI Evolution shadow recipes (dual-tone + faint navy ambient) ── */
	--znk-extruded: 8px 8px 17px rgba(var(--znk-shadow-dark), .7), -7px -7px 15px rgba(var(--znk-shadow-light), .8), 0 1px 2px rgba(13, 41, 75, .05);
	--znk-extruded-sm: 4px 4px 10px rgba(var(--znk-shadow-dark), .66), -4px -4px 9px rgba(var(--znk-shadow-light), .78);
	--znk-extruded-hover: 11px 11px 24px rgba(var(--znk-shadow-dark), .8), -10px -10px 22px rgba(var(--znk-shadow-light), .85), 0 5px 12px rgba(13, 41, 75, .08);
	--znk-inset: inset 5px 5px 11px rgba(var(--znk-shadow-dark), .72), inset -5px -5px 11px rgba(var(--znk-shadow-light), .72);
	--znk-inset-sm: inset 3px 3px 7px rgba(var(--znk-shadow-dark), .7), inset -3px -3px 7px rgba(var(--znk-shadow-light), .68);
	--znk-inset-deep: inset 9px 9px 20px rgba(var(--znk-shadow-dark), .8), inset -9px -9px 20px rgba(var(--znk-shadow-light), .72);
	/* soft elevation for flat-white cards (non-neu) */
	--znk-elev-1: 0 10px 26px -18px rgba(13, 41, 75, .3);
	--znk-elev-2: 0 18px 36px -18px rgba(13, 41, 75, .35);
	/* ─── Signature gradients ──────────────────────────────────────── */
	
	/* The warm gamified hero. Diagonal deep-purple → magenta → pink.     */
	--znk-hero-gradient: linear-gradient(135deg, #1a0b3a 0%, #3d1f66 40%, #7a2a8e 75%, #ec4899 115%);
	/* Big yellow CTA fill (neo-brutalist). */
	--znk-cta-gradient: linear-gradient(135deg, #fff3a0 0%, #ffe600 45%, #ffb800 100%);
	/* Soft indigo primary button. */
	--znk-primary-gradient: linear-gradient(135deg, #8b84ff, #6c63ff);
	/* ─── Typography ───────────────────────────────────────────────── */
	
	/* Heebo — a clean, friendly Hebrew+Latin grotesque. Display + body.  */
	--znk-font-display: "Heebo", system-ui, sans-serif;
	--znk-font-body: "Heebo", system-ui, sans-serif;
	--znk-tracking-tight: -.02em;
	/* big headlines                     */
	--znk-tracking-snug: -.01em;
	/* section titles                    */
	
	/* ─── Radii ────────────────────────────────────────────────────── */
	--znk-r-sm: 12px;
	--znk-r-md: 16px;
	/* buttons, chips containers                    */
	--znk-r-lg: 20px;
	/* option rows, small cards                     */
	--znk-r-xl: 24px;
	/* section cards                                */
	--znk-r-2xl: 28px;
	/* hero / feature cards                         */
	--znk-r-pill: 999px;
	/* ─── Motion ───────────────────────────────────────────────────── */
	--znk-ease: cubic-bezier(.16, 1, .3, 1);
	/* the house easing      */
	--znk-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--znk-dur-fast: .18s;
	--znk-dur-base: .3s;
	--znk-dur-slow: .6s;
	/* ─── Spacing rhythm (4px base) ────────────────────────────────── */
	--znk-space-1: 4px;
	--znk-space-2: 8px;
	--znk-space-3: 12px;
	--znk-space-4: 16px;
	--znk-space-5: 20px;
	--znk-space-6: 24px;
	--znk-space-8: 32px;
	--znk-space-10: 40px;
	--znk-maxw: 1080px;
}

/* ════════ Base surfaces ════════ */
.znk-neu {
	/* raised neumorphic card */
	background: var(--znk-bg);
	box-shadow: var(--znk-extruded);
	border-radius: var(--znk-r-2xl);
}

.znk-neu--inset {
	/* pressed / well */
	background: var(--znk-bg);
	box-shadow: var(--znk-inset);
	border-radius: var(--znk-r-lg);
}

.znk-card {
	/* flat white elevated card */
	background: var(--znk-bg-card);
	border: 1px solid var(--znk-border);
	border-radius: var(--znk-r-xl);
	box-shadow: var(--znk-elev-1);
}

/* ════════ Signature CTA — yellow neo-brutalist ════════ */
.znk-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 26px;
	border-radius: var(--znk-r-md);
	background: var(--znk-cta-gradient);
	color: #1a0b3a;
	border: 2.5px solid #1a0b3a;
	box-shadow: 4px 4px 0 0 #1a0b3a, 0 14px 30px -10px rgba(255, 184, 0, .6);
	font-family: var(--znk-font-display);
	font-weight: 900;
	font-size: 16.5px;
	cursor: pointer;
	transition: transform var(--znk-dur-fast) var(--znk-ease), box-shadow var(--znk-dur-fast) var(--znk-ease);
}

.znk-cta:hover {
	transform: translate(-2px, -2px) scale(1.01);
	box-shadow: 6px 6px 0 0 #1a0b3a, 0 18px 36px -10px rgba(255, 184, 0, .7);
}

.znk-cta:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 0 #1a0b3a;
}

/* indigo primary (softer alternative) */
.znk-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 15px 30px;
	border: 0;
	border-radius: var(--znk-r-md);
	background: var(--znk-primary-gradient);
	color: #fff;
	font-family: var(--znk-font-display);
	font-weight: 900;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 12px 26px -10px rgba(108, 99, 255, .67);
	transition: transform var(--znk-dur-fast) var(--znk-ease), box-shadow var(--znk-dur-fast) var(--znk-ease);
}

.znk-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -10px rgba(108, 99, 255, .8);
}

/* ════════ Motion primitives ════════ */
@keyframes znk-fade-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes znk-pop {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.92);
	}
	
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes znk-pulse {
	0%, 100% {
		transform: scale(1);
	}
	
	50% {
		transform: scale(1.018);
	}
}

@keyframes znk-shimmer {
	to {
		background-position: 200% center;
	}
}

.znk-fade-up {
	opacity: 0;
	animation: znk-fade-up var(--znk-dur-slow) var(--znk-ease) forwards;
}

/* stagger helpers — add .znk-d1 … .znk-d5 alongside .znk-fade-up */
.znk-d1 {
	animation-delay: .08s;
}

.znk-d2 {
	animation-delay: .16s;
}

.znk-d3 {
	animation-delay: .24s;
}

.znk-d4 {
	animation-delay: .32s;
}

.znk-d5 {
	animation-delay: .4s;
}

/* shimmer headline — apply to an inline span inside a heading */
.znk-shimmer {
	background: linear-gradient(90deg, var(--znk-yellow) 0%, #fff 50%, var(--znk-yellow) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: znk-shimmer 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.znk-fade-up, .znk-shimmer, .znk-cta {
		animation: none;
		opacity: 1;
		transform: none;
	}
}