/*
 * tokens.css — design tokens for grawklasy theme.
 *
 * Enqueued BEFORE main.css. Provides semantic names backed by values
 * extracted from PSD via tools/extract-psd.py and reviewed against the
 * accepted desktop baseline.
 *
 * See:
 *   - docs/adr/0001-responsive-breakpoints.md  (breakpoints)
 *   - docs/adr/0002-css-layering.md            (enqueue order)
 *   - .context/design/tokens.json              (raw extraction)
 *
 * The old `:root` block in main.css remains for compatibility. Names
 * that already exist there (--gk-teal, --gk-magenta, --gk-radius,
 * --gk-container, etc.) are intentionally NOT redefined here — main.css
 * wins for those. New rules in responsive.css use the semantic names
 * below.
 */

:root {
	/* ---------------- colors ---------------- */
	/* Brand */
	--gk-color-teal: #00c4c9;          /* matches main.css --gk-teal */
	--gk-color-teal-soft: #82e1e1;
	--gk-color-magenta: #ec008c;       /* matches main.css --gk-magenta */
	--gk-color-magenta-soft: #ff9ec8;

	/* Neutrals */
	/* Text colour used by the design for ALL copy. Every one of the 231
	   visible text layers across the 8 design JPGs samples to #000000,
	   #ffffff, #00c4ca, #ec008c or #fcfaf6 — there is no grey type in the
	   source, and #000000 is its most common colour (222 hits in
	   .context/design/tokens.json). The theme had drifted to five different
	   greys (#1f2937 #111827 #374151 #4a4a4a #6b7280) across 31 rules in
	   main.css (client review round 1, #7 and #19). */
	--gk-color-text: #000000;

	/* The three below are unused and kept only so the palette stays readable
	   against the old main.css names. Do NOT reach for them for type: the
	   design has no grey text at all, and responsive.css now maps every grey
	   the theme rendered onto --gk-color-text (client review round 1, #7). */
	--gk-color-ink: #111111;
	--gk-color-ink-soft: #4a4a4a;
	--gk-color-muted: #6b7280;
	--gk-color-line: rgba(0, 0, 0, 0.12);
	--gk-color-bg: #ffffff;
	--gk-color-bg-soft: #fcfaf6;       /* off-white panels */
	--gk-color-black: #0b0b0b;

	/* ---------------- typography ---------------- */
	--gk-font-display: "Gabarito", "Gabarito-ExtraBold", system-ui, sans-serif;
	--gk-font-body: "Red Hat Display", "RedHatDisplay-Regular", system-ui, sans-serif;

	/* Mobile baseline (smaller). Desktop overrides via media queries. */
	--gk-fs-body: 16px;
	--gk-fs-body-lg: 18px;
	--gk-fs-lead: 20px;
	--gk-fs-kicker: 14px;

	--gk-fs-h6: 18px;
	--gk-fs-h5: 22px;
	--gk-fs-h4: 26px;
	--gk-fs-h3: 32px;
	--gk-fs-h2: 40px;
	--gk-fs-h1: 48px;
	--gk-fs-display: 56px;

	/* Desktop targets (from PSD) — applied via media queries in responsive.css */
	--gk-fs-body-desktop: 18px;
	--gk-fs-lead-desktop: 25px;
	--gk-fs-kicker-desktop: 23px;
	--gk-fs-h6-desktop: 24px;
	--gk-fs-h5-desktop: 27px;
	--gk-fs-h4-desktop: 38px;
	--gk-fs-h3-desktop: 43px;
	--gk-fs-h2-desktop: 53px;
	--gk-fs-h1-desktop: 72px;
	--gk-fs-display-desktop: 122px;

	/* Line-height */
	--gk-lh-tight: 1.1;
	--gk-lh-normal: 1.4;
	--gk-lh-relaxed: 1.6;

	/* Weight */
	--gk-fw-regular: 400;
	--gk-fw-medium: 500;
	--gk-fw-bold: 700;
	--gk-fw-extrabold: 800;

	/* ---------------- spacing scale ---------------- */
	--gk-space-1: 4px;
	--gk-space-2: 8px;
	--gk-space-3: 12px;
	--gk-space-4: 16px;
	--gk-space-5: 24px;
	--gk-space-6: 32px;
	--gk-space-7: 48px;
	--gk-space-8: 64px;
	--gk-space-9: 96px;
	--gk-space-10: 128px;

	/* ---------------- layout ---------------- */
	--gk-container-max: 1800px;        /* PSD canvas; main.css --gk-container=1682px kept for compat */
	--gk-container-pad-mobile: 16px;
	--gk-container-pad-tablet: 32px;
	--gk-container-pad-desktop: 73px;  /* matches main.css gutter */

	/* Uniform top gap between the header and the first block on a subpage.
	   PSD first-content top minus header bottom (y110): kontakt 78,
	   wspolpracuj 78, wydarzenia 77, wesprzyj 92, nasze-projekty 92,
	   o-nas 118. 78 is the dominant value; the client asked for one
	   consistent gap across every subpage (client review round 1, #13). */
	--gk-subpage-top: 78px;

	/* ---------------- breakpoints (ADR-0001) ---------------- */
	--gk-bp-tablet: 640px;
	--gk-bp-desktop: 1024px;
	--gk-bp-wide: 1440px;

	/* ---------------- radii & shadows ---------------- */
	--gk-radius-sm: 8px;
	--gk-radius-md: 12px;
	--gk-radius-lg: 18px;              /* matches main.css --gk-radius */
	--gk-radius-pill: 9999px;

	--gk-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.12);
	--gk-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);

	/* ---------------- motion ---------------- */
	--gk-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--gk-duration-fast: 150ms;
	--gk-duration-normal: 250ms;
}