/* ==========================================================================
   Scoutriders design tokens
   Palette taken from Indian highway signage: sign green, milestone yellow,
   asphalt ink. Every text pair below passes WCAG 2.1 AA (see README).
   Mirror these values in Elementor > Site Settings > Global Colors / Fonts
   so header, footer and any Elementor page use the same system.
   ========================================================================== */

:root {
	/* ---- Color ---- */
	--sr-green: #d7141a;        /* primary: logo red (name kept for compatibility). White text on it 5.2:1 */
	--sr-green-hover: #a50f14;
	--sr-green-deep: #1a1a1a;   /* charcoal: CTA band, hero. White text 17.4:1 */
	--sr-yellow: #f2b705;       /* accent: milestone yellow. Use with ink text only (9.2:1) */
	--sr-yellow-hover: #d9a404;
	--sr-ink: #1f1f1f;          /* body text on bg 15.3:1 */
	--sr-ink-2: #4a4a4a;        /* secondary text on bg 7.2:1 */
	--sr-bg: #f5f3ef;           /* page background */
	--sr-surface: #ffffff;      /* cards */
	--sr-surface-2: #ece9e3;    /* subtle fills, tags */
	--sr-line: #d9d4cb;         /* dividers (decorative) */
	--sr-line-strong: #8a8378;  /* input / control borders, 3.5:1 non-text */
	--sr-danger: #b42318;       /* low seats, sold out. On white 6.5:1 */
	--sr-on-dark: #ffffff;
	--sr-on-dark-2: #cfcac2;    /* secondary text on charcoal 11:1 */
	--sr-asphalt: #2b2b2b;      /* itinerary road */
	--sr-focus: #1f1f1f;
	--sr-focus-inverse: #f2b705;

	/* ---- Type ----
	   Self-host both families (WOFF2, font-display: swap) for CWV. */
	--sr-font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
	--sr-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sr-font-label: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;

	/* Fluid scale, 360px -> 1440px viewport, ratio ~1.25 -> 1.333 */
	--sr-step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.9rem);
	--sr-step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
	--sr-step-1: clamp(1.2rem, 1.12rem + 0.37vw, 1.5rem);
	--sr-step-2: clamp(1.44rem, 1.29rem + 0.67vw, 2rem);
	--sr-step-3: clamp(1.73rem, 1.48rem + 1.11vw, 2.67rem);
	--sr-step-4: clamp(2.2rem, 1.7rem + 2.3vw, 3.8rem);
	--sr-step-5: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);

	/* ---- Space: 4px base ---- */
	--sr-space-1: 0.25rem;  /* 4  */
	--sr-space-2: 0.5rem;   /* 8  */
	--sr-space-3: 0.75rem;  /* 12 */
	--sr-space-4: 1rem;     /* 16 */
	--sr-space-5: 1.5rem;   /* 24 */
	--sr-space-6: 2rem;     /* 32 */
	--sr-space-7: 3rem;     /* 48 */
	--sr-space-8: 4rem;     /* 64 */
	--sr-space-section: clamp(3rem, 2rem + 4vw, 5.5rem);
	--sr-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

	/* ---- Shape & depth ---- */
	--sr-radius-sm: 4px;
	--sr-radius: 8px;
	--sr-radius-lg: 14px;
	--sr-shadow: 0 1px 2px rgb(21 32 26 / 0.06), 0 6px 20px rgb(21 32 26 / 0.08);

	/* ---- Layout ---- */
	--sr-max: 76rem;
	--sr-measure: 65ch;
	--sr-tap: 44px;
	--sr-header-offset: 0px; /* measured live by ride.js from the theme's sticky header */

	--sr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}