/**
 * SEB Theme — Global Design Tokens
 * ---------------------------------
 * Centralized CSS custom properties. Every other stylesheet in this theme
 * should reference these variables instead of hard-coding values.
 *
 * Do not scatter raw hex/px values elsewhere in the codebase.
 */

:root {

	/* ---------------------------------------------------------------
	   Color palette
	   --------------------------------------------------------------- */
	--seb-primary: #003463;        /* Deep Blue — brand, headings, dark UI */
	--seb-primary-light: #0064c1;  /* Primary Blue — links, hover, interactive */
	--seb-accent: #f8753a;         /* Accent Orange — primary CTA */
	--seb-accent-dark: #e4622a;    /* Accent hover / strong accent state */
	--seb-dark: #0e2136;           /* Dark text — headings, strong body text */
	--seb-text: #5b6b7c;           /* Secondary text — paragraphs, meta */
	--seb-border: #e4e9f0;         /* Borders, dividers, form controls */
	--seb-bg-light: #f6f8fb;       /* Light background — alt sections, surfaces */
	--seb-white: #ffffff;          /* White — main bg, cards, light UI */

	/* ---------------------------------------------------------------
	   Layout widths
	   --------------------------------------------------------------- */
	--seb-container-width: 1240px;
	--seb-container-width-wide: 1400px;
	--seb-content-width: 1240px;

	/* Footer logo tokens */
	--seb-footer-logo-width-desktop: 160px;
	--seb-footer-logo-width-mobile: 130px;

	/* Responsive container padding */
	--seb-container-padding: 32px; /* desktop default */

	/* ---------------------------------------------------------------
	   Spacing scale
	   --------------------------------------------------------------- */
	--seb-space-xs: 8px;
	--seb-space-sm: 12px;
	--seb-space-md: 16px;
	--seb-space-lg: 24px;
	--seb-space-xl: 32px;
	--seb-space-2xl: 48px;
	--seb-space-3xl: 64px;
	--seb-space-4xl: 80px;
	--seb-space-5xl: 96px;

	/* ---------------------------------------------------------------
	   Border radius
	   --------------------------------------------------------------- */
	--seb-radius-sm: 8px;
	--seb-radius-md: 12px;
	--seb-radius-lg: 16px;
	--seb-radius-pill: 999px;

	/* ---------------------------------------------------------------
	   Shadows — soft, low-contrast only
	   --------------------------------------------------------------- */
	--seb-shadow-sm: 0 1px 2px rgba(14, 33, 54, 0.06);
	--seb-shadow-md: 0 4px 12px rgba(14, 33, 54, 0.08);
	--seb-shadow-lg: 0 12px 32px rgba(14, 33, 54, 0.10);

	/* ---------------------------------------------------------------
	   Transitions
	   --------------------------------------------------------------- */
	--seb-transition-fast: 150ms ease;
	--seb-transition: 200ms ease;
	--seb-transition-slow: 320ms ease;

	/* ---------------------------------------------------------------
	   Focus ring
	   --------------------------------------------------------------- */
	--seb-focus-ring-color: var(--seb-primary-light);
	--seb-focus-ring: 0 0 0 3px rgba(0, 100, 193, 0.35);

	/* ---------------------------------------------------------------
	   Typography — font stacks (see typography.css for usage)
	   --------------------------------------------------------------- */
	--seb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--seb-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--seb-font-nav: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--seb-font-button: var(--seb-font-body);
	--seb-font-meta: var(--seb-font-body);

	/* ---------------------------------------------------------------
	   Navigation Menu Typography & Styling Tokens
	   --------------------------------------------------------------- */
	--seb-menu-font-family: var(--seb-font-nav);
	--seb-menu-font-size: 14px;
	--seb-menu-font-weight: 500;
	--seb-menu-letter-spacing: 0.2px;
	--seb-menu-text-transform: none;
	--seb-menu-text-color: #172033;
	--seb-menu-hover-color: #F28C28;
	--seb-menu-active-color: #F28C28;
	--seb-menu-accent-indicator: #F28C28;
	--seb-menu-gap: clamp(18px, 2.2vw, 34px);
	--seb-menu-link-padding-y: 6px;
	--seb-menu-link-padding-x: 0px;
	--seb-submenu-bg: rgba(255, 255, 255, 0.98);
	--seb-submenu-border: rgba(228, 233, 240, 0.85);
	--seb-submenu-shadow: 0 20px 48px -10px rgba(14, 33, 54, 0.14), 0 0 1px 1px rgba(0, 0, 0, 0.03);
	--seb-submenu-radius: 14px;
}

/* Tighter container padding at smaller breakpoints */
@media (max-width: 1024px) {
	:root {
		--seb-container-padding: 24px; /* tablet */
	}
}

@media (max-width: 600px) {
	:root {
		--seb-container-padding: 20px; /* mobile */
	}
}

@media (max-width: 380px) {
	:root {
		--seb-container-padding: 16px; /* small mobile */
	}
}