/* ============================================================
   ALTA BRAND TOKENS  —  shared design system (ui-refresh)
   Reverse-engineered from the live alta.inc stylesheet
   (altalabs.webflow.shared.c93c6be3b). Loaded site-wide BEFORE
   each page's own CSS so every surface can reference these vars.
   Aesthetic only — no layout/structure here.
   ============================================================ */

:root {
	/* --- Brand purple --- */
	--alta-purple:          #7a5af8; /* primary accent */
	--alta-purple-cta:      #6938ef; /* solid CTA button fill */
	--alta-purple-cta-hover:#5a2fe0; /* CTA hover (darker) */
	--alta-purple-bright:   #8364ff; /* dark-mode accent / hover */
	--alta-purple-soft:     #f1efff; /* light lavender surface */
	--alta-ring:            #7868da; /* focus ring (light) */
	--alta-ring-dark:       #9384f9; /* focus ring (dark) */

	/* --- Dark "app" surfaces (brand navy) --- */
	--alta-navy:        #0f0a20; /* page background */
	--alta-navy-elev:   #171026; /* raised: header / footer / cards */
	--alta-navy-card:   #020202; /* deepest insets (inputs, code) */
	--alta-navy-input:  #0a0717; /* form inputs on dark */
	--alta-border-dark: #384255; /* borders / dividers on dark */
	--alta-text-dark:       #f8f8f8; /* primary text on dark */
	--alta-text-dark-muted: #9ca3af; /* muted text on dark */

	/* --- Light surfaces --- */
	--alta-bg:         #ffffff;
	--alta-surface:    #f8f8f8;
	--alta-text:       #030303;
	--alta-text-muted: #747474;
	--alta-border:     #ebebeb;

	/* --- Semantic --- */
	--alta-danger:      #db423f;
	--alta-danger-dark: #ff6b62;
	--alta-success:     #2fbf71;

	/* --- Shape --- */
	--alta-radius:    8px;  /* 0.5rem base */
	--alta-radius-lg: 12px;
	--alta-radius-pill: 999em;
	--alta-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--alta-shadow:    0 4px 16px rgba(122, 90, 248, 0.18);
	--alta-shadow-lg: 0 8px 32px rgba(15, 10, 32, 0.45);

	/* --- Type --- */
	--alta-font-heading: 'Sora', system-ui, -apple-system, sans-serif;
	--alta-font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   UNIFIED DARK NAVY BASE
   Applied to every surface that loads this file (RMA, SFP public,
   tools, admin) so the whole app shares one brand-navy look.
   Per-surface CSS refines the details on top of this.
   ============================================================ */
html,
body.body {
	background-color: var(--alta-navy) !important;
	color: var(--alta-text-dark);
	font-family: var(--alta-font-body);
}

h1, h2, h3, h4, h5 {
	font-family: var(--alta-font-heading);
}

/* Shared Webflow top navbar (public SFP + RMA pages) -> navy + purple accent */
.uui-navbar02_component,
.uui-navbar08_container {
	background-color: var(--alta-navy) !important;
}
.uui-navbar02_component {
	border-bottom: 1px solid var(--alta-border-dark);
}
/* Webflow "Login" pill in the navbar -> brand CTA purple */
.uui-navbar08_button-wrapper .uui-button,
.uui-navbar08_menu-right .uui-button {
	background-color: var(--alta-purple-cta) !important;
	border-color: var(--alta-purple-cta) !important;
	border-radius: var(--alta-radius) !important;
}
.uui-navbar08_button-wrapper .uui-button:hover,
.uui-navbar08_menu-right .uui-button:hover {
	background-color: var(--alta-purple-cta-hover) !important;
	border-color: var(--alta-purple-cta-hover) !important;
}

/* Shared Webflow marketing footer (RMA pages) -> navy */
.footer {
	background-color: var(--alta-navy) !important;
	border-top: 1px solid var(--alta-border-dark);
}
.footer,
.footer p,
.footer a,
.footer_col,
.footer-links a,
.link_block_footer {
	color: var(--alta-text-dark-muted) !important;
}
.footer_category {
	color: var(--alta-text-dark) !important;
	font-family: var(--alta-font-heading);
}
.footer a:hover,
.footer-links a:hover,
.link_block_footer:hover {
	color: var(--alta-purple-bright) !important;
}

/* Shared narrow-screen notice modal "Got it" button (admin + public bases).
   Overrides the Webflow default blue .w-button with the brand CTA purple.
   Two-class selector beats Webflow's single-class .w-button at equal load order. */
.narrow-modal-ok.w-button,
.narrow-modal-ok.button {
	background-color: var(--alta-purple-cta);
	color: #fff;
	border-radius: var(--alta-radius);
	font-family: var(--alta-font-body);
	font-weight: 600;
	box-shadow: var(--alta-shadow-sm);
	transition: background-color 0.2s ease;
}
.narrow-modal-ok.w-button:hover,
.narrow-modal-ok.button:hover {
	background-color: var(--alta-purple-cta-hover);
}