/* MicroArt CSS Architecture — Base tokens, font, resets and document-level defaults. */

/*
Global IRANSans-only loading for every public, account,
support, dashboard and Django admin page. The licensed font files are expected
at static/fonts/iransans/ after running scripts/install_iransans.py.
*/
@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Light.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Light.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Light.ttf") format("truetype");
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Regular.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Regular.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Medium.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Medium.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Medium.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Medium.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Medium.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Medium.ttf") format("truetype");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Bold.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Bold.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.ttf") format("truetype");
    font-weight:800;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Bold.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.ttf") format("truetype");
    font-weight:900;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:MicroArtIRANSans;
    src:url("../fonts/iransans/IRANSansWebFaNum-Bold.woff2") format("woff2"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.woff") format("woff"),
        url("../fonts/iransans/IRANSansWebFaNum-Bold.ttf") format("truetype");
    font-weight:950;
    font-style:normal;
    font-display:swap;
}

:root{
    --ma-font:MicroArtIRANSans;
    --shadow:0 18px 45px rgba(15,23,42,.10);
    --micro-blue:#1f38e5;
    --micro-blue-2:#283de9;
    --micro-cyan:#14b8d4;
    --micro-ink:#0f172a;
    --micro-muted:#64748b;
    --micro-soft:#f4f8ff;
    --micro-border:#e2e8f0;
    --micro-shadow:0 26px 70px rgba(15,23,42,.10);
    --ma-blue:#0b5cff;
    --ma-blue-2:#0747d4;
    --ma-cyan:#12c8f4;
    --ma-navy:#061b3b;
    --ma-text:#0f2545;
    --ma-muted:#6b7a90;
    --ma-border:#e4ebf5;
    --ma-bg:#f7faff;
    --ma-shadow:0 22px 70px rgba(28,64,132,.10);
    --ma-radius:24px;
    --ma-home-blue:#0b5cff;
    --ma-home-blue-2:#0747d4;
    --ma-home-cyan:#10c4ed;
    --ma-home-ink:#0b1b35;
    --ma-home-muted:#64748b;
    --ma-home-line:#dfe8f5;
    --ma-home-soft:#f4f8ff;
    --ma-home-card:#ffffff;
    --ma-home-shadow:0 22px 70px rgba(21,55,112,.10);
    --ma-home-shadow-strong:0 36px 110px rgba(11,92,255,.20);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;font-family:var(--ma-font)!important}

/* Global IRANSans guard: this stays intentionally strong because older pages,
   form widgets, dashboard cards and admin templates may define font shorthands. */
:where(html,body,body *,button,input,select,textarea,optgroup,option){
    font-family:var(--ma-font)!important;
}
:where(body *::before,body *::after,input::placeholder,textarea::placeholder){
    font-family:var(--ma-font)!important;
}

body,
button,
input,
select,
textarea,
optgroup,
option{
    font-family:var(--ma-font)!important;
}

