/* ============================================================
MiCms — Industrial Theme
Mobile-first storefront for industrial parts.
Palette: white surfaces, Letronix green accents (#57a695).
(The --red* token names are kept for stability; their values are green.)
============================================================ */
/* Vazirmatn — self-hosted Persian/Latin font (best free Farsi typeface) */
@font-face { font-family: 'Vazirmatn'; src: url('/static/themes/industrial/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/static/themes/industrial/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/static/themes/industrial/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/static/themes/industrial/fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
:root {
--red: #57a695;
--red-dark: #468678;
--red-light: #e9f5f1;
--red-border: #bfe0d8;
--ink: #1a1a1a;
--ink-soft: #444;
--muted: #777;
--line: #e6e6e6;
--line-soft: #f0f0f0;
--line-strong:#d8d8d8;
--bg: #f5f5f5;
--white: #ffffff;
/* Secondary surface: image wells, table heads, zebra stripes, spec group rows. */
--surface-2: #fafafa;
--surface-3: #f3f4f6;
--footer-bg: #1a1a1a;
--footer-ink: #cfcfcf;
--footer-head:#ffffff;
--footer-base:#888888;
--footer-line:#333333;
--ok: #1a8a3a;
--ok-bg: #dcfce7;
--ok-ink: #166534;
--warn: #c47f00;
--warn-bg: #fff3df;
--radius: 8px;
--radius-sm: 5px;
--shadow: 0 1px 3px rgba(0,0,0,.08);
--shadow-md: 0 4px 16px rgba(0,0,0,.10);
/* Content width: 70vw on wide screens (≈15% blank each side) — exactly 15%
gutters on normal monitors, capped at 1600px so ultra-wide screens don't
stretch text/grids. Never narrower than 1200px. On phones/tablets
width:100% wins, so they stay full-screen with only small side padding. */
--maxw: clamp(1200px, 70vw, 1600px);
--tabbar-h: 56px;
}
/* ── Dark mode ──────────────────────────────────────────────────────────────
Same variables, dark values — no component CSS is duplicated. `data-theme`
is written by the no-flash script in layout.html ; when the attribute
is absent we follow the OS via prefers-color-scheme. The green accent is kept
identical in both modes; only surfaces and text move.
─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
--red-light: #16302a;
--red-border: #2c4f47;
--ink: #f2f2f2;
--ink-soft: #cfcfcf;
--muted: #9a9a9a;
--line: #2c3238;
--line-soft: #232a30;
--line-strong:#3a424a;
--bg: #14171a;
--white: #1e2226;
--surface-2: #191d21;
--surface-3: #232a30;
--footer-bg: #0f1214;
--footer-ink: #b9c0c6;
--footer-head:#ffffff;
--footer-base:#7d858c;
--footer-line:#2c3238;
--ok: #3fbe63;
--ok-bg: #16351f;
--ok-ink: #7ee2a0;
--warn: #e0a53a;
--warn-bg: #3a2c14;
--shadow: 0 1px 3px rgba(0,0,0,.6);
--shadow-md: 0 4px 16px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--red-light: #16302a;
--red-border: #2c4f47;
--ink: #f2f2f2;
--ink-soft: #cfcfcf;
--muted: #9a9a9a;
--line: #2c3238;
--line-soft: #232a30;
--line-strong:#3a424a;
--bg: #14171a;
--white: #1e2226;
--surface-2: #191d21;
--surface-3: #232a30;
--footer-bg: #0f1214;
--footer-ink: #b9c0c6;
--footer-head:#ffffff;
--footer-base:#7d858c;
--footer-line:#2c3238;
--ok: #3fbe63;
--ok-bg: #16351f;
--ok-ink: #7ee2a0;
--warn: #e0a53a;
--warn-bg: #3a2c14;
--shadow: 0 1px 3px rgba(0,0,0,.6);
--shadow-md: 0 4px 16px rgba(0,0,0,.55);
}
}
/* Let form controls, scrollbars and the like pick the right built-in palette. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Iranian Sans", Arial, sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: clip; /* guard full-bleed 100vw children from adding horizontal scroll */
}
img { display: block; max-width: 100%; }
a { color: var(--red); text-decoration: none; }
h1,h2,h3,h4 { line-height: 1.25; }
/* One font everywhere. Native form controls do NOT inherit font-family by
default, so any /