/*
 * 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;
	--tg-green-strong: #4f9a24;
	--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-strong);
	--tg-accent:        var(--tg-green);
	--tg-focus:         #1f6feb;

	/* ---- 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;

	/* ---- 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:         #7fb0ff;
	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; }
}