/* ============================================================
   GRASSHOPPER COURSE tokens — design vocabulary. Loads first.
   Sibling of the DEZACT theme: same material language, its own
   accent (leaf green — the Grasshopper canvas) in place of oak.
   ============================================================ */

/* ---- self-hosted fonts (family faces, see assets/fonts/) ---- */
@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

:root {
	/* ---- palette: the Grasshopper canvas — pale paper field, green-black
	   ink, leaf accent. Warm throughout; no cold blues. ---- */
	--gc-paper:     #f4f3ee;
	--gc-gloss:     #fdfdfb;
	--gc-ink:       #171812;
	--gc-grey:      #56544d;
	--gc-grey-soft: #8f8d84;
	--gc-leaf:      #78943f;
	--gc-leaf-deep: #4c611f;
	--gc-leaf-pale: #e9edda;
	--gc-hairline:  rgba(23, 24, 18, .1);
	--gc-hairline-strong: rgba(23, 24, 18, .22);

	/* ---- material surfaces ---- */
	--gc-surface-gloss: linear-gradient(165deg, #ffffff 0%, #f3f2ec 60%, #edece3 100%);
	--gc-surface-shell: linear-gradient(168deg, #ffffff 0%, #f7f6f1 48%, #edece3 100%);
	--gc-surface-leaf:  linear-gradient(105deg, #a8bf72, #78943f 58%, #648030);
	--gc-sheen: inset 0 1px 0 #fff;
	--gc-shadow-shelf: 0 22px 30px -22px rgba(23, 24, 18, .5);
	--gc-shadow-hover: 0 24px 44px -28px rgba(23, 24, 18, .5);
	--gc-light-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
	--gc-light-glow: 0 0 18px rgba(255, 255, 255, .7);

	/* ---- the canvas dot grid (Grasshopper's drawing field) ---- */
	--gc-dots: radial-gradient(circle 1px at 1px 1px, rgba(23, 24, 18, .16) 98%, transparent) 0 0 / 26px 26px;

	/* ---- curve vocabulary (family sweep DNA, its own sizes) ---- */
	--gc-r-blade:  999px;                 /* rows, chips, buttons, nav */
	--gc-r-sweep:  0 110px 0 0;           /* figures, cards (one swept corner) */
	--gc-r-sweep-size: 110px;
	--gc-r-shell:  0 0 240px 0;           /* hero / big section shells */
	--gc-r-shell-size: 240px;
	--gc-r-plinth: 0 80px 0 80px;         /* recessed archive fields */
	--gc-r-node:   18px;                  /* GH component corner */

	/* ---- type ---- */
	--gc-font-sans: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--gc-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
	--gc-track-wordmark: .42em;
	--gc-track-label: .18em;

	/* ---- motion ---- */
	--gc-ease: cubic-bezier(.22, 1, .36, 1);
	--gc-speed: .4s;

	/* ---- rhythm ---- */
	--gc-gutter: clamp(20px, 4vw, 56px);
	--gc-section: clamp(56px, 8vw, 110px);
}

/* ---- motion keyframes (consumed by components.css / site.css) ---- */
@keyframes gc-rise {
	from { opacity: 0; transform: translateY(46px); }
}
@keyframes gc-marquee {
	to { transform: translateX(-50%); }
}
@keyframes gc-pulse {
	50% { opacity: .25; }
}
/* wire pulse — a dash of energy travelling along a connector */
@keyframes gc-wire-flow {
	to { stroke-dashoffset: -180; }
}

/* ---- global kill-switch ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		animation-timeline: auto !important;
	}
}