/**
 * Thrift Weekly Community — design tokens.
 *
 * The single source of truth for the client's locked colour table and the
 * eleven-element typography scale. Every component stylesheet reads from
 * here; no component declares a raw hex value or a raw font size.
 *
 * Sources:
 *   "Exact Plugin Build + Colors + Approved Mockup" — section 3
 *   "Final Typography Specifications" — full table
 */

:root {
	/* ---- Colour, exactly as specified ---- */
	--twc-teal: #009b8e;
	--twc-teal-dark: #007c72;
	--twc-teal-tint: #e4f3f1;
	--twc-orange: #f4512a;
	--twc-orange-tint: #fdece7;
	--twc-gold: #f3c545;
	--twc-gold-tint: #fcf3dc;
	--twc-ink: #111111;
	--twc-white: #ffffff;
	--twc-gray-light: #f5f5f5;
	--twc-gray-border: #e2e2e2;

	/* Derived neutrals. Biased very slightly toward the teal so the greys
	   sit with the brand rather than against it. */
	--twc-ink-muted: #5f6b69;
	--twc-ink-subtle: #8b9391;
	--twc-danger: #c0392b;
	--twc-success: #1e8e5a;

	/* ---- Type families ---- */
	--twc-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--twc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* ---- Type scale: desktop ----
	   Element                 size   weight  line-height */
	--twc-fs-hero: 28px;          /* Montserrat 700 / 1.20 */
	--twc-lh-hero: 1.2;
	--twc-fs-title: 22px;         /* Montserrat 700 / 1.30 */
	--twc-lh-title: 1.3;
	--twc-fs-section: 20px;       /* Montserrat 700 / 1.25 */
	--twc-lh-section: 1.25;
	--twc-fs-card: 17px;          /* Montserrat 700 / 1.30 */
	--twc-lh-card: 1.3;
	--twc-fs-nav: 15px;           /* Montserrat 600 / 1.20 */
	--twc-lh-nav: 1.2;
	--twc-fs-button: 15px;        /* Montserrat 700 / 1.20 */
	--twc-lh-button: 1.2;
	--twc-fs-pill: 14px;          /* Montserrat 600 / 1.20 */
	--twc-lh-pill: 1.2;
	--twc-fs-body: 16px;          /* Inter 400 / 1.55 */
	--twc-lh-body: 1.55;
	--twc-fs-comment: 15px;       /* Inter 400 / 1.50 */
	--twc-lh-comment: 1.5;
	--twc-fs-meta: 14px;          /* Inter 500 / 1.40 */
	--twc-lh-meta: 1.4;
	--twc-fs-small: 13px;         /* Inter 500 / 1.35 */
	--twc-lh-small: 1.35;
	--twc-fs-score: 16px;         /* Montserrat 700 / 1.20 */
	--twc-lh-score: 1.2;

	/* ---- Weights ---- */
	--twc-fw-bold: 700;
	--twc-fw-semi: 600;
	--twc-fw-medium: 500;
	--twc-fw-regular: 400;

	/* ---- Spacing, radius, elevation ---- */
	--twc-space-1: 4px;
	--twc-space-2: 8px;
	--twc-space-3: 12px;
	--twc-space-4: 16px;
	--twc-space-5: 24px;
	--twc-space-6: 32px;
	--twc-space-7: 48px;

	--twc-radius-sm: 4px;
	--twc-radius: 8px;
	--twc-radius-lg: 12px;
	--twc-radius-pill: 999px;

	--twc-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
	--twc-shadow: 0 1px 3px rgba(17, 17, 17, 0.08), 0 6px 16px rgba(17, 17, 17, 0.05);

	--twc-transition: 140ms ease;
	--twc-maxwidth: 720px;
}

/* ---- Type scale: mobile ----
   The specification sets a hard floor: body copy never drops below 16px on
   mobile, so --twc-fs-body and --twc-fs-comment are deliberately unchanged. */
@media (max-width: 782px) {
	:root {
		--twc-fs-hero: 24px;
		--twc-fs-title: 20px;
		--twc-fs-section: 18px;
		--twc-fs-card: 16px;
		--twc-fs-nav: 14px;
		--twc-fs-button: 15px;
		--twc-fs-pill: 14px;
		--twc-fs-meta: 13px;
		--twc-fs-small: 12px;
		--twc-fs-score: 15px;
	}
}