/* =========================================================
   VIRAROSI — PUBLIC SITE DESIGN TOKENS
   "BRAVO Clear Exchange" — light-only premium European fintech.
   Warm light-gray background, white surfaces, deep navy text,
   restrained amber-gold accent. No dark theme.
   ========================================================= */

:root {
	/* Surfaces */
	--s-bg: #F5F6F8;
	--s-bg-muted: #F0F2F5;
	--s-surface: #FFFFFF;
	--s-surface-warm: #FFFCF7;

	/* Text */
	--s-text: #0B1426;
	--s-text-muted: #596579;
	--s-text-faint: #8B95A7;

	/* Borders */
	--s-border: #E3E7ED;
	--s-border-strong: #CCD3DD;

	/* Brand accent — restrained gold, used for primary actions + crypto-style glow accents */
	--s-accent-1: #EAA719;
	--s-accent-hover: #D9960F;
	--s-accent-soft: #FFF4D8;
	--s-accent-2: #FFC94D;
	--s-accent-gradient: linear-gradient(135deg, var(--s-accent-1) 0%, var(--s-accent-2) 100%);
	--s-accent-glow: radial-gradient(60% 60% at 50% 40%, rgba(234,167,25,.35) 0%, rgba(234,167,25,0) 70%);
	--s-accent-contrast: #0B1426;

	--s-success: #168A50;
	--s-success-soft: #EAF8F0;
	--s-warning: #B86B00;
	--s-warning-soft: #FFF4E2;
	--s-danger: #C44242;
	--s-danger-soft: #FFF0F0;
	--s-info: #3169C6;
	--s-info-soft: #EEF4FF;

	/* Glassmorphism (header, floating panels) — matte/frosted rather than
	   clear-glass: higher opacity + heavier blur so content behind reads
	   as a soft blur, not a sharp double-exposure. */
	--s-glass-bg: rgba(248, 249, 251, .78);
	--s-glass-bg-strong: rgba(250, 251, 252, .92);
	--s-glass-border: rgba(255, 255, 255, .8);
	--s-glass-blur: 28px;

	/* Multi-layer page background — depth without competing with content.
	   Base canvas + soft cool wash top-left + warm amber glow near the
	   primary action + a very quiet third glow low on the page so long
	   pages never end on a flat, lifeless canvas. No repeating dot/grid
	   pattern (that lives in a separate, maskable ::before layer). */
	--s-bg-layers:
		radial-gradient(900px 500px at 78% -10%, rgba(234, 167, 25, .10), transparent 60%),
		radial-gradient(700px 500px at 4% 22%, rgba(49, 105, 198, .05), transparent 65%),
		radial-gradient(800px 600px at 92% 92%, rgba(49, 105, 198, .045), transparent 60%),
		linear-gradient(180deg, #f8f9fb 0%, #f2f4f7 100%);

	/* Typography — Plus Jakarta Sans for UI/body everywhere (nav, buttons, labels, metadata);
	   Fraunces (variable-optical-size serif) for every marketing headline on the public site.
	   This is the single biggest lever against the "SaaS template" look. */
	--s-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--s-font-display: 'Fraunces', 'Newsreader', Georgia, serif;
	--s-font-serif: 'Fraunces', 'Newsreader', Georgia, serif;
	--s-fs-body: 16px;
	--s-lh-body: 1.6;

	/* Spacing scale */
	--s-space-1: 4px;
	--s-space-2: 8px;
	--s-space-3: 12px;
	--s-space-4: 16px;
	--s-space-5: 24px;
	--s-space-6: 32px;
	--s-space-7: 48px;
	--s-space-8: 64px;
	--s-space-9: 96px;

	/* Radius */
	--s-radius-sm: 10px;
	--s-radius-md: 12px;
	--s-radius-lg: 16px;
	--s-radius-xl: 20px;
	--s-radius-pill: 999px;

	/* Shadows — used sparingly; most surfaces rely on a border only.
	   No permanent brand-colour glow around buttons/cards. */
	--s-shadow-sm: 0 1px 2px rgba(11, 20, 38, .04), 0 8px 24px rgba(11, 20, 38, .05);
	--s-shadow-md: 0 2px 4px rgba(11, 20, 38, .05), 0 16px 32px rgba(11, 20, 38, .08);
	--s-shadow-glow: 0 8px 28px rgba(234, 167, 25, .28);

	/* Layout */
	--s-container: 1280px;
	--s-header-h: 72px;

	/* Motion */
	--s-duration-fast: 150ms;
	--s-duration-base: 250ms;
	--s-duration-slow: 500ms;
	--s-easing: cubic-bezier(.2, .7, .3, 1);
}


@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}