/* SYPN design tokens (Figma: SPYN V4 - Home Screen 3001:4461 / Home Open 3046:3941) */

:root {
	/* Brand */
	--sypn-orange: #ff5700; /* Primary 500 / Molton orange */
	--sypn-orange-mid: #ed6928; /* Brand/Icon/orange */
	--sypn-orange-75: #f2815b;
	--sypn-ink: #1b1b1c; /* Asphalt Black */
	--sypn-ink-900: #331100; /* Primary 900 - text on orange */
	--sypn-darkest: #25292f;

	/* Neutrals */
	--sypn-grey: #5a585c; /* Asphalt Gray */
	--sypn-grey-50: #8d8d8e;
	--sypn-grey-25: #cacaca;
	--sypn-charcoal: #999b9a;
	--sypn-charcoal-50: #cccdcd;
	--sypn-charcoal-25: #e6e7e6;
	--sypn-mid: #5e636b; /* Neutral/Mid - labels on unselected controls */
	--sypn-orange-25: #fbdad2;
	--sypn-steam: #d2d2d2; /* Steam Grey - news section background */
	--sypn-lighter: #c4c8cc;
	--sypn-white: #ffffff;
	--sypn-yellow: #fbd900;

	/* Service status (Figma: Utilities/*, used by the live departures board) */
	--sypn-success: #259405;
	--sypn-success-light: #bfefb2;
	--sypn-warning: #d37204;
	--sypn-warning-light: #fac181;
	--sypn-error: #dc2626;
	--sypn-error-dark: #8d0b02;
	--sypn-info: #0879ca; /* Utilities/info - "On time", expected times */

	/* Transport modes (Figma: Brand/Icon/*). Each mode is a bordered pill filled
	   with its own 25% tint, on the journey planner's results. */
	--sypn-mode-teal: #00afae;
	--sypn-mode-teal-25: #bfefef;
	--sypn-mode-purple: #752a86;
	--sypn-mode-purple-25: #e2d5e4;
	--sypn-mode-green: #7fc395;
	--sypn-mode-green-25: #dff2e4;
	--sypn-mode-red: #8d0b02; /* train, from the departures map key */
	--sypn-mode-red-25: #e3c2c0;

	/* Spacing scale */
	--sypn-space-xxs: 8px;
	--sypn-space-xs: 16px;
	--sypn-space-sm: 24px;
	--sypn-space-md: 32px;
	--sypn-space-lg: 48px;
	--sypn-space-xl: 72px;

	/* Page gutter */
	--sypn-gutter: 56px;

	/* Radii */
	--sypn-radius-sm: 2px;
	--sypn-radius-md: 6px;
	--sypn-radius-lg: 10px;

	/* Type. Roobert is the brand face; it is not web-hosted, so Inter carries
	   the design until the licensed files are added to the project. */
	--sypn-font: "Roobert", "Inter", "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Decorative diagonal that separates the full-bleed bands */
	--sypn-notch-height: 79px;
	--sypn-notch-panel-width: 54.4%;
}

@media (max-width: 991.98px) {
	:root {
		--sypn-gutter: 16px;
		--sypn-notch-height: 80px;
		--sypn-notch-panel-width: 59%;
	}
}