/* MitaBase Pro — a product of ETMITA · https://etmita.com Copyright © ETMITA. All rights reserved. */ /* * public/overview-tokens.css — MITA Base design tokens for the * Übersicht v3 (ported 1:1 from the MITA Base monorepo bundle; * "One base. Every route." — command-center surface, Volt as signal). * * Two tiers, verbatim from the port: * 1. PRIMITIVES (--mt-*) raw, never used in UI * 2. SEMANTIC (--surface-*, --text-*, what components read * --accent*, --status-*) * * Re-scoped for THIS panel: everything lives under the `.mt-scope` * class (and `#tab-overview`, the first host, kept as a selector so the * Übersicht suite's pins stay true). The panel is light-default with a * body.dark toggle, so the port's dark `:root` block became * `body.dark .mt-scope` and its `[data-theme="light"]` block is the * default. Hosts today: #tab-overview, #tab-dispatch, the dispatch * dialogs and the queue drawer (dispatch redesign 2026-08-22). A * port-styled overlay appended to must carry `.mt-scope` itself * — custom properties do not cross out of the subtree. * * Fonts are SELF-HOSTED (never a CDN — the panel runs inside clinic * networks; a blocked font request must not change the UI): Space * Grotesk (display) · IBM Plex Sans (UI) · IBM Plex Mono (codes, * plates, amounts). Persian keeps Yekan Bakh per standing operator * order — the RTL swap below mirrors the port's theme.css. * * The Tailwind utilities reading these vars come from * src/styles/overview-preset.cjs (additive-only fork); the shim block * at the end re-applies the port's scale overrides INSIDE this scope * only (the original preset overrode them globally, which would have * restyled every other tab). */ /* ── self-hosted faces ─────────────────────────────────────────── */ @font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ── 1 · primitives + theme-independent semantics ──────────────── */ .mt-scope, #tab-overview { /* Ink + neutral ramp (dark → light) */ --mt-ink: #100E17; --mt-n-900: #15131F; --mt-n-800: #1A1826; --mt-n-700: #1C1A28; --mt-n-600: #2C2A38; --mt-n-500: #4A4858; --mt-n-300: #8E889C; --mt-n-050: #F6F4F2; /* Volt — the single brand accent */ --mt-volt-light: #E4FF5C; --mt-volt-deep: #7CE000; --mt-volt-ink: #C2F03A; --mt-volt-grad: linear-gradient(110deg, #E4FF5C, #7CE000); /* Status — functional only, never decorative */ --mt-valid: #2BC47E; --mt-expiring: #F0A93C; --mt-expired: #F25555; --mt-info: #3E9BFF; --mt-white: #FFFFFF; /* Typography */ --font-display: "Space Grotesk"; --font-ui: "IBM Plex Sans"; --font-mono: "IBM Plex Mono"; --font-fa: var(--mb-font-fa, "Yekan Bakh"); /* Motion */ --mt-ease-out: cubic-bezier(0, 0, .2, 1); --mt-ping-dur: 2600ms; /* Status tints (same in both themes) */ --status-valid: var(--mt-valid); --status-valid-soft: rgba(43, 196, 126, .12); --status-expiring: var(--mt-expiring); --status-expiring-soft: rgba(240, 169, 60, .12); --status-expired: var(--mt-expired); --status-expired-soft: rgba(242, 85, 85, .12); --status-info: var(--mt-info); --status-info-soft: rgba(62, 155, 255, .14); /* Map / route nodes */ --node-origin: var(--mt-volt-light); --node-destination: var(--mt-volt-deep); --node-waypoint: var(--mt-n-500); /* ── 2 · SEMANTIC — LIGHT (panel default; port's data-theme=light: surfaces go paper, the accent becomes INK so Volt never sits on white as text) ── */ --surface-canvas: var(--mt-n-050); --surface-raised: #FFFFFF; --surface-card: #FFFFFF; --surface-inset: #EEEDEA; --surface-overlay: #E4E2DE; --text-primary: var(--mt-ink); --text-body: #3A3744; --text-secondary: #5C5867; --text-muted: #8E889C; --text-on-accent: var(--mt-white); --text-on-status: var(--mt-white); --border-default: rgba(16, 14, 23, .12); --border-subtle: rgba(16, 14, 23, .08); --border-strong: rgba(16, 14, 23, .20); --accent: var(--mt-ink); --accent-fill: var(--mt-volt-grad); --accent-fill-solid: var(--mt-volt-deep); --accent-soft: rgba(124, 224, 0, .14); --accent-contrast: var(--mt-ink); --shadow-sm: 0 1px 2px rgba(16, 14, 23, .06); --shadow-md: 0 4px 14px rgba(16, 14, 23, .10); --shadow-lg: 0 16px 36px rgba(16, 14, 23, .14); } /* ── 2 · SEMANTIC — DARK (the port's default command-center) ───── */ body.dark .mt-scope, body.dark #tab-overview { --surface-canvas: var(--mt-ink); --surface-raised: var(--mt-n-900); --surface-card: var(--mt-n-800); --surface-inset: var(--mt-n-700); --surface-overlay: var(--mt-n-600); --text-primary: var(--mt-white); --text-body: #B5B1C0; --text-secondary: var(--mt-n-300); --text-muted: #6E687C; --text-on-accent: var(--mt-ink); --text-on-status: var(--mt-ink); --border-default: rgba(255, 255, 255, .08); --border-subtle: rgba(255, 255, 255, .07); --border-strong: rgba(255, 255, 255, .12); --accent: var(--mt-volt-ink); --accent-fill: var(--mt-volt-grad); --accent-fill-solid: var(--mt-volt-deep); --accent-soft: rgba(194, 240, 58, .12); --accent-contrast: var(--mt-ink); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --shadow-md: 0 8px 24px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .5); } /* ── scope shims — the port preset's DEFAULT-scale overrides, re-applied inside the page only (see overview-preset.cjs) ──── */ .mt-scope, #tab-overview { background: var(--surface-canvas); color: var(--text-body); font-family: var(--font-ui), "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } #tab-overview .font-mono, .mt-scope .font-mono, .mt-scope .font-mono *, #tab-overview .font-mono * { font-family: var(--font-mono), "IBM Plex Mono", ui-monospace, monospace; } .mt-scope .rounded-md, #tab-overview .rounded-md { border-radius: 11px; } .mt-scope .rounded-lg, #tab-overview .rounded-lg { border-radius: 14px; } .mt-scope .rounded-2xl, #tab-overview .rounded-2xl { border-radius: 24px; } .mt-scope .text-lg, #tab-overview .text-lg { font-size: 1.5rem; line-height: 1.25; } .mt-scope .text-xl, #tab-overview .text-xl { font-size: 1.875rem; line-height: 1.25; } .mt-scope .shadow-glow-volt, #tab-overview .shadow-glow-volt { box-shadow: 0 0 0 5px rgba(124, 224, 0, .18); } /* Panel-scale type bump (operator, 2026-08-22: the port's compact scale read too small inside the panel — one notch up across the page; the ratios stay the port's). */ .mt-scope .text-sm, #tab-overview .text-sm { font-size: 0.9375rem; line-height: 1.45; } .mt-scope .text-xs, #tab-overview .text-xs { font-size: 0.8125rem; line-height: 1.4; } .mt-scope .text-2xs, #tab-overview .text-2xs { font-size: 0.75rem; } .mt-scope .text-4xl, #tab-overview .text-4xl { font-size: 3.25rem; line-height: 1; } /* RTL: UI + display swap to the Persian face; mono (plates, €, times) stays IBM Plex Mono and is dir="ltr"-isolated in the markup. */ html[dir="rtl"] .mt-scope, html[dir="rtl"] #tab-overview { --font-ui: var(--font-fa); --font-display: var(--font-fa); } /* Honour reduced-motion: kill the live ping */ @media (prefers-reduced-motion: reduce) { .mt-scope, #tab-overview { --mt-ping-dur: 0ms; } }