/*
 * Team Grassroots design tokens.
 * Single source of truth for colour, type, spacing, radii, shadows, motion,
 * layout and breakpoints. Derived from the locked designer brief (p36) + the
 * approved mockups. Values are tunable here without touching component CSS.
 *
 * Two surface modes: DARK editorial/community pages, LIGHT retail shop.
 * Green is reserved for the primary CTA / positive status only.
 */

:root {
	/* ---- Brand palette ---- */
	--tg-black:        #0e0e0e; /* brand black (dark surfaces, product-nav strip) */
	--tg-ink:          #141414; /* near-black text on light */
	--tg-white:        #ffffff;
	--tg-paper:        #f6f6f4; /* light retail background */
	--tg-paper-2:      #eef0ee; /* subtle light panel */

	/* Premium action green (primary CTA + positive status). Tune to artwork. */
	--tg-green:        #5faf2d; /* brand green: fills and accents on dark */
	--tg-green-strong: #4f9a24;
	/* Accessible pair for the same green used as TEXT or as a button fill
	   behind white text: the brand green gives 2.74:1, below the 4.5:1 WCAG AA
	   needs for body-size text. These are the nearest greens that pass. */
	--tg-green-text:   #3f7d1d; /* 5.04:1 on white */
	--tg-green-fill:   #43841e; /* 4.61:1 behind white text */
	/* The same green where it has to read at label size over a PHOTOGRAPH or on
	   the dark-green kit panel. The brand green is 0.33 luminance, which is not
	   light enough: on the shop's brightest showcase panel it measured 1.46:1
	   and on the kit panel 3.96:1, against the 4.5:1 a 12-16px label needs.
	   Darkening those grounds far enough would flatten the picture, so the
	   lighter tint of the same hue is used instead. */
	--tg-green-on-dark: #8fd95a; /* 5.2:1+ over a scrimmed photograph */
	--tg-green-soft:   #eaf5e0;
	--tg-green-line:   #bfe3a5; /* fine green border used on contextual tabs */

	/* ---- Neutrals ---- */
	--tg-n-900: #16181a;
	--tg-n-800: #22262a;
	--tg-n-700: #33383d;
	--tg-n-600: #565c63;
	--tg-n-500: #7a8188;
	--tg-n-400: #a4abb2;
	--tg-n-300: #cdd2d7;
	--tg-n-200: #e3e6e9;
	--tg-n-100: #f1f3f4;

	/* ---- Status ---- */
	--tg-success: #3ea04a;
	--tg-warning: #e0a800;
	--tg-error:   #cf3b2e;
	--tg-info:    #2f6fed;

	/* ---- Semantic (light retail default) ---- */
	--tg-bg:            var(--tg-white);
	--tg-bg-muted:      var(--tg-paper);
	--tg-text:          var(--tg-ink);
	--tg-text-muted:    var(--tg-n-600);
	--tg-border:        var(--tg-n-200);
	--tg-border-strong: var(--tg-n-300);
	--tg-link:          var(--tg-green-text);
	--tg-accent:        var(--tg-green);
	/* Brand green, not the default blue. The focus ring is the one piece of
	   chrome that appears on every control - the search bar most visibly - and
	   a blue ring on a green site looked like a browser default nobody had
	   styled. --tg-green-strong rather than --tg-green: the ring sits against
	   white as often as against the dark header, and the stronger tone holds up
	   on both. */
	--tg-focus:         var(--tg-green-strong);

	/* ---- Typography ---- */
	--tg-font-body: "Inter", "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tg-font-head: "Archivo", "Arial Narrow", "Inter", system-ui, sans-serif; /* strong geometric/condensed display */
	--tg-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	--tg-fw-normal: 400;
	--tg-fw-medium: 500;
	--tg-fw-semi:   600;
	--tg-fw-bold:   700;
	--tg-fw-black:  800;

	/* Type scale (fluid-ready; rem base 16px) */
	--tg-fs-xs:   0.75rem;   /* 12 */
	--tg-fs-sm:   0.875rem;  /* 14 */
	--tg-fs-base: 1rem;      /* 16 */
	--tg-fs-md:   1.125rem;  /* 18 */
	--tg-fs-lg:   1.375rem;  /* 22 */
	--tg-fs-xl:   1.75rem;   /* 28 */
	--tg-fs-2xl:  2.25rem;   /* 36 */
	--tg-fs-3xl:  3rem;      /* 48 */
	--tg-fs-4xl:  4rem;      /* 64 hero */

	--tg-lh-tight: 1.1;
	--tg-lh-snug:  1.3;
	--tg-lh-base:  1.6;

	/* ---- Spacing scale (4px base) ---- */
	--tg-sp-1: 0.25rem;
	--tg-sp-2: 0.5rem;
	--tg-sp-3: 0.75rem;
	--tg-sp-4: 1rem;
	--tg-sp-5: 1.5rem;
	--tg-sp-6: 2rem;
	--tg-sp-7: 3rem;
	--tg-sp-8: 4rem;
	--tg-sp-9: 6rem;

	/* ---- Vertical rhythm for full-width bands ----
	   Three deliberate steps, not a different value per module. The gap a
	   reader sees between two stacked content bands is TWICE --tg-band-y, so
	   these are half the intended gap: 44px between sections on a phone, 72px
	   on a desktop. They are fluid, because a fixed 48px band that looks
	   considered at 1440 is a third of a phone screen. */
	--tg-band-y:       clamp(1.375rem, 2.5vw, 2.25rem); /* 22 - 36: content section */
	--tg-band-y-tight: clamp(1rem, 1.6vw, 1.5rem);      /* 16 - 24: one-line strip */
	--tg-band-y-loose: clamp(2rem, 4vw, 3.5rem);        /* 32 - 56: hero, feature band */

	/* ---- Radii ---- */
	--tg-radius-sm:   6px;
	--tg-radius:      10px;
	--tg-radius-lg:   16px;
	--tg-radius-pill: 999px;

	/* ---- Borders ---- */
	--tg-bw:      1px;
	--tg-bw-thick:2px;

	/* ---- Shadows ---- */
	--tg-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
	--tg-shadow:    0 2px 8px rgba(0,0,0,.08);
	--tg-shadow-lg: 0 8px 28px rgba(0,0,0,.16);

	/* ---- Motion ---- */
	--tg-ease:      cubic-bezier(.4, 0, .2, 1);
	--tg-dur-fast:  120ms;
	--tg-dur:       200ms;
	--tg-dur-slow:  320ms;

	/* ---- Layout ---- */
	--tg-maxw:      1440px;
	--tg-maxw-text: 720px;
	--tg-gutter:    clamp(16px, 4vw, 40px);
	--tg-tap:       48px; /* minimum touch target */
	--tg-header-h:  72px;
	--tg-bottombar-h: 64px;

	/* ---- Z-index scale ---- */
	--tg-z-header:    100;
	--tg-z-tabs:      90;
	--tg-z-drawer:    200;
	--tg-z-overlay:   190;
	--tg-z-bottombar: 150;
	--tg-z-toast:     300;

	/* ---- Breakpoints (reference; used in @media queries) ---- */
	/* mobile <=390, tablet <=768, desktop 1440 */
}

/* Dark editorial/community surface. Apply to <body> or a section wrapper. */
.tg-dark {
	--tg-bg:            var(--tg-black);
	--tg-bg-muted:      var(--tg-n-900);
	--tg-text:          var(--tg-white);
	--tg-text-muted:    var(--tg-n-400);
	--tg-border:        var(--tg-n-800);
	--tg-border-strong: var(--tg-n-700);
	--tg-link:          var(--tg-green);
	--tg-focus:         var(--tg-green);
	color: var(--tg-text);
	background: var(--tg-bg);
}

@media (prefers-reduced-motion: reduce) {
	:root { --tg-dur-fast: 0ms; --tg-dur: 0ms; --tg-dur-slow: 0ms; }
	/* The tokens only reach what uses them. This covers the rest: a handful of
	   hard-coded transitions, anything a plugin brings with it, and - the one
	   that matters most - the smooth scrolling set on <html>, which is exactly
	   the movement someone asking for reduced motion wants stopped. */
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}