/* Mhomentum — colour system v1.1 (2026-09-06) Source of truth: BRAND_MANUAL.md §5. Every ratio below is measured, not guessed. Two first-class themes: Dagslys (light) and Natt (dark). Neither is "the" theme — a montør reads this in direct sun at 13:00 and inside a nettstasjon at 03:00. Four rules that are not negotiable: 1. Current #FFB020 is a FILL on light and a TEXT colour on dark. Amber text on a light background is 1.7:1. It is never body text on light. Ever. 2. Colour is never the only signal. Every status carries an icon and a word. 3. Minimum tap target is 48px. Field-primary is 64px. They wear gloves. 4. Every ratio is measured against the background the thing ACTUALLY SITS ON. v1.0 measured --mh-line-strong against white and shipped it; the page background is Papir, so every bordered control on the page was landing at 2.86:1. Fixed in v1.1. If you add a token, measure it against Papir, white, Sunk and Accent-quiet, and write all four numbers in the comment. */ :root { /* ---- Core -------------------------------------------------------------- */ --mh-current: #FFB020; /* the brand. Fill on light, text on dark. Ink on it = 9.9:1 */ --mh-copper: #A8480F; /* Current's dark twin, for when white text is required (5.8:1) */ --mh-ink: #12161C; /* text, linework, the mark, dark surfaces */ --mh-paper: #F7F6F3; /* light page background. Warm. Never #FFF as a page. */ --mh-white: #FFFFFF; /* cards and sheets, lifted off paper */ --mh-natt: #0E1116; /* dark page background */ /* ---- Neutrals, light --------------------------------------------------- */ --mh-muted: #59616B; /* secondary text — 5.8:1 on paper, 6.3:1 on white */ --mh-subtle: #767E89; /* placeholders, icons, disabled — 3.8:1. LARGE ONLY. */ --mh-line: #E4E2DC; /* DECORATIVE hairlines, table rules, dividers. 1.2:1 on Papir. It is a seam, not a boundary — never the only thing defining a control. */ --mh-line-strong: #7C8188; /* input and component outlines. Non-text contrast, measured on every light surface it can land on: Papir 3.63 · white 3.92 · Sunk 3.38 · Accent-quiet 3.57 · Feltmodus sunk 3.32. Was #8E939A in v1.0 — that was 3.09 on white but only 2.86 on Papir, so bordered controls on the page failed 3:1. Borders are still not text: 3.63 on Papir is under 4.5, so this colour never carries a word. */ /* ---- Status ------------------------------------------------------------ */ --mh-flow: #157F4B; /* flowing / done / godkjent — 4.7:1 on paper, white on it 5.0:1 */ --mh-signal: #1F63E8; /* links, sync, information — 4.9:1 on paper, white on it 5.2:1 */ --mh-hold: #8A5200; /* waiting, venter, needs attention — 5.9:1 on paper */ --mh-resist: #C42D1C; /* stopped, avvik, error — 5.2:1 on paper, white on it 5.6:1 */ /* ---- Semantic (light is the default) ----------------------------------- */ --mh-bg: var(--mh-paper); --mh-surface: var(--mh-white); --mh-surface-sunk: #EFEEE9; /* wells, table headers, code */ --mh-surface-lift: var(--mh-white); /* popovers, menus, sheets, toasts. On light there is nothing brighter than white, so elevation here is carried by --mh-shadow-lift PLUS a real edge. A phone has no hover, Feltmodus has no shadow, and nothing in this system may depend on a shadow to be understood — so anything the user has to LOCATE (menu, popover, sheet, toast) gets --mh-border-strong. --mh-border is enough for a card already sitting in a list. v1.0 defined this token only in the dark blocks, so light builds inherited nothing and fell back to transparent. */ --mh-seam: var(--mh-line); /* decorative divider — 1.2:1, and that is correct. A seam separates; it does not enclose. If a user must find the edge, use --mh-border. */ --mh-text: var(--mh-ink); --mh-text-muted: var(--mh-muted); --mh-text-subtle: var(--mh-subtle); --mh-border: var(--mh-line); --mh-border-strong: var(--mh-line-strong); --mh-accent: var(--mh-current); --mh-on-accent: var(--mh-ink); /* 9.9:1. Do NOT "fix" this to white — white on Current is 1.7:1. Need white text? Use Copper. */ --mh-accent-quiet: #FFF3DC; /* accent-tinted surface, light */ --mh-link: var(--mh-signal); --mh-success: var(--mh-flow); --mh-warning: var(--mh-hold); --mh-danger: var(--mh-resist); --mh-focus: var(--mh-signal); --mh-focus-ring: 0 0 0 3px rgba(31, 99, 232, 0.35); /* ---- Shape — a work tool, not a toy. Corners are rounded, not pill. ---- */ --mh-radius-xs: 4px; /* chips, badges, tags */ --mh-radius-sm: 8px; /* inputs, buttons */ --mh-radius-md: 12px; /* cards, list rows */ --mh-radius-lg: 16px; /* sheets, panels, modals */ --mh-radius-full: 999px; /* avatars and status dots ONLY */ /* ---- Elevation — two shadows, that is the whole set ------------------- */ --mh-shadow: 0 1px 2px rgba(18, 22, 28, 0.06), 0 2px 8px rgba(18, 22, 28, 0.06); --mh-shadow-lift: 0 4px 16px rgba(18, 22, 28, 0.12); /* ---- Space — 4pt base ------------------------------------------------- */ --mh-space-1: 4px; --mh-space-2: 8px; --mh-space-3: 12px; --mh-space-4: 16px; --mh-space-5: 20px; --mh-space-6: 24px; --mh-space-8: 32px; --mh-space-10: 40px; --mh-space-12: 48px; --mh-space-16: 64px; --mh-space-20: 80px; --mh-gutter: 20px; /* ---- Targets — gloves ------------------------------------------------- */ --mh-tap-min: 48px; /* everything tappable in the montør app */ --mh-tap-field: 64px; /* the primary action on a field screen */ --mh-tap-desk: 36px; /* mouse-only surfaces in the PM dashboard */ /* ---- Motion — the current sweep --------------------------------------- */ --mh-ease: cubic-bezier(0.2, 0, 0.15, 1); /* default, decelerating */ --mh-ease-flow: cubic-bezier(0.4, 0, 0.1, 1); /* the sweep — starts lazy, leaves fast */ --mh-dur-fast: 120ms; /* press, hover, toggle */ --mh-dur-base: 200ms; /* panels, rows, state change */ --mh-dur-flow: 420ms; /* the current sweep across a card, the mark drawing itself */ } /* ---- Natt (dark) — brand colours brighten, paper becomes night ----------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="dagslys"]) { --mh-bg: var(--mh-natt); --mh-surface: #171B22; --mh-surface-sunk: #0A0D11; --mh-surface-lift: #1F242D; --mh-seam: #2B323D; /* decorative divider — not a contrast boundary */ --mh-text: #F2F5F9; /* 17.3:1 on natt */ --mh-text-muted: #A6B0BC; /* 8.6:1 on natt */ --mh-text-subtle: #8B95A1; /* 6.2:1 on natt */ --mh-border: var(--mh-seam); --mh-border-strong: #8B95A1; /* 6.2:1 — interactive outlines */ --mh-accent: var(--mh-current); /* 10.3:1 on natt. Safe as text here. */ --mh-on-accent: var(--mh-natt); /* 10.3:1 */ --mh-accent-quiet: #2A2011; --mh-link: #7FB0FF; /* 8.6:1 */ --mh-success: #3DD68C; /* 10.1:1 */ --mh-warning: #FFC24D; /* 11.8:1 */ --mh-danger: #FF6B57; /* 6.8:1 */ --mh-focus: var(--mh-current); --mh-focus-ring: 0 0 0 3px rgba(255, 176, 32, 0.45); --mh-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --mh-shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.55); } } /* Explicit theme switches — the montør app has a manual toggle, because prefers-color-scheme does not know the montør just walked into a kum. */ :root[data-theme="natt"] { --mh-bg: var(--mh-natt); --mh-surface: #171B22; --mh-surface-sunk: #0A0D11; --mh-surface-lift: #1F242D; --mh-seam: #2B323D; --mh-text: #F2F5F9; --mh-text-muted: #A6B0BC; --mh-text-subtle: #8B95A1; --mh-border: var(--mh-seam); --mh-border-strong: #8B95A1; --mh-accent: var(--mh-current); --mh-on-accent: var(--mh-natt); --mh-accent-quiet: #2A2011; --mh-link: #7FB0FF; --mh-success: #3DD68C; --mh-warning: #FFC24D; --mh-danger: #FF6B57; --mh-focus: var(--mh-current); --mh-focus-ring: 0 0 0 3px rgba(255, 176, 32, 0.45); --mh-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --mh-shadow-lift: 0 4px 20px rgba(0, 0, 0, 0.55); } /* ---- Feltmodus — direct sunlight, gloves, one hand ---------------------- Not a third palette. It is Dagslys with the background flipped to pure white (borders only clear 3:1 against white), heavier rules, bigger targets and no subtle text at all. Montør app only. Never the PM dashboard. */ :root[data-theme="felt"] { --mh-bg: var(--mh-white); --mh-surface: var(--mh-white); --mh-surface-sunk: #EDECE8; --mh-surface-lift: var(--mh-white); /* no shadows out here. A lifted sheet in Feltmodus is defined by a 2px --mh-border-strong (Ink) frame, nothing else. */ --mh-seam: var(--mh-line-strong);/* 3.92:1 on white. In direct sun a 1.2:1 hairline does not exist, so even the decorative divider is a real line here. */ --mh-text: var(--mh-ink); --mh-text-muted: #3A4149; /* muted is darkened — 5.8:1 is not enough in sun */ --mh-text-subtle: #3A4149; /* there is no subtle text in Feltmodus */ --mh-border: var(--mh-line-strong); /* 3.92:1 on white — the reason Feltmodus flips the page to pure white */ --mh-border-strong: var(--mh-ink); --mh-accent: var(--mh-current); --mh-on-accent: var(--mh-ink); --mh-link: #0B4FCB; --mh-success: #0F6B3E; --mh-warning: #7A4800; --mh-danger: #A82616; --mh-shadow: none; /* shadows are invisible in sunlight. Use borders. */ --mh-shadow-lift: none; --mh-tap-min: 56px; --mh-tap-desk: 56px; } /* ---- Job status ramp — the pipeline, in order of flow ------------------- Used on the PM dashboard pipeline and on job chips. Always paired with a label; never a bare dot. Ratios are against --mh-bg in each theme. */ :root { --mh-status-mottatt: var(--mh-signal); /* mottatt fra Elsmart 4.9:1 */ --mh-status-planlagt: #5B49C4; /* planlagt, lag satt 6.1:1 */ --mh-status-materiell: var(--mh-copper); /* materiell bestilt 5.4:1 (Current as fill) */ --mh-status-utfores: #0A7C86; /* utfores i felt 4.6:1 */ --mh-status-dokumentert: var(--mh-flow); /* dokumentert 4.7:1 */ --mh-status-fakturert: var(--mh-muted); /* fakturert — ferdig er stille 5.8:1 */ --mh-status-stanset: var(--mh-resist); /* stanset / avvik 5.2:1 */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="dagslys"]) { --mh-status-mottatt: #7FB0FF; /* 8.6:1 */ --mh-status-planlagt: #A08CFF; /* 6.9:1 */ --mh-status-materiell: #FFB020; /* 10.3:1 */ --mh-status-utfores: #2CC6D4; /* 9.1:1 */ --mh-status-dokumentert: #3DD68C; /* 10.1:1 */ --mh-status-fakturert: #8B95A1; /* 6.2:1 */ --mh-status-stanset: #FF6B57; /* 6.8:1 */ } } :root[data-theme="natt"] { --mh-status-mottatt: #7FB0FF; --mh-status-planlagt: #A08CFF; --mh-status-materiell: #FFB020; --mh-status-utfores: #2CC6D4; --mh-status-dokumentert: #3DD68C; --mh-status-fakturert: #8B95A1; --mh-status-stanset: #FF6B57; } /* ---- Reduced motion — the sweep is decoration, not information ---------- */ @media (prefers-reduced-motion: reduce) { :root { --mh-dur-fast: 1ms; --mh-dur-base: 1ms; --mh-dur-flow: 1ms; } }