/*=======================================================
  MIVARE MOTORS DESIGN SYSTEM
  Standalone brand tokens
========================================================*/
:root {
	/* =====================================================
	   PURPLE / BRAND SYSTEM
	===================================================== */
	--mivare-title-brand: #74387B;
	--mivare-hover-brand: #8D4696;

	--mivare-brand-dark: #5E2865;
	--mivare-brand-darker: #4D2053;
	--mivare-brand: #8D4696;
	--mivare-brand-light: #D39ADA;
	--mivare-brand-lighter: #E4BCE8;
	--mivare-brand-ultra-light: #FAF0FB;

	--mivare-brand-on-light: #74387B;
	--mivare-brand-on-dark: #B96FC1;

	--mivare-brand-secondary: #4B3150;

	--mivare-brand-rgb: 141, 70, 150;


	/* =====================================================
	   BRAND-SPECIFIC BACKGROUNDS
	===================================================== */
	--mivare-brand-surface-light: #FCF8FD;
	--mivare-brand-surface-soft: #F8F1FA;
	--mivare-brand-surface-dark: #140F15;
	--mivare-brand-surface-dark-2: #1B121D;

	--mivare-bg-brand-ultra: rgba(var(--mivare-brand-rgb), 0.03);
	--mivare-bg-brand-soft: rgba(var(--mivare-brand-rgb), 0.06);
	--mivare-bg-brand: rgba(var(--mivare-brand-rgb), 0.12);
	--mivare-bg-brand-strong: rgba(var(--mivare-brand-rgb), 0.18);
	--mivare-bg-brand-heavy: rgba(var(--mivare-brand-rgb), 0.24);


	/* =====================================================
	   BRAND BORDERS
	===================================================== */
	--mivare-border-brand-ultra: rgba(var(--mivare-brand-rgb), 0.10);
	--mivare-border-brand-light: rgba(var(--mivare-brand-rgb), 0.16);
	--mivare-border-brand: rgba(var(--mivare-brand-rgb), 0.24);
	--mivare-border-brand-medium: rgba(var(--mivare-brand-rgb), 0.38);
	--mivare-border-brand-strong: rgba(var(--mivare-brand-rgb), 0.55);
	--mivare-border-brand-heavy: rgba(var(--mivare-brand-rgb), 0.70);


	/* =====================================================
	   BUTTON TOKENS — LIGHT UI
	===================================================== */
	--mivare-btn-brand-light-bg: #5E2865;
	--mivare-btn-brand-light-hover: #4D2053;
	--mivare-btn-brand-light-text: #ffffff;
	--mivare-btn-brand-light-border: #5E2865;


	/* =====================================================
	   BUTTON TOKENS — DARK UI
	===================================================== */
	--mivare-btn-brand-dark-bg: #B96FC1;
	--mivare-btn-brand-dark-hover: #CB86D2;
	--mivare-btn-brand-dark-text: #0b0b0c;
	--mivare-btn-brand-dark-border: #B96FC1;


	/* =====================================================
	   BRAND GLASS / HIGHLIGHTS
	===================================================== */
	--mivare-glass-brand-light: rgba(var(--mivare-brand-rgb), 0.10);
	--mivare-glass-brand-medium: rgba(var(--mivare-brand-rgb), 0.16);
	--mivare-glass-brand-strong: rgba(var(--mivare-brand-rgb), 0.22);

	--mivare-highlight-brand: rgba(var(--mivare-brand-rgb), 0.32);
	--mivare-selection-brand: rgba(var(--mivare-brand-rgb), 0.18);


	/* =====================================================
	   BRAND SHADOWS / GLOW
	===================================================== */
	--mivare-shadow-brand-soft: 0 10px 24px rgba(var(--mivare-brand-rgb), 0.10);
	--mivare-shadow-brand-medium: 0 14px 30px rgba(var(--mivare-brand-rgb), 0.14);
	--mivare-shadow-brand-strong: 0 18px 42px rgba(var(--mivare-brand-rgb), 0.20);

	--mivare-glow-brand-soft: 0 0 18px rgba(var(--mivare-brand-rgb), 0.16);
	--mivare-glow-brand: 0 0 28px rgba(var(--mivare-brand-rgb), 0.22);
	--mivare-glow-brand-strong: 0 0 42px rgba(var(--mivare-brand-rgb), 0.30);


	/* =====================================================
	   TEXT COLORS
	===================================================== */
	--mivare-text-black: #111111;
	--mivare-text-dark: #262626;
	--mivare-text-body: #3f3f3f;
	--mivare-text-soft: #666666;
	--mivare-text-muted: #727272;
	--mivare-text-placeholder: #9f9f9f;
	--mivare-text-light: #f4f4f5;
	--mivare-text-white: #ffffff;


	/* =====================================================
	   CORE LIGHT BACKGROUNDS
	===================================================== */
	--mivare-bg-white: #ffffff;
	--mivare-bg-lightest: #fcfcfc;
	--mivare-bg-light: #fafafa;
	--mivare-bg-soft: #f7f7f7;


	/* =====================================================
	   CORE DARK BACKGROUNDS
	===================================================== */
	--mivare-bg-deep: #0b0b0c;
	--mivare-bg-surface: #121214;
	--mivare-bg-surface-2: #18181b;
	--mivare-bg-work: #1f1f23;
	--mivare-bg-work-2: #2a2a2e;
	--mivare-bg-work-3: #3a3a3f;
	--mivare-bg-work-4: #f4f4f5;
	--mivare-bg-work-5: #fafafa;


	/* =====================================================
	   GENERIC LIGHT BORDERS
	===================================================== */
	--mivare-border-lightest: rgba(17, 17, 17, 0.06);
	--mivare-border-light: rgba(17, 17, 17, 0.10);
	--mivare-border-soft: rgba(17, 17, 17, 0.14);
	--mivare-border-medium: rgba(17, 17, 17, 0.18);


	/* =====================================================
	   GENERIC DARK BORDERS
	===================================================== */
	--mivare-border-dark-ultra: rgba(255, 255, 255, 0.06);
	--mivare-border-dark-light: rgba(255, 255, 255, 0.10);
	--mivare-border-dark: rgba(255, 255, 255, 0.14);
	--mivare-border-dark-medium: rgba(255, 255, 255, 0.18);
	--mivare-border-dark-strong: rgba(255, 255, 255, 0.24);


	/* =====================================================
	   SHADOWS
	===================================================== */
	--mivare-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.05);
	--mivare-shadow-medium: 0 12px 28px rgba(0, 0, 0, 0.08);
	--mivare-shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.12);


	/* =====================================================
	   GLASS
	===================================================== */
	--mivare-glass-light: rgba(255, 255, 255, 0.68);
	--mivare-glass-dark: rgba(11, 11, 12, 0.68);
	--mivare-glass-border-light: rgba(255, 255, 255, 0.38);
	--mivare-glass-border-dark: rgba(255, 255, 255, 0.12);
	--mivare-glass-blur: 18px;


	/* =====================================================
	   RADIUS / TRANSITIONS
	===================================================== */
	--mivare-radius-sm: 4px;
	--mivare-radius-md: 6px;
	--mivare-radius-lg: 10px;
	--mivare-radius-xl: 16px;

	--mivare-transition-fast: all 0.22s ease;
	--mivare-transition: all 0.35s ease;


	/* =====================================================
	   FORM STATES
	===================================================== */
	--mivare-error: #FD397A;
	--mivare-error-shadow: rgba(253, 57, 122, 0.10);
	--mivare-success: #2F9E62;
	--mivare-warning: #B7791F;
	--mivare-info: #3977D9;
}