/**
 * Design tokens for the swissbiotech.org redesign.
 *
 * Source of truth: the colour and typography guides in the prototype
 * (raskin-prototypes/sba3, src/pages/styleguide/ColorGuide.tsx and
 * TypographyGuide.tsx). Brand red #E73137 and Helvetica Neue via Adobe Fonts
 * were decided on 2026-09-18.
 *
 * Accessibility: #E73137 reaches 4.29:1 against white, both as a background
 * behind white text and as text on white. That fails WCAG AA for normal-size
 * text. Small labels and buttons with white text use --sba-red-dark (#BD2810,
 * 6.04:1); inline links are charcoal with a red underline, see links.css;
 * #E73137 is fine for large text, icons and non-text brand accents.
 *
 * All names carry an --sba- prefix so they cannot collide with MyListing or
 * Elementor custom properties. Elementor's Global Kit stays the source of truth
 * for the four colours it manages; see docs/design-tokens.md for the mapping.
 */

:root {
	/* Brand */
	--sba-red: #E73137;
	--sba-red-dark: #BD2810;
	/* Hover step for controls in --sba-red-dark (colour guide, 2026-09-18) */
	--sba-red-darker: #A0210E;
	--sba-red-light: #FDE8E8;
	--sba-red-contrast: #FFFFFF;
	/* Triplet form, for translucent variants: hsl(var(--sba-red-hsl) / 0.12) */
	--sba-red-hsl: 358 79% 55%;

	/*
	 * Icon tile: the square behind a glyph on value, platform, chapter and
	 * membership cards and in the style guide. Every tile reads these two, so
	 * switching the glyph between --sba-red-dark and --sba-red happens here.
	 * The brand red on the tint is 3.66:1, enough for a non-text graphic (3:1)
	 * but not for text; the dark red is 5.15:1.
	 */
	--sba-icon-tile-bg: var(--sba-red-light);
	--sba-icon-tile-color: var(--sba-red-dark);

	/* Text */
	--sba-charcoal: #1D212B;
	--sba-charcoal-light: #363D49;
	--sba-slate: #6A7181;
	--sba-slate-light: #A8AFBD;
	--sba-charcoal-hsl: 220 20% 14%;

	/* Surfaces */
	--sba-surface: #FFFFFF;
	--sba-surface-warm: #FBFAF9;
	--sba-surface-cool: #F9FAFB;
	--sba-muted: #F3F4F6;
	--sba-accent: #E8EAED;

	/* Lines and focus */
	--sba-border: #E2E4E9;
	--sba-input: #E2E4E9;
	--sba-ring: var(--sba-red);

	/* Footer */
	--sba-footer-bg: #181D25;
	--sba-footer-surface: #212630;
	--sba-footer-text: #ABB0BA;
	--sba-footer-text-bright: #F2F2F2;

	/* Feedback */
	--sba-destructive: #EF4343;

	/* Shape (tailwind.config.ts borderRadius: lg / md / sm) */
	--sba-radius: 0.5rem;
	--sba-radius-md: calc(0.5rem - 2px);
	--sba-radius-sm: calc(0.5rem - 4px);

	/* Layout (tailwind.config.ts container) */
	--sba-container-max: 1400px;
	--sba-container-padding: 1rem; /* every section writes px-4 over the container's 2rem, see the guide's Layout page */

	/* Headings: font-bold tracking-tight in the prototype's base layer */
	--sba-heading-weight: 700;
	--sba-heading-tracking: -0.025em;

	/* Motion (tailwind.config.ts animation) */
	--sba-duration-fade-up: 0.6s;
	--sba-duration-slide-in: 0.5s;
	--sba-duration-hover: 0.3s;

	/*
	 * Typography: Helvetica Neue, licensed through Adobe Fonts (kit bek5tug,
	 * enqueued in functions.php). The kit serves it under the family name
	 * "helvetica-neue-lt-pro" with weights 400, 500 and 700, roman and italic —
	 * naming only "Helvetica Neue" would pick up a locally installed copy on
	 * macOS and miss the webfont everywhere else.
	 */
	--sba-font-sans: "helvetica-neue-lt-pro", "Helvetica Neue", Arial, system-ui, sans-serif;
	--sba-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}