/* SYPN design tokens. Colour names follow the Figma "Colour" variables (SYPN V2, Brand palette 3021:4807):
   Brand/Asphalt Black 75 -> --brand-asphalt-black-75. Anything not in Figma keeps the --sypn- prefix. */

@font-face {
	font-family: "Roobert";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/roobert/Roobert-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Roobert";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/fonts/roobert/Roobert-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Roobert";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/roobert/Roobert-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Roobert";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/roobert/Roobert-Bold.woff2") format("woff2");
}

/* .block-preview is the wrapper backoffice block previews render into. Those live in a shadow
   root, where :root matches nothing, so name it too or every var() in a preview resolves empty. */
:root, .block-preview {
	/* Brand */
	--brand-molten-orange: #ff5700;
	--brand-molten-75: #ff8140;
	--brand-molten-50: #ffab80;
	--brand-molten-25: #ffd5bf;
	--brand-fleet-red: #410000;
	--brand-fleet-75: #704040;
	--brand-fleet-50: #a08080;
	--brand-fleet-25: #d0bfbf;
	--brand-asphalt-black: #1b1b1c;
	--brand-asphalt-black-75: #505051;
	--brand-asphalt-black-50: #8d8d8e;
	--brand-asphalt-black-25: #cacaca;
	--brand-asphalt-grey: #5a585c;
	--brand-asphalt-grey-75: #747275;
	--brand-asphalt-grey-50: #adacae;
	--brand-asphalt-grey-25: #d9d8da;
	--brand-charcoal-grey: #999b9a;
	--brand-charcoal-75: #a6a7a6;
	--brand-charcoal-50: #cccdcd;
	--brand-charcoal-25: #e6e7e6;

	/* Neutral, Basic, Overlays */
	--neutral-white: #ffffff;
	--neutral-steam-grey: #d2d2d2;
	--basic-black: #000000;
	--overlays-overlay-primary: #1b1b1c66;

	/* Utilities */
	--utilities-error: #630600;
	--utilities-light-error: #8d0b02;
	--utilities-warning: #d37204;
	--utilities-light-warning: #fac181;
	--utilities-info: #0879ca;
	--utilities-light-info: #80c0ee;
	--utilities-success: #259405;
	--utilities-success-light: #bfefb2;
	--utilities-focus: #fdd924;

	/* Alerts */
	--alerts-positive-fill: #ecf7f0;
	--alerts-positive-text: #15803d;
	--alerts-positive-border: #c3e4cf;
	--alerts-caution-fill: #fef3c7;
	--alerts-caution-text: #854d0e;
	--alerts-caution-border: #ca8a04;
	--alerts-negative-fill: #fee2e2;
	--alerts-negative-text: #991b1b;
	--alerts-negative-border: #ea5455;
	--alerts-neutral-fill: #e6e7e6;
	--alerts-neutral-text: #5b5f63;
	--alerts-neutral-border: #cccdcd;
	--alerts-timetable-fill: #e7eaf0;
	--alerts-timetable-text: #3f4a5a;
	--alerts-timetable-border: #cfd5df;
	--alerts-info-fill: #e6f4ff;
	--alerts-info-text: #1f4c97;
	--alerts-info-border: #0879ca;

	/* Tertiary */
	--tertiary-primary-700: #3b3d40;

	/* Icon colours (Figma Brand/Icon/*, due to change) */
	--sypn-orange-mid: #ed6928;
	--sypn-orange-75: #f2815b;
	--sypn-orange-25: #fbdad2;
	--sypn-yellow: #fbd900;
	--sypn-yellow-75: #fce340;
	--sypn-yellow-50: #fdec80;
	--sypn-yellow-25: #fef6bf;
	--sypn-purple-50: #c5aac3;

	/* Transport modes. 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;
	--sypn-mode-red-25: #e3c2c0;

	/* Not in the Figma variables */
	--sypn-ink-900: #331100;
	--sypn-darkest: #25292f;
	--sypn-mid: #5e636b;
	--sypn-lighter: #c4c8cc;
	--sypn-orange-600: #cc4600;
	--sypn-steel: #b9b4b9;
	--sypn-ink-hover: #323232;
	--sypn-error: #dc2626;
	--sypn-error-fill: #fdecec;
	--sypn-caution-border-bright: #facc15;
	--sypn-fill-subtle: #f3f4f6;
	--sypn-hover-subtle: #f7f7f7;
	--sypn-map-background: #f2f0ec;

	/* Focus (Figma: Focus Keyboard Navigation) */
	--sypn-focus-outline: 2px solid var(--brand-asphalt-black);
	--sypn-focus-ring: 0 0 0 2px var(--utilities-focus);
	--sypn-focus-underline: inset 0 -2px 0 var(--brand-asphalt-black);

	/* 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-base: 56px;
	--sypn-content-max: 1440px;
	--sypn-gutter: max(var(--sypn-gutter-base), calc((100% - var(--sypn-content-max)) / 2 + var(--sypn-gutter-base)));

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

	--sypn-font: "Roobert", "Inter", "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 991.98px) {
	:root, .block-preview {
		--sypn-gutter-base: 16px;
	}
}