/* ========================================================================= REGIONAL AUTOSELECTIONS LTD — ADMIN BASE Loaded FIRST on every page. The one place design tokens are defined; every other stylesheet only reads them. ------------------------------------------------------------------------- 1 Tokens 2 Reset 3 Base elements 4 Focus, selection, scrollbars 5 Shared keyframes 6 Utilities 7 Reduced motion ========================================================================= */ /* ---------- 1. TOKENS ---------- */ :root{ color-scheme:light; /* ink */ --ink:#0f2a45; --ink-2:#0a1f35; --ink-3:#16344f; --muted:#566d81; --faint:#8399aa; /* brand accent */ --gold:#f7941d; --gold-2:#ffab34; --gold-3:#e0820f; --gold-ink:#1b1205; --gold-text:#9a5300; --gold-soft:#f7941d1f; --gold-line:#f7941d5c; /* status tones — every chip, stripe and pill reads from these */ --sky:#0369a1; --sky-soft:#0369a114; --green:#0f8a43; --green-soft:#0f8a4317; --green-2:#0c6e35; --red:#e11d48; --red-soft:#e11d4814; --red-text:#be123c; --amber:#b86a06; --amber-soft:#c2740a17; --purple:#7c3aed; --purple-soft:#7c3aed17; --blue:#2563eb; --blue-soft:#2563eb14; --grey:#64748b; --grey-soft:#64748b17; --wa:#1fa463; /* surfaces */ --paper:#eaf1f7; --card:#ffffff; --glass:#ffffffb3; --glass-2:#ffffffdb; --tint:#f4f8fb; --tint-2:#edf2f6; --deep:#071d30; --line:#0f2a451a; --line-2:#0f2a450f; --line-3:#0f2a4533; /* elevation */ --sh-xs:0 1px 2px #0f2a450f; --sh-sm:0 3px 10px #0f2a4514; --sh:0 8px 24px #0f2a451c; --sh-lg:0 18px 44px #0f2a452b; --ring:0 0 0 3px #f7941d33; /* radius */ --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --pill:999px; /* metrics */ --head-h:56px; --side-w:232px; --gutter:16px; --tap:40px; --field-h:42px; --btn-h:38px; --blur:14px; --ease:cubic-bezier(.2,.8,.25,1); /* type */ --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --fs-micro:10px; /* uppercase labels, kickers */ --fs-xs:11px; --fs-sm:12px; --fs:13px; --fs-md:14px; /* select arrow */ --chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.8 6 6.4l5-4.6' fill='none' stroke='%23566d81' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* legacy aliases still read by older markup */ --radius:var(--r); --shadow-sm:var(--sh-sm); --shadow:var(--sh); --shadow-lg:var(--sh-lg); --line-soft:var(--line-2); --accent:var(--gold); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth} img,video,svg,canvas,iframe{display:block;max-width:100%} img{height:auto} table{border-collapse:collapse} ul,ol{list-style:none} /* ---------- 3. BASE ELEMENTS ---------- */ body{ min-height:100dvh; font-family:var(--font); font-size:var(--fs); line-height:1.5; color:var(--ink); background: radial-gradient(780px 440px at 2% -10%,#f7941d22,transparent 62%), radial-gradient(720px 420px at 100% -6%,#2563eb17,transparent 58%), radial-gradient(900px 600px at 62% 112%,#0f8a4310,transparent 60%), var(--paper); background-attachment:fixed; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} h1,h2,h3,h4,h5{font-weight:700;line-height:1.2;letter-spacing:-.02em} b,strong{font-weight:700} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent} button:disabled{cursor:not-allowed} /* 16px on every field at every breakpoint — this is what stops iOS Safari zooming the page when a field is focused. Never override. */ input,select,textarea{font-family:inherit;font-size:16px;font-weight:500;color:inherit} input::placeholder,textarea::placeholder{color:var(--faint);font-weight:400;opacity:1} input[type="number"]{-moz-appearance:textfield;appearance:textfield} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type="checkbox"],input[type="radio"]{width:16px;height:16px;flex-shrink:0;accent-color:var(--gold);cursor:pointer} [hidden]{display:none!important} /* ---------- 4. FOCUS, SELECTION, SCROLLBARS ---------- */ :focus{outline:none} :focus-visible{outline:2px solid var(--gold);outline-offset:2px} ::selection{background:var(--gold);color:var(--gold-ink)} *{scrollbar-width:thin;scrollbar-color:var(--line-3) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:var(--pill);border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-track{background:transparent} /* ---------- 5. SHARED KEYFRAMES ---------- */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} @keyframes dropIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{50%{opacity:.3}} /* ---------- 6. UTILITIES ---------- */ .hide:not(#loader),.hidden{display:none!important} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .truncate{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .muted{color:var(--muted)} .strong{font-weight:700} .nowrap{white-space:nowrap} .mono{font-family:var(--mono)} /* Font Awesome icons must never be squeezed by a flex parent */ .fa-solid,.fa-regular,.fa-brands{flex-shrink:0} /* ---------- 7. REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } }