/**
 * Toba Market — Design Tokens
 *
 * Single source of truth for color, spacing, radius, shadow, and type
 * scale. See docs/PHASE_6_DESIGN_SYSTEM.md for the full rationale.
 * Every other stylesheet in this system reads from these variables —
 * never hard-code a color/spacing/radius value directly in a
 * component file.
 */

:root {
	/* ---- Color: dark theme, applied site-wide ----
	   Confirmed and approved: dark mode should be uniform across
	   every page, not scoped to the homepage only (a listing detail
	   page reverting to light mode was a real, reported
	   inconsistency). Every page already reads from these same
	   --tts-* tokens, so making dark the actual root default —
	   instead of a scoped override applied only under
	   .tts-market-homepage--dark — makes it apply everywhere
	   automatically: listing detail, search, category/location
	   archives, account dashboard, login/register, all of it. */
	--tts-primary:        #17b3a3;
	--tts-primary-hover:  #14a094;
	--tts-primary-light:  #12302c;
	--tts-accent:         #c7ccd1;
	--tts-accent-hover:   #aeb4ba;

	--tts-text:           #eef0f1;
	--tts-text-muted:     #9aa3a8;
	--tts-text-inverse:   #121417;

	--tts-background:     #121417;
	--tts-surface:         #1c1f23;
	--tts-border:          #2b2f34;
	--tts-border-strong:   #3c4147;

	--tts-success:        #3ed17a;
	--tts-success-bg:      #123023;
	--tts-warning:        #f0c94d;
	--tts-warning-bg:      #332a10;
	--tts-danger:         #ff6b6b;
	--tts-danger-bg:       #331616;

	/* ---- Spacing scale (px) ---- */
	--tts-space-1:  4px;
	--tts-space-2:  8px;
	--tts-space-3:  12px;
	--tts-space-4:  16px;
	--tts-space-5:  20px;
	--tts-space-6:  24px;
	--tts-space-8:  32px;
	--tts-space-10: 40px;
	--tts-space-12: 48px;
	--tts-space-16: 64px;

	/* ---- Radius scale ---- */
	--tts-radius-sm:   4px;
	--tts-radius-md:   8px;
	--tts-radius-lg:   14px;
	--tts-radius-pill: 999px;

	/* ---- Shadows (subtle only — see docs/PHASE_6_DESIGN_SYSTEM.md) ---- */
	--tts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--tts-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
	--tts-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);

	/* ---- Typography ----
	   System font stack: zero network request, renders instantly,
	   and every platform's stack already ships broad Unicode/Urdu
	   glyph coverage via its default UI font — a webfont would add a
	   render-blocking or layout-shifting request for no clear benefit
	   at this stage (see docs/PHASE_6_DESIGN_SYSTEM.md "Typography"). */
	--tts-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", Arial,
		sans-serif;

	--tts-font-size-xs:   0.75rem;
	--tts-font-size-sm:   0.875rem;
	--tts-font-size-base: 1rem;
	--tts-font-size-lg:   1.125rem;
	--tts-font-size-xl:   1.375rem;
	--tts-font-size-2xl:  1.75rem;
	--tts-font-size-3xl:  2.25rem;

	--tts-line-height-tight: 1.25;
	--tts-line-height-base:  1.55;

	--tts-container-max: 1180px;

	/* ---- Motion ---- */
	--tts-transition-fast: 120ms ease;

	/* ---- Homepage redesign: premium surface tokens (additive — see
	   docs/HOMEPAGE_ARCHITECTURE_ASSESSMENT.md for why these are new
	   tokens under the existing --tts-* convention, not a second
	   design system). Used sparingly: hero background, a small number
	   of elevated cards — never applied wholesale to every surface. */
	--tts-gradient-hero: linear-gradient(135deg, #0d6e63 0%, #0a544c 55%, #083f39 100%);
	--tts-surface-glass: rgba(255, 255, 255, 0.08);
	--tts-border-glass: rgba(255, 255, 255, 0.16);
	--tts-shadow-glow: 0 8px 32px rgba(13, 110, 99, 0.18);
	--tts-radius-2xl: 20px;
}