/* * MariSight design tokens — maritime command console. * Source of truth: marisight_UI_Desing/components/tokens.js (window.MS_THEMES). * * Three themes selected via [data-theme] on : * - "dark" (Dunkel) — deep-sea palette, default after dark scheme detection * - "light" (Karte) — paper-chart inspired light tones * - "hicontrast" (Alarm) — high-contrast amber-on-black for emergency mode * * Default (no [data-theme]) falls back to "dark". * * Faction colors — keep semantics consistent across themes: * --ms-own teal/green — own assets * --ms-friend indigo — confirmed friend * --ms-unknown amber — unknown contact * --ms-hostile magenta/red — hostile/alert */ :root, [data-theme="dark"] { --ms-bg: #050a12; --ms-bg2: #0a1622; --ms-panel: #0d1b29; --ms-panel-border: #1d3850; --ms-panel-header: #122336; --ms-text: #e6eef5; --ms-text-dim: #8ba4b8; --ms-text-mute: #5a7286; --ms-grid: #173354; --ms-coast: #2b5a7f; --ms-water: #040d17; --ms-land: #0b1d2d; --ms-accent: #22d3ee; --ms-accent2: #818cf8; --ms-warn: #fbbf24; --ms-warn-strong: #f97316; --ms-alert: #f43f5e; --ms-ok: #34d399; --ms-ok-bright: #22d3ee; --ms-own: #22d3ee; --ms-unknown: #fbbf24; --ms-hostile: #f43f5e; --ms-friend: #a5b4fc; --ms-link: #f472b6; color-scheme: dark; } [data-theme="light"] { --ms-bg: #f1ece0; --ms-bg2: #e9e1cf; --ms-panel: #f7f2e6; --ms-panel-border: #c6b897; --ms-panel-header: #efe7d2; --ms-text: #1a2a33; --ms-text-dim: #55657a; --ms-text-mute: #8a95a3; --ms-grid: #c6b897; --ms-coast: #8a7a56; --ms-water: #e5dfd0; --ms-land: #d4c9a8; --ms-accent: #0f766e; --ms-accent2: #1e40af; --ms-warn: #b45309; --ms-warn-strong: #c2410c; --ms-alert: #b91c1c; --ms-ok: #166534; --ms-ok-bright: #0e7490; --ms-own: #0f766e; --ms-unknown: #b45309; --ms-hostile: #b91c1c; --ms-friend: #1e40af; --ms-link: #be185d; color-scheme: light; } [data-theme="hicontrast"] { --ms-bg: #050a0f; --ms-bg2: #0a141e; --ms-panel: #0f1e2c; --ms-panel-border: #f59e0b; --ms-panel-header: #1a2938; --ms-text: #fff7e6; --ms-text-dim: #fbbf24; --ms-text-mute: #b07c20; --ms-grid: #3a2a10; --ms-coast: #f59e0b; --ms-water: #050a0f; --ms-land: #1a1408; --ms-accent: #fde047; --ms-accent2: #fbbf24; --ms-warn: #f59e0b; --ms-warn-strong: #fb923c; --ms-alert: #ef4444; --ms-ok: #84cc16; --ms-ok-bright: #67e8f9; --ms-own: #fde047; --ms-unknown: #f59e0b; --ms-hostile: #ef4444; --ms-friend: #fbbf24; --ms-link: #ec4899; color-scheme: dark; } /* "auto" follows the OS preference via prefers-color-scheme. Default body (no media match) = dark; light variant kicks in when the OS asks for it. */ [data-theme="auto"] { --ms-bg: #050a12; --ms-bg2: #0a1622; --ms-panel: #0d1b29; --ms-panel-border: #1d3850; --ms-panel-header: #122336; --ms-text: #e6eef5; --ms-text-dim: #8ba4b8; --ms-text-mute: #5a7286; --ms-grid: #173354; --ms-coast: #2b5a7f; --ms-water: #040d17; --ms-land: #0b1d2d; --ms-accent: #22d3ee; --ms-accent2: #818cf8; --ms-warn: #fbbf24; --ms-warn-strong: #f97316; --ms-alert: #f43f5e; --ms-ok: #34d399; --ms-ok-bright: #22d3ee; --ms-own: #22d3ee; --ms-unknown: #fbbf24; --ms-hostile: #f43f5e; --ms-friend: #a5b4fc; --ms-link: #f472b6; color-scheme: light dark; } @media (prefers-color-scheme: light) { [data-theme="auto"] { --ms-bg: #f1ece0; --ms-bg2: #e9e1cf; --ms-panel: #f7f2e6; --ms-panel-border: #c6b897; --ms-panel-header: #efe7d2; --ms-text: #1a2a33; --ms-text-dim: #55657a; --ms-text-mute: #8a95a3; --ms-grid: #c6b897; --ms-coast: #8a7a56; --ms-water: #e5dfd0; --ms-land: #d4c9a8; --ms-accent: #0f766e; --ms-accent2: #1e40af; --ms-warn: #b45309; --ms-warn-strong: #c2410c; --ms-alert: #b91c1c; --ms-ok: #166534; --ms-ok-bright: #0e7490; --ms-own: #0f766e; --ms-unknown: #b45309; --ms-hostile: #b91c1c; --ms-friend: #1e40af; --ms-link: #be185d; } } /* * Track + unit classification colours — the single source of truth for the * coloured markers on the Lagebild map (maplibre-interop.js colorFor()) and * the AssetsPanel kind badges. Defined as aliases over the theme tokens so * they re-resolve per theme automatically: because :root and the * [data-theme="…"] blocks all target , var(--ms-ok) here picks up the * active theme's green without a separate palette per theme. * * Situational colour code, distinct per kind so a glance separates them: * contacts ─ ship (registered hull) neutral green (--ms-ok) * reported (self-reported) friendly indigo (--ms-friend) * unknown contact amber (--ms-unknown) * alert / hostile red (--ms-alert) * own units ─ drone (air asset) accent cyan (--ms-accent) * jetski (fast surface) indigo (--ms-accent2) * patrol boat (heavy) magenta (--ms-link) */ :root { --ms-track-ship: var(--ms-ok); --ms-track-reported: var(--ms-friend); --ms-track-unknown: var(--ms-unknown); --ms-track-alert: var(--ms-alert); --ms-unit-drone: var(--ms-accent); --ms-unit-jetski: var(--ms-accent2); --ms-unit-boat: var(--ms-link); } /* * Typography — all three font families are loaded; the per-language family * stack picks the right one. Noto Sans Arabic is the primary face when the * UI is in Arabic; Inter handles Latin scripts; JetBrains Mono handles data * (timestamps, coordinates, NMEA traffic). * * Self-hosted fonts live under /fonts/ for on-premise deployment. * For development a Google Fonts in App.razor provides the same files; * once #NEW-FONT-HOSTING-ISSUE is closed this @font-face block is the only * source of font data. */ :root { --ms-font-ui: "Noto Sans Arabic", "Inter", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif; --ms-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Brand wordmark ("درع الساحل"). Arabic is cursive: it MUST use a font with correct contextual shaping (Noto Sans Arabic) and MUST NOT carry the wide letter-spacing the old Latin "MariSight" wordmark used — tracking breaks the initial/medial/final glyph joins. This token is script-agnostic so the wordmark renders correctly regardless of the active UI language. */ --ms-font-brand: "Noto Sans Arabic", "Inter", "Helvetica Neue", ui-sans-serif, sans-serif; --ms-font-base-size: 13px; /* * Pointer cursor — vector replacement for the OS hand cursor. * * Stakeholder feedback 2026-05-05: the default Windows hand cursor * looked „verpixelt" on the operator console. Edge / Chrome pull the * cursor bitmap straight from Windows; on DPI-scaling setups * (>100 %) the OS cursor is not always upsampled cleanly and ends * up looking jagged against the high-DPI panels. * * An inline-SVG cursor is resolution-independent — the browser * rasterises it at the right pixel ratio for every redraw. Hotspot * (8, 4) sits at the fingertip so click-targeting matches the OS * cursor exactly. Falls back to the OS pointer if a browser does * not support SVG cursors (none of the supported targets — Chrome, * Edge, Firefox — actually need the fallback; Safari < 17 would). * * 24×24 viewBox keeps the cursor at the same physical size as the * Windows default. White fill + 1.2px black stroke survives both * dark and light themes. */ --ms-cursor-pointer: url("data:image/svg+xml;utf8,") 8 4, pointer; } /* RTL languages (Arabic) get Noto Sans Arabic first, then Inter for any accidental Latin embeds. * * --ms-font-mono override for Arabic: JetBrains Mono / IBM Plex Mono / * Consolas / Cascadia Code do NOT ship correct Arabic OpenType shaping * — they render Arabic glyphs in their isolated standalone forms, * which is exactly what stakeholders flagged on 2026-04-27 ("die * arabischer Buchstaben bindet er die nicht zusammen"). * * Inserting "Noto Sans Arabic" right after the Latin mono fonts lets * the browser do per-glyph fallback: Latin numerics keep their * tabular monospace look (timestamps, lat/lon, NMEA), Arabic glyphs * fall through to Noto Sans Arabic which has correct contextual * shaping (initial / medial / final / isolated forms connect). * * The [lang|="ar"] selector matches lang="ar" exactly *and* any * subtag form like lang="ar-SY" or lang="ar-SA". */ :root[lang|="ar"] { --ms-font-ui: "Noto Sans Arabic", "Inter", "Helvetica Neue", ui-sans-serif, sans-serif; --ms-font-mono: "JetBrains Mono", "IBM Plex Mono", "Noto Sans Arabic", ui-monospace, "Cascadia Code", Consolas, monospace; } html, body { margin: 0; padding: 0; height: 100%; background: var(--ms-bg); color: var(--ms-text); font-family: var(--ms-font-ui); font-size: var(--ms-font-base-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } /* Logical-property utility classes — preferred over hard-coded left/right. */ .ms-mis-1 { margin-inline-start: 4px; } .ms-mis-2 { margin-inline-start: 8px; } .ms-mie-1 { margin-inline-end: 4px; } .ms-mie-2 { margin-inline-end: 8px; } .ms-pis-1 { padding-inline-start: 4px; } .ms-pis-2 { padding-inline-start: 8px; } .ms-pie-1 { padding-inline-end: 4px; } .ms-pie-2 { padding-inline-end: 8px; }