/* ==========================================================================
   Tourastic — Design tokens (v4: minimal, conversion-focused)
   Light, airy, near-grayscale with ONE calm teal accent. Hairline borders over
   heavy shadows. Inspired by clean activity marketplaces (tripdust-style).
   All values are CSS custom properties (Customizer can override brand colours).
   ========================================================================== */

:root {
	/* Brand — gradient from the logo (blue → teal-green) ---------------- */
	--tt-brand-1:   #1a73e8;  /* logo blue                                   */
	--tt-brand-2:   #0ea672;  /* logo teal-green                             */
	--tt-navy:      #0c2233;  /* deep ink — header/footer/headings           */
	--tt-navy-700:  #143246;
	--tt-blue:      #1a73e8;  /* primary blue — links                        */
	--tt-blue-600:  #1558c0;  /* hover                                        */
	--tt-blue-050:  #e8f0fe;  /* blue tint                                   */
	--tt-accent:    #0ea672;  /* green — CTAs (captureatrip-style)           */
	--tt-accent-600:#0b8a5f;
	--tt-accent-050:#e7f8f0;
	--tt-amber:     #ffb703;  /* stars / badges                              */
	--tt-sale:      #e5484d;  /* discount red                                */

	/* Neutrals (clean, light) ------------------------------------------- */
	--tt-ink:       #0f172a;  /* primary headings                            */
	--tt-body:      #3f4756;  /* body text                                   */
	--tt-muted:     #6b7280;  /* secondary text                              */
	--tt-faint:     #9aa3af;  /* tertiary / icons                            */
	--tt-line:      #e6e8ec;  /* borders / dividers                          */
	--tt-line-2:    #f1f2f5;  /* subtle dividers                             */
	--tt-bg:        #f8f9fb;  /* page background                             */
	--tt-surface:   #ffffff;  /* cards / panels                              */
	--tt-surface-2: #f7f8fa;  /* inset surfaces                              */

	/* Status ------------------------------------------------------------ */
	--tt-success:   #1f9d55;
	--tt-success-050:#e8f7ee;
	--tt-danger:    #e5484d;
	--tt-warning:   #f59e0b;

	/* Gradients — kept subtle / mono (rarely used now) ------------------ */
	--tt-grad-navy: linear-gradient(135deg, #0c2233 0%, #143246 100%);
	--tt-grad-blue: linear-gradient(135deg, #1a73e8 0%, #1558c0 100%);
	--tt-grad-warm: linear-gradient(135deg, #14c58a 0%, #0ea672 100%);
	--tt-grad-brand: linear-gradient(120deg, #1a73e8 0%, #0ea672 100%); /* logo gradient */

	/* Typography -------------------------------------------------------- */
	--tt-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tt-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tt-fs-xs:   .75rem;    /* 12 */
	--tt-fs-sm:   .8125rem;  /* 13 */
	--tt-fs-base: .875rem;   /* 14 — small & compact */
	--tt-fs-md:   1rem;      /* 16 */
	--tt-fs-lg:   1.1875rem; /* 19 */
	--tt-fs-xl:   1.5rem;    /* 24 */
	--tt-fs-2xl:  1.9375rem; /* 31 */
	--tt-fs-3xl:  2.5rem;    /* 40 */
	--tt-lh:      1.6;
	--tt-lh-tight:1.15;

	/* Radii — modest, clean --------------------------------------------- */
	--tt-r-sm: 8px;
	--tt-r:    12px;
	--tt-r-lg: 16px;
	--tt-r-pill: 999px;

	/* Shadows — minimal (hairline-first) -------------------------------- */
	--tt-shadow-sm: 0 1px 2px rgba(16,24,40,.04);
	--tt-shadow:    0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
	--tt-shadow-md: 0 6px 18px -8px rgba(16,24,40,.12);
	--tt-shadow-lg: 0 16px 40px -18px rgba(16,24,40,.18);
	--tt-ring:      0 0 0 3px rgba(14,166,114,.18);

	/* Layout ------------------------------------------------------------ */
	--tt-container: 1200px;
	--tt-container-wide: 1320px;
	--tt-gutter:    24px;
	--tt-header-h:  62px;

	/* Spacing scale ----------------------------------------------------- */
	--tt-s1: 4px;  --tt-s2: 8px;   --tt-s3: 12px;  --tt-s4: 16px;
	--tt-s5: 20px; --tt-s6: 24px;  --tt-s7: 32px;  --tt-s8: 44px;
	--tt-s9: 56px; --tt-s10: 68px; --tt-s11: 84px;

	/* Motion ------------------------------------------------------------ */
	--tt-ease: cubic-bezier(.4, 0, .2, 1);
	--tt-fast: .16s var(--tt-ease);
	--tt-slow: .34s var(--tt-ease);
}

@media (prefers-color-scheme: dark) {
	:root[data-tt-dark="auto"] {
		--tt-bg: #0b1220; --tt-surface: #111a2e; --tt-surface-2: #16203a;
		--tt-ink: #f2f5fb; --tt-body: #c3cede; --tt-muted: #93a1b8;
		--tt-line: #223049; --tt-line-2: #1a2740;
	}
}