body{
    margin:0;
    background:linear-gradient(180deg,#f8fbff 0,#f4f7fb 460px,#f7f9fc 100%);
    color:#172033;
    line-height:1.8;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{text-decoration:none;color:inherit}

img{max-width:100%;display:block}

button{cursor:pointer}

/* Compact density tokens — Stage 17 keeps the UI readable while showing more content per view. */
:root{
    --ma-density-font:14.5px;
    --ma-density-font-mobile:13.5px;
    --ma-density-line:1.65;
    --ma-density-gap-xs:6px;
    --ma-density-gap-sm:9px;
    --ma-density-gap-md:12px;
    --ma-density-gap-lg:16px;
    --ma-density-card-pad:16px;
    --ma-density-card-pad-sm:12px;
    --ma-density-radius:18px;
    --ma-density-radius-sm:14px;
    --ma-density-shadow:0 12px 34px rgba(28,64,132,.07);
}

body.ma-density-compact{
    font-size:var(--ma-density-font);
    line-height:var(--ma-density-line);
}

body.ma-density-compact p,
body.ma-density-compact li,
body.ma-density-compact small,
body.ma-density-compact span,
body.ma-density-compact label,
body.ma-density-compact input,
body.ma-density-compact select,
body.ma-density-compact textarea,
body.ma-density-compact button{
    line-height:var(--ma-density-line);
}

body.ma-density-compact h1,
body.ma-density-compact h2,
body.ma-density-compact h3,
body.ma-density-compact h4{
    letter-spacing:-.015em;
}

/* Stage 52 — Public Design System Baseline
   Shared visual tokens for the page-by-page design polish series. */
:root{
    --ma-stage52-surface:#ffffff;
    --ma-stage52-surface-soft:#f8fbff;
    --ma-stage52-surface-blue:#eef6ff;
    --ma-stage52-ink:#0b1b35;
    --ma-stage52-text:#18375e;
    --ma-stage52-muted:#60748e;
    --ma-stage52-line:#dfe8f5;
    --ma-stage52-line-strong:#c8d7eb;
    --ma-stage52-primary:#0b5cff;
    --ma-stage52-primary-strong:#0648d6;
    --ma-stage52-cyan:#10c4ed;
    --ma-stage52-success:#16a34a;
    --ma-stage52-warning:#f59e0b;
    --ma-stage52-danger:#dc2626;
    --ma-stage52-radius-xs:10px;
    --ma-stage52-radius-sm:14px;
    --ma-stage52-radius-md:18px;
    --ma-stage52-radius-lg:24px;
    --ma-stage52-radius-xl:30px;
    --ma-stage52-shadow-xs:0 8px 24px rgba(11,27,53,.055);
    --ma-stage52-shadow-sm:0 16px 44px rgba(28,64,132,.075);
    --ma-stage52-shadow-md:0 24px 70px rgba(28,64,132,.11);
    --ma-stage52-focus:0 0 0 4px rgba(11,92,255,.13);
    --ma-stage52-control-height:42px;
    --ma-stage52-section-gap:28px;
    --ma-stage52-card-pad:18px;
}

::selection{
    background:rgba(11,92,255,.18);
    color:var(--ma-stage52-ink);
}

:where(a,button,input,select,textarea,summary,[role="button"]):focus-visible{
    outline:0;
    box-shadow:var(--ma-stage52-focus);
}

:where(input,select,textarea)::placeholder{
    color:#95a3b8;
    opacity:1;
}

:where(code,kbd){
    border-radius:8px;
    background:#eef4ff;
    color:#0b5cff;
    padding:.08em .38em;
}

hr{
    border:0;
    border-top:1px solid var(--ma-stage52-line);
    margin:20px 0;
}

body.ma-density-compact{
    background:
        radial-gradient(circle at 82% 0%,rgba(16,196,237,.11),transparent 28rem),
        radial-gradient(circle at 10% 8%,rgba(11,92,255,.09),transparent 22rem),
        linear-gradient(180deg,#f8fbff 0,#f2f7ff 360px,#f7faff 100%);
}

/* Stage 53 — Homepage Premium Redesign Polish
   Homepage-specific visual tokens layered on the Stage 52 public baseline. */
:root{
    --ma-stage53-hero-glow:0 34px 105px rgba(11,92,255,.22);
    --ma-stage53-card-hover:0 24px 72px rgba(11,92,255,.14);
    --ma-stage53-home-gap:24px;
    --ma-stage53-media-bg:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
    --ma-stage53-accent:#7c3aed;
}

/* Stage 54 — Store Listing & Category UX Polish
   Store-listing tokens layered on the existing public design baseline. */
:root{
    --ma-stage54-store-shell:#ffffff;
    --ma-stage54-store-soft:#f6faff;
    --ma-stage54-store-line:#dce8f7;
    --ma-stage54-store-primary:#0b5cff;
    --ma-stage54-store-cyan:#10c4ed;
    --ma-stage54-store-success:#16a34a;
    --ma-stage54-store-warning:#f59e0b;
    --ma-stage54-store-danger:#ef4444;
    --ma-stage54-store-radius:26px;
    --ma-stage54-store-shadow:0 22px 68px rgba(15,45,90,.09);
    --ma-stage54-store-shadow-hover:0 28px 82px rgba(11,92,255,.15);
}


/* Stage 55 — Product Detail & Commerce Flow Polish
   Commerce journey tokens for product detail, cart, checkout and payment pages. */
:root{
    --ma-stage55-commerce-primary:#0b5cff;
    --ma-stage55-commerce-cyan:#10c4ed;
    --ma-stage55-commerce-green:#16a34a;
    --ma-stage55-commerce-amber:#f59e0b;
    --ma-stage55-commerce-line:#dce8f7;
    --ma-stage55-commerce-soft:#f6faff;
    --ma-stage55-commerce-radius:28px;
    --ma-stage55-commerce-shadow:0 24px 74px rgba(15,45,90,.10);
    --ma-stage55-commerce-shadow-hover:0 30px 90px rgba(11,92,255,.16);
}

/* Stage 56 — Academy Public Pages Polish
   Academy-specific visual tokens for course list/detail, learning paths, lessons, quizzes, projects and certificates. */
:root{
    --ma-stage56-academy-primary:#0b5cff;
    --ma-stage56-academy-cyan:#10c4ed;
    --ma-stage56-academy-purple:#7c3aed;
    --ma-stage56-academy-green:#16a34a;
    --ma-stage56-academy-amber:#f59e0b;
    --ma-stage56-academy-line:#dce8f7;
    --ma-stage56-academy-soft:#f5f9ff;
    --ma-stage56-academy-radius:28px;
    --ma-stage56-academy-shadow:0 24px 74px rgba(15,45,90,.10);
    --ma-stage56-academy-shadow-hover:0 30px 90px rgba(11,92,255,.16);
}


/* Stage 57 — Workshop Public Pages Polish
   Workshop-specific visual tokens for services, request intake, customer tracking and service detail pages. */
:root{
    --ma-stage57-workshop-primary:#0b5cff;
    --ma-stage57-workshop-cyan:#10c4ed;
    --ma-stage57-workshop-navy:#061b3b;
    --ma-stage57-workshop-green:#16a34a;
    --ma-stage57-workshop-amber:#f59e0b;
    --ma-stage57-workshop-purple:#7c3aed;
    --ma-stage57-workshop-line:#dce8f7;
    --ma-stage57-workshop-soft:#f6faff;
    --ma-stage57-workshop-radius:28px;
    --ma-stage57-workshop-shadow:0 24px 76px rgba(15,45,90,.10);
    --ma-stage57-workshop-shadow-hover:0 30px 92px rgba(11,92,255,.16);
}

/* Stage 58 — Auth, Account & Customer Dashboard Polish
   Customer-account visual tokens for auth, profile, addresses, dashboard, orders and notifications. */
:root{
    --ma-stage58-account-primary:#0b5cff;
    --ma-stage58-account-cyan:#10c4ed;
    --ma-stage58-account-navy:#071d3d;
    --ma-stage58-account-green:#16a34a;
    --ma-stage58-account-amber:#f59e0b;
    --ma-stage58-account-danger:#ef4444;
    --ma-stage58-account-line:#dce8f7;
    --ma-stage58-account-soft:#f6faff;
    --ma-stage58-account-radius:28px;
    --ma-stage58-account-shadow:0 24px 76px rgba(15,45,90,.10);
    --ma-stage58-account-shadow-hover:0 30px 92px rgba(11,92,255,.16);
}

/* Stage 59 — Notifications, Support & Messaging UX Polish
   Messaging-specific tokens for smart notification inbox, support tickets and staff queues. */
:root{
    --ma-stage59-messaging-primary:#0b5cff;
    --ma-stage59-messaging-cyan:#10c4ed;
    --ma-stage59-messaging-navy:#071d3d;
    --ma-stage59-messaging-green:#16a34a;
    --ma-stage59-messaging-amber:#f59e0b;
    --ma-stage59-messaging-danger:#ef4444;
    --ma-stage59-messaging-line:#dce8f7;
    --ma-stage59-messaging-soft:#f6faff;
    --ma-stage59-messaging-radius:28px;
    --ma-stage59-messaging-shadow:0 24px 76px rgba(15,45,90,.10);
    --ma-stage59-messaging-shadow-hover:0 30px 92px rgba(11,92,255,.16);
}

/* Stage 60 — Customer Dashboard + Ajax Cart Refinement tokens. */
:root{
    --ma-stage60-blue:#0b5cff;
    --ma-stage60-cyan:#10c4ed;
    --ma-stage60-green:#16a34a;
    --ma-stage60-amber:#f59e0b;
    --ma-stage60-violet:#7c3aed;
    --ma-stage60-soft:#f6faff;
    --ma-stage60-line:#dbe9fb;
    --ma-stage60-shadow:0 20px 64px rgba(20,64,130,.09);
    --ma-stage60-shadow-hover:0 26px 78px rgba(11,92,255,.14);
}



/* Stage 61 — Blog, Content & Informational Pages Polish tokens. */
:root{
    --ma-stage61-content-primary:#0b5cff;
    --ma-stage61-content-cyan:#10c4ed;
    --ma-stage61-content-navy:#071d3d;
    --ma-stage61-content-green:#16a34a;
    --ma-stage61-content-amber:#f59e0b;
    --ma-stage61-content-line:#dce8f7;
    --ma-stage61-content-soft:#f6faff;
    --ma-stage61-content-radius:28px;
    --ma-stage61-content-shadow:0 24px 76px rgba(15,45,90,.10);
    --ma-stage61-content-shadow-hover:0 30px 92px rgba(11,92,255,.16);
}

/* Stage 62 — Staff Dashboard Shell Visual Polish tokens. */
:root{
    --ma-stage62-admin-primary:#0b5cff;
    --ma-stage62-admin-cyan:#10c4ed;
    --ma-stage62-admin-navy:#071d3d;
    --ma-stage62-admin-green:#16a34a;
    --ma-stage62-admin-amber:#f59e0b;
    --ma-stage62-admin-danger:#ef4444;
    --ma-stage62-admin-soft:#f5f9ff;
    --ma-stage62-admin-line:#dce8f7;
    --ma-stage62-admin-radius:24px;
    --ma-stage62-admin-shadow:0 22px 70px rgba(15,45,90,.10);
    --ma-stage62-admin-shadow-hover:0 28px 86px rgba(11,92,255,.15);
}

/* Stage 63 — PCB Gerber Quote Builder tokens */
:root{
    --ma-stage63-pcb-primary:#0b5cff;
    --ma-stage63-pcb-cyan:#10c4ed;
    --ma-stage63-pcb-ink:#071d3d;
    --ma-stage63-pcb-soft:#eef7ff;
    --ma-stage63-pcb-border:#cfe5ff;
    --ma-stage63-pcb-shadow:0 24px 80px rgba(11,92,255,.12);
    --ma-stage63-pcb-shadow-hover:0 30px 90px rgba(16,196,237,.18);
}

/* Stage 64 — PCB Quote Builder UX Deep Polish tokens */
:root{
    --ma-stage64-pcb-primary:#0b5cff;
    --ma-stage64-pcb-cyan:#10c4ed;
    --ma-stage64-pcb-navy:#071d3d;
    --ma-stage64-pcb-green:#16a34a;
    --ma-stage64-pcb-amber:#f59e0b;
    --ma-stage64-pcb-danger:#ef4444;
    --ma-stage64-pcb-soft:#f4f9ff;
    --ma-stage64-pcb-line:#d9e8fb;
    --ma-stage64-pcb-radius:26px;
    --ma-stage64-pcb-shadow:0 24px 82px rgba(11,92,255,.13);
    --ma-stage64-pcb-shadow-hover:0 32px 96px rgba(16,196,237,.18);
}

/* Stage 65 — PCB Quote Builder Typography & Control Scale Fix tokens */
:root{
    --ma-stage65-pcb-title:clamp(30px,3.1vw,48px);
    --ma-stage65-pcb-section-title:20px;
    --ma-stage65-pcb-body:13.5px;
    --ma-stage65-pcb-small:12px;
    --ma-stage65-pcb-chip:32px;
    --ma-stage65-pcb-button:46px;
    --ma-stage65-pcb-card-min:122px;
    --ma-stage65-pcb-control-radius:20px;
    --ma-stage65-pcb-focus:0 0 0 4px rgba(11,92,255,.12);
}