/* ============================================================================ atlas-retail.css — commercial skin for Atlas Retail (merchant dashboard). This is DELIBERATELY NOT the Atlas ops chrome (ink-black tactical console). Atlas Retail is a BI/retail product: light-first, airy, confident, for a shopkeeper on a counter tablet. Theme-aware — default follows the OS, an explicit toggle stamps data-theme on and wins in both directions. Palette invariants (brand law): - retail blue #5b86c9 / #7ea2d6 → vertical identity accent (everywhere) - green #15e0a1 → ONLY live dots / OK status - amber #f2a326 / #f2b33c → ONLY REQ·POS and gated / in-development Type: Space Grotesk (display), Inter (body), JetBrains Mono (all figures, tabular-nums). Fonts are vendored (no CDN) under ./fonts/. ========================================================================== */ @font-face{font-family:'Space Grotesk';src:url('./fonts/SpaceGrotesk.woff2') format('woff2');font-weight:400 700;font-display:swap} @font-face{font-family:'Inter';src:url('./fonts/Inter.woff2') format('woff2');font-weight:400 600;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono.woff2') format('woff2');font-weight:400 600;font-display:swap} /* ---- LIGHT tokens (default) ------------------------------------------------ */ :root{ --bg:#f1f5fa; --bg-2:#e9eff7; --panel:#ffffff; --panel-2:#f8fafd; --elev:#ffffff; --inset:#f3f6fb; --line:rgba(24,34,49,.09); --line2:rgba(24,34,49,.14); --line3:rgba(24,34,49,.20); --ink:#18222e; --strong:#0c1420; --soft:#3f4c5c; --muted:#5c6a7a; --dim:#8b98a7; /* retail blue accent (vertical identity) */ --ac:#5b86c9; --ac2:#7ea2d6; --ac-strong:#3a63a8; --ac-soft:rgba(91,134,201,.10); --ac-fill:rgba(91,134,201,.16); --ac-line:rgba(91,134,201,.28); /* green — live/OK only */ --ok:#15e0a1; --ok-ink:#0a8f63; --ok-soft:rgba(21,224,161,.13); --ok-line:rgba(21,224,161,.34); /* amber — REQ·POS / gated only */ --amber:#f2a326; --amber2:#f2b33c; --amber-ink:#a2650f; --amber-soft:rgba(242,163,38,.13); --amber-line:rgba(242,163,38,.36); --alarm:#e0574c; --alarm-soft:rgba(224,87,76,.10); --card-sh:0 1px 2px rgba(24,34,49,.05), 0 12px 30px rgba(58,99,168,.06); --card-sh-hi:0 2px 6px rgba(24,34,49,.07), 0 20px 46px rgba(58,99,168,.10); --heat-lo:rgba(91,134,201,.05); --heat-hi:#2a5aa0; --mono:'JetBrains Mono',ui-monospace,monospace; --head:'Space Grotesk',Inter,system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; } /* ---- DARK tokens (refined slate — NOT the tactical ink-black) -------------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0f141b; --bg-2:#0b0f15; --panel:#161d27; --panel-2:#1a222d; --elev:#1e2732; --inset:#131a23; --line:rgba(233,239,243,.08); --line2:rgba(233,239,243,.13); --line3:rgba(233,239,243,.19); --ink:#e7edf3; --strong:#f4f8fb; --soft:#c3ccd6; --muted:#a3aeba; --dim:#6d7986; --ac:#5b86c9; --ac2:#8fb0e0; --ac-strong:#a9c5ec; --ac-soft:rgba(91,134,201,.16); --ac-fill:rgba(91,134,201,.22); --ac-line:rgba(126,162,214,.34); --ok:#15e0a1; --ok-ink:#3fe9b4; --ok-soft:rgba(21,224,161,.14); --ok-line:rgba(21,224,161,.34); --amber:#f2b33c; --amber2:#f2c46b; --amber-ink:#f2b33c; --amber-soft:rgba(242,163,38,.16); --amber-line:rgba(242,179,60,.36); --alarm:#f2695e; --alarm-soft:rgba(242,105,94,.13); --card-sh:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.30); --card-sh-hi:0 2px 6px rgba(0,0,0,.36), 0 22px 50px rgba(0,0,0,.40); --heat-lo:rgba(91,134,201,.06); --heat-hi:#7ea2d6; } } :root[data-theme="dark"]{ --bg:#0f141b; --bg-2:#0b0f15; --panel:#161d27; --panel-2:#1a222d; --elev:#1e2732; --inset:#131a23; --line:rgba(233,239,243,.08); --line2:rgba(233,239,243,.13); --line3:rgba(233,239,243,.19); --ink:#e7edf3; --strong:#f4f8fb; --soft:#c3ccd6; --muted:#a3aeba; --dim:#6d7986; --ac:#5b86c9; --ac2:#8fb0e0; --ac-strong:#a9c5ec; --ac-soft:rgba(91,134,201,.16); --ac-fill:rgba(91,134,201,.22); --ac-line:rgba(126,162,214,.34); --ok:#15e0a1; --ok-ink:#3fe9b4; --ok-soft:rgba(21,224,161,.14); --ok-line:rgba(21,224,161,.34); --amber:#f2b33c; --amber2:#f2c46b; --amber-ink:#f2b33c; --amber-soft:rgba(242,163,38,.16); --amber-line:rgba(242,179,60,.36); --alarm:#f2695e; --alarm-soft:rgba(242,105,94,.13); --card-sh:0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.30); --card-sh-hi:0 2px 6px rgba(0,0,0,.36), 0 22px 50px rgba(0,0,0,.40); --heat-lo:rgba(91,134,201,.06); --heat-hi:#7ea2d6; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:radial-gradient(1100px 620px at 82% -8%, var(--ac-soft), transparent 62%),var(--bg); color:var(--ink);font-family:var(--body);min-height:100vh; font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.01em} a{color:var(--ac-strong);text-decoration:none} button{font-family:var(--body);cursor:pointer;color:inherit} input,select,textarea{font-family:var(--body)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line3);border-radius:999px} ::-webkit-scrollbar-track{background:transparent} .hidden{display:none!important} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.28}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes dotpulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ===================== BRAND SPLASH ====================================== A calm centered brand moment in Atlas Retail's OWN commercial skin (light-first, airy, retail blue) — deliberately NOT the ink-black Atlas splash. Composed by atlas-retail-splash.js (fades out via the .hide contract). The overlay bg is styled here (linked stylesheet, no injected