/* * AgroWorld Scan — design-tokens (canoniek, ENIGE bron). * * Vier instelbare skins (besluit Ferhat 23-07: "maak alle 4 de thema's maar * zorg dat je die kan instellen naar smaak"), elk × licht / donker / * "Buiten/zon" (high-contrast): * * (geen data-skin / "signature") R1 · Agro World Signature — SaaS-taal: * indigo chrome/actie (besluit Ferhat 13-08, * richting MyDockly/TimoVolt/Regicargo) * body[data-skin="industrial"] R2 · Industrial Precision — rugged, vlak * body[data-skin="nordic"] R3 · Nordic Logistics — licht, kalm * body[data-skin="control"] R4 · Control Room — donkere console * * Gekozen via ui.skin (settings v2, org→device→user + lock); applyUiSettings * in js/app.js zet data-skin op . Skins overschrijven UITSLUITEND * tokens — alle componentregels (styles.css/admin.css) volgen vanzelf. * Dit bestand laadt VÓÓR styles.css/admin.css in beide pagina's. * * Regels: * - Tokennamen zijn een contract met styles.css/admin.css/app.js — nooit * hernoemen, alleen waarden per skin/modus zetten. * - De legacy-aliassen (--page-bg, --text, --success, …) MOETEN in elk blok * opnieuw gedeclareerd worden: var()-substitutie in een custom property * gebeurt op het element waar die gedeclareerd is (:root), anders blijven * aliassen de waarden van het vorige blok dragen. * - Licht-blokken van skins dragen :not(.aw-dark):not(.aw-high-contrast), * zodat ze de donkere/buiten-modus nooit overschrijven (gelijke * specificiteit zou anders op bestandsvolgorde winnen). * - --brand blijft het config-gedreven merkkanaal (applyBranding kan hem * runtime overschrijven); skins geven alleen een passende default. */ /* ═══════════════ R1 · SIGNATURE — licht (basis/default) ═══════════════ */ :root { --bg: #FAF9F7; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #F3F1EC; --line: #ECE9E3; --line-soft: #F3F1EC; --text-c: #191817; --dim: #58554F; --faint: #6F6B64; /* Merk = het échte logorood (#AD0000, uit agroworld-logo.svg) — strikt merk- en signaallaag, GEEN actiekleur. In R1 mag fout wél merkrood dragen: rood valt weer op omdat de rest van de UI het niet gebruikt. */ --brand: #AD0000; --brand-press: #8A0000; --brand-ink: #191817; /* Primaire actie: MyDockly-indigo (besluit Ferhat 13-08 — de SaaS-taal van MyDockly/TimoVolt/Regicargo als default-look; zelfde kanaal als branding.accentColor in config.js, dus een custom accent blijft winnen). */ --primary: #4F46E5; --primary-press: #4338CA; --primary-soft: #6366F1; --primary-tint: #EEF2FF; --on-primary: #FFFFFF; --accent-teal: #0B7F75; --accent-teal-tint: #F0FDFA; /* Chrome: donker indigo nav-blok (MyDockly-signatuur) — wit wordmark, en de rode merklijn (.brand-rule) blijft hét Agro-signaal erbovenop. */ --nav-bg: #1E1B4B; --nav-bg-2: #312E81; --nav-fg: #FFFFFF; --nav-fg-dim: #C7CAF0; --frozen: #1E4FA0; --chilled: #1D7A46; --warn: #9A5B07; --warn-accent: #E8A13C; --error: #AD0000; --scankey: #9A5B07; --badge-vries: #1E4FA0; --badge-vers: #1D7A46; --r: 12px; --r-sm: 9px; --r-lg: 18px; --r-pill: 999px; --btn-scale: 1; --brand-black: var(--brand-ink); --brand-black-deep: #000000; --brand-red: var(--brand); --brand-red-deep: var(--brand-press); --brand-red-tint: rgba(173, 0, 0, .08); --brand-white: #FFFFFF; --gray-50: #FAFAF8; --gray-100: #F3F1EC; --gray-200: #ECE9E3; --gray-300: #D9D5CD; --gray-400: #A6A199; --gray-500: #8B867D; --gray-600: #6E6A63; --gray-700: #4A463F; --gray-900: #191817; --success: var(--chilled); --info: #22648F; --warning: var(--warn); --danger: var(--error); --heat-low: #BBF7D0; --heat-mid: #FDE68A; --heat-high: #FCA5A5; --heat-full: #DC2626; --tint-ok: #E7F4EC; --tint-info: #E7F0F7; --tint-warn: #FBF0DC; --tint-danger: #F9E9E7; --tint-frozen: #E8EEF9; --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --nav-inactive: var(--dim); --radius: var(--r); --radius-sm: 10px; --shadow-xs: 0 1px 2px rgba(25, 24, 23, .05); --shadow-sm: 0 1px 2px rgba(25, 24, 23, .06), 0 2px 8px rgba(25, 24, 23, .05); --shadow-md: 0 6px 18px rgba(25, 24, 23, .10); --shadow-lg: 0 16px 40px rgba(25, 24, 23, .16); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-hero: 28px; /* Heup-afstand-maat: locatiecode en resterend-teller moeten vanaf de heup leesbaar zijn (mockup scanflow.html). Eén stap boven --fs-hero. */ --fs-board: 40px; /* Spacingschaal — de enige bron voor mechanische marges/paddings in styles.css/admin.css; skins erven deze :root-waarden (geen skin heeft een eigen ritme). */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; /* Flow-accenten — de vier scanmodi als kleurfamilie. Spiegel van de native InboundColor/OutboundColor/StockColor (Resources/Styles/Colors.xaml), met de voorraadsplitsing die het web al kent. Bewust GEEN rood of amber: die twee zijn exclusief voor fout en waarschuwing, en routinewerk (laden, lossen, in- en uitboeken) is geen waarschuwing. Elk paar heeft een tint voor het vlak eronder, zodat badge en legenda meetbaar blijven. */ --flow-load: #1F5C8B; --flow-load-tint: #E9F1F7; --flow-unload: #0B6E66; --flow-unload-tint: #E3F4F1; --flow-stock-in: #1A6E3F; --flow-stock-in-tint: #E7F4EC; --flow-stock-out: #5C3E9B; --flow-stock-out-tint: #EFEAF9; } /* ═══════════════ R1 · SIGNATURE — donker ═══════════════ Indigo-getinte donkere modus (13-08): zelfde SaaS-familie als licht — koele indigo-neutralen i.p.v. warm bruinzwart, actie = indigo-400 zodat het contrast op donkere vlakken haalbaar blijft (AA, on-primary donker). */ body.aw-dark { --bg: #131322; --bg2: #1B1B2F; --surface: #1B1B2F; --surface2: #26263C; --line: #2E2E48; --line-soft: #26263C; --text-c: #EBEBF5; --dim: #B3B4CC; --faint: #9394B0; --brand: #E05545; --brand-press: #AD0000; --brand-red-tint: rgba(224, 85, 69, .12); --primary: #818CF8; --primary-press: #A5B4FC; --primary-soft: #6366F1; --primary-tint: #26264A; --on-primary: #14142B; --accent-teal: #2DD4BF; --accent-teal-tint: #113B36; --nav-bg: #191932; --nav-bg-2: #26263C; --nav-fg: #EBEBF5; --nav-fg-dim: var(--dim); --chilled: #5BBF85; --warn: #E0A44C; --warn-accent: #E0A44C; --error: #E26152; --info: #6FA9CF; --frozen: #7FA3E0; --badge-vries: #7FA3E0; --badge-vers: #5BBF85; --tint-ok: #1D2C23; --tint-info: #1B2731; --tint-warn: #2E2617; --tint-danger: #331B18; --tint-frozen: #1C2536; --gray-50: #1E1E31; --gray-100: #26263C; --gray-200: #2E2E48; --gray-300: #3C3C5A; --gray-400: #565677; --gray-500: #7B7C9A; --gray-600: #A0A1BE; --gray-700: #C6C7DE; --gray-900: #EBEBF5; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); --brand-red: var(--brand); --brand-red-deep: var(--brand-press); /* Flow-accenten (zie :root). */ --flow-load: #7FB6DC; --flow-load-tint: #1B2731; --flow-unload: #4FD1C5; --flow-unload-tint: #113B36; --flow-stock-in: #63C78C; --flow-stock-in-tint: #1D2C23; --flow-stock-out: #B9A3E8; --flow-stock-out-tint: #241E36; } /* ═══════════ R1 · SIGNATURE — "Buiten/zon" (wit, maximaal contrast) ═════ Bewust wit i.p.v. zwart: in fel zonlicht leest zwart-op-wit het best en staat de backlight tóch al maximaal. R4 houdt zijn zwarte console-variant. */ body.aw-high-contrast { --bg: #FFFFFF; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #FFFFFF; --line: #000000; --line-soft: #2E2C29; --text-c: #000000; --dim: #2E2C29; --faint: #4A463F; --brand: #AD0000; --brand-press: #8A0000; --primary: #000000; --primary-press: #2E2C29; --primary-soft: #4A463F; --primary-tint: #FFFFFF; --on-primary: #FFFFFF; --nav-bg: #FFFFFF; --nav-bg-2: #FFFFFF; --nav-fg: #000000; --nav-fg-dim: #2E2C29; --chilled: #0B5A2E; --warn: #7A4500; --warn-accent: #7A4500; --error: #AD0000; --info: #003C68; --frozen: #00306E; --badge-vries: #00306E; --badge-vers: #0B5A2E; --tint-ok: #FFFFFF; --tint-info: #FFFFFF; --tint-warn: #FFFFFF; --tint-danger: #FFFFFF; --tint-frozen: #FFFFFF; --gray-50: #FFFFFF; --gray-100: #F3F1EC; --gray-200: #D9D5CD; --gray-300: #A6A199; --gray-400: #6E6A63; --gray-500: #4A463F; --gray-600: #2E2C29; --gray-700: #191817; --gray-900: #000000; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); --brand-red: var(--brand); --brand-red-deep: var(--brand-press); /* Flow-accenten (zie :root). */ --flow-load: #003C68; --flow-load-tint: #FFFFFF; --flow-unload: #00504A; --flow-unload-tint: #FFFFFF; --flow-stock-in: #0B5A2E; --flow-stock-in-tint: #FFFFFF; --flow-stock-out: #3D1F78; --flow-stock-out-tint: #FFFFFF; } /* ═══════════════ R2 · INDUSTRIAL — licht ═══════════════ */ body[data-skin="industrial"]:not(.aw-dark):not(.aw-high-contrast) { --bg: #EFF1EE; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #E2E5E0; --line: #D6D9D4; --line-soft: #E2E5E0; --text-c: #101113; --dim: #4A4E53; --faint: #60656C; --primary: #101113; --primary-press: #000000; --primary-soft: #33373C; --primary-tint: #E2E5E0; --on-primary: #F5A800; --nav-bg: #101113; --nav-bg-2: #1C1F23; --nav-fg: #FFFFFF; --nav-fg-dim: #8D939B; --frozen: #124F8C; --chilled: #1D7742; --warn: #8C5900; --warn-accent: #F5A800; --error: #B3362B; --scankey: var(--warn); --info: #1668A8; --badge-vries: #124F8C; --badge-vers: var(--chilled); --tint-ok: #DDF0E4; --tint-info: #DEEBF5; --tint-warn: #F6EBCF; --tint-danger: #F6DFDC; --tint-frozen: #DEEBF5; --gray-50: #F7F8F6; --gray-100: #EFF1EE; --gray-200: #D6D9D4; --gray-300: #BEC3BC; --gray-400: #8D939B; --gray-500: #6E747C; --gray-600: #565B61; --gray-700: #33373C; --gray-900: #101113; --r: 4px; --r-sm: 3px; --r-lg: 6px; --radius: var(--r); --radius-sm: 3px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 12px 28px rgba(16, 17, 19, .18); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --nav-inactive: var(--dim); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #1F5C8B; --flow-load-tint: #E9F1F7; --flow-unload: #0B6E66; --flow-unload-tint: #E3F4F1; --flow-stock-in: #1A6E3F; --flow-stock-in-tint: #E7F4EC; --flow-stock-out: #5C3E9B; --flow-stock-out-tint: #EFEAF9; } /* ═══════════════ R2 · INDUSTRIAL — donker ═══════════════ */ body[data-skin="industrial"].aw-dark { --bg: #131518; --bg2: #1C1F23; --surface: #1C1F23; --surface2: #272B30; --line: #2C3036; --line-soft: #272B30; --text-c: #F2F3F0; --dim: #ABB0B6; --faint: #8E9399; --brand: #E05545; --brand-press: #AD0000; --brand-red-tint: rgba(224, 85, 69, .12); --primary: #F5A800; --primary-press: #D89400; --primary-soft: #E8B84B; --primary-tint: #2D2718; --on-primary: #101113; --accent-teal: #2DD4BF; --accent-teal-tint: #113B36; --nav-bg: #0C0E10; --nav-bg-2: #1C1F23; --nav-fg: #F2F3F0; --nav-fg-dim: var(--dim); --chilled: #57C282; --warn: #E8B84B; --warn-accent: #F5A800; --error: #E2685C; --info: #5FA6DC; --frozen: #7CACE2; --badge-vries: #7CACE2; --badge-vers: #57C282; --tint-ok: #1B2B21; --tint-info: #182635; --tint-warn: #2D2718; --tint-danger: #331D1A; --tint-frozen: #182635; --gray-50: #181A1E; --gray-100: #272B30; --gray-200: #2C3036; --gray-300: #4A4F56; --gray-400: #6E747C; --gray-500: #8D939B; --gray-600: #9BA1A8; --gray-700: #C6CBD1; --gray-900: #F2F3F0; --r: 4px; --r-sm: 3px; --r-lg: 6px; --radius: var(--r); --radius-sm: 3px; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: #F5A800; --success: var(--chilled); --warning: var(--warn); --danger: var(--error); --brand-red: var(--brand); --brand-red-deep: var(--brand-press); /* Flow-accenten (zie :root). */ --flow-load: #7FB6DC; --flow-load-tint: #1B2731; --flow-unload: #4FD1C5; --flow-unload-tint: #113B36; --flow-stock-in: #63C78C; --flow-stock-in-tint: #1D2C23; --flow-stock-out: #B9A3E8; --flow-stock-out-tint: #241E36; } /* ═══════════════ R2 · INDUSTRIAL — "Buiten/zon" ═══════════════ */ body[data-skin="industrial"].aw-high-contrast { --bg: #FFFFFF; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #FFFFFF; --line: #000000; --line-soft: #33373C; --text-c: #000000; --dim: #33373C; --faint: #565B61; --primary: #000000; --primary-press: #33373C; --primary-soft: #565B61; --primary-tint: #FFFFFF; --on-primary: #FFD400; --nav-bg: #000000; --nav-bg-2: #141414; --nav-fg: #FFFFFF; --nav-fg-dim: #D6D9D4; --chilled: #0B5A2E; --warn: #6E4600; --warn-accent: #6E4600; --error: #8F1D12; --info: #003C68; --frozen: #00306E; --badge-vries: #00306E; --badge-vers: #0B5A2E; --tint-ok: #FFFFFF; --tint-info: #FFFFFF; --tint-warn: #FFFFFF; --tint-danger: #FFFFFF; --tint-frozen: #FFFFFF; --gray-50: #FFFFFF; --gray-100: #EFF1EE; --gray-200: #D6D9D4; --gray-300: #8D939B; --gray-400: #6E747C; --gray-500: #565B61; --gray-600: #33373C; --gray-700: #101113; --gray-900: #000000; --r: 4px; --r-sm: 3px; --r-lg: 6px; --radius: var(--r); --radius-sm: 3px; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #003C68; --flow-load-tint: #FFFFFF; --flow-unload: #00504A; --flow-unload-tint: #FFFFFF; --flow-stock-in: #0B5A2E; --flow-stock-in-tint: #FFFFFF; --flow-stock-out: #3D1F78; --flow-stock-out-tint: #FFFFFF; } /* ═══════════════ R3 · NORDIC — licht ═══════════════ */ body[data-skin="nordic"]:not(.aw-dark):not(.aw-high-contrast) { --bg: #F5F8F9; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #E9F2F5; --line: #E4EBEE; --line-soft: #EDF3F5; --text-c: #20303A; --dim: #475761; --faint: #616E77; --primary: #0E7490; --primary-press: #0A5B72; --primary-soft: #2596B3; --primary-tint: #E6F4F7; --on-primary: #FFFFFF; --accent-teal: #0E7490; --accent-teal-tint: #E6F4F7; --nav-bg: #FFFFFF; --nav-bg-2: #E9F2F5; --nav-fg: #20303A; --nav-fg-dim: var(--dim); --frozen: #2C5FB2; --chilled: #157C48; --warn: #9C5F07; --warn-accent: #D9A441; --error: #BE3B33; --scankey: var(--warn); --info: #2C6FB2; --badge-vries: #2C5FB2; --badge-vers: var(--chilled); --tint-ok: #E4F5EC; --tint-info: #E7F0FA; --tint-warn: #FCF3DC; --tint-danger: #FBE9E7; --tint-frozen: #E9EFFA; --gray-50: #F8FAFB; --gray-100: #F1F5F7; --gray-200: #E4EBEE; --gray-300: #CBD9DF; --gray-400: #9FB3BF; --gray-500: #7A8E9B; --gray-600: #5E7280; --gray-700: #3E5866; --gray-900: #20303A; --r: 14px; --r-sm: 10px; --r-lg: 20px; --radius: var(--r); --radius-sm: 12px; --shadow-xs: 0 1px 2px rgba(32, 48, 58, .05); --shadow-sm: 0 2px 6px rgba(32, 48, 58, .07); --shadow-md: 0 4px 14px rgba(32, 48, 58, .12); --shadow-lg: 0 16px 40px rgba(32, 48, 58, .16); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --nav-inactive: var(--dim); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #1F5C8B; --flow-load-tint: #E9F1F7; --flow-unload: #0B6E66; --flow-unload-tint: #E3F4F1; --flow-stock-in: #1A6E3F; --flow-stock-in-tint: #E7F4EC; --flow-stock-out: #5C3E9B; --flow-stock-out-tint: #EFEAF9; } /* ═══════════════ R3 · NORDIC — donker ═══════════════ */ body[data-skin="nordic"].aw-dark { --bg: #101B21; --bg2: #182631; --surface: #182631; --surface2: #213340; --line: #233642; --line-soft: #213340; --text-c: #E4EDF1; --dim: #ABBAC3; --faint: #8B9DA7; --brand: #E05545; --brand-press: #AD0000; --brand-red-tint: rgba(224, 85, 69, .12); --primary: #39A5C0; --primary-press: #4FB3CC; --primary-soft: #6BC2D6; --primary-tint: #213340; --on-primary: #0A161B; --accent-teal: #4FB3CC; --accent-teal-tint: #16333B; --nav-bg: #182631; --nav-bg-2: #213340; --nav-fg: #E4EDF1; --nav-fg-dim: var(--dim); --chilled: #4CC084; --warn: #DCAE52; --warn-accent: #DCAE52; --error: #E0685E; --info: #6BA5DC; --frozen: #7CA5E6; --badge-vries: #7CA5E6; --badge-vers: #4CC084; --tint-ok: #16302A; --tint-info: #1A2A3C; --tint-warn: #2E2A18; --tint-danger: #33201D; --tint-frozen: #1A2740; --gray-50: #15222B; --gray-100: #213340; --gray-200: #233642; --gray-300: #33495A; --gray-400: #4E6675; --gray-500: #6C8390; --gray-600: #93A7B2; --gray-700: #B9CAD3; --gray-900: #E4EDF1; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); --brand-red: var(--brand); --brand-red-deep: var(--brand-press); /* Flow-accenten (zie :root). */ --flow-load: #7FB6DC; --flow-load-tint: #1B2731; --flow-unload: #4FD1C5; --flow-unload-tint: #113B36; --flow-stock-in: #63C78C; --flow-stock-in-tint: #1D2C23; --flow-stock-out: #B9A3E8; --flow-stock-out-tint: #241E36; } /* ═══════════════ R3 · NORDIC — "Buiten/zon" ═══════════════ */ body[data-skin="nordic"].aw-high-contrast { --bg: #FFFFFF; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #FFFFFF; --line: #000000; --line-soft: #22333D; --text-c: #000000; --dim: #22333D; --faint: #3E5866; --primary: #00485E; --primary-press: #002E3C; --primary-soft: #0E7490; --primary-tint: #FFFFFF; --on-primary: #FFFFFF; --nav-bg: #FFFFFF; --nav-bg-2: #FFFFFF; --nav-fg: #000000; --nav-fg-dim: #22333D; --chilled: #0B5A2E; --warn: #6E4600; --warn-accent: #6E4600; --error: #8F1D12; --info: #003C68; --frozen: #00306E; --badge-vries: #00306E; --badge-vers: #0B5A2E; --tint-ok: #FFFFFF; --tint-info: #FFFFFF; --tint-warn: #FFFFFF; --tint-danger: #FFFFFF; --tint-frozen: #FFFFFF; --gray-50: #FFFFFF; --gray-100: #F1F5F7; --gray-200: #CBD9DF; --gray-300: #9FB3BF; --gray-400: #5E7280; --gray-500: #3E5866; --gray-600: #22333D; --gray-700: #101B21; --gray-900: #000000; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #003C68; --flow-load-tint: #FFFFFF; --flow-unload: #00504A; --flow-unload-tint: #FFFFFF; --flow-stock-in: #0B5A2E; --flow-stock-in-tint: #FFFFFF; --flow-stock-out: #3D1F78; --flow-stock-out-tint: #FFFFFF; } /* ═══════════════ R4 · CONTROL — licht ═══════════════ */ body[data-skin="control"]:not(.aw-dark):not(.aw-high-contrast) { --bg: #F1F3F6; --bg2: #FFFFFF; --surface: #FFFFFF; --surface2: #E8ECF1; --line: #DDE3EB; --line-soft: #E8ECF1; --text-c: #141B26; --dim: #475364; --faint: #606A7A; --primary: #141B26; --primary-press: #000000; --primary-soft: #414E61; --primary-tint: #E8ECF1; --on-primary: #FFB454; --nav-bg: #141B26; --nav-bg-2: #1E2836; --nav-fg: #F1F3F6; --nav-fg-dim: #828FA4; --frozen: #1D4FBF; --chilled: #147B3B; --warn: #92600A; --warn-accent: #D98F1F; --error: #B91C1C; --scankey: var(--warn); --info: #1D5FBF; --badge-vries: #1D4FBF; --badge-vers: var(--chilled); --tint-ok: #E3F3E9; --tint-info: #E5EEFB; --tint-warn: #F8EED2; --tint-danger: #FAE5E5; --tint-frozen: #E5EBFB; --gray-50: #F7F9FB; --gray-100: #E8ECF1; --gray-200: #DDE3EB; --gray-300: #B9C4D2; --gray-400: #8B98A9; --gray-500: #7E8CA1; --gray-600: #57657A; --gray-700: #414E61; --gray-900: #141B26; --r: 7px; --r-sm: 5px; --r-lg: 10px; --radius: var(--r); --radius-sm: 5px; --shadow-xs: 0 1px 2px rgba(20, 27, 38, .06); --shadow-sm: 0 1px 3px rgba(20, 27, 38, .08); --shadow-md: 0 6px 18px rgba(20, 27, 38, .12); --shadow-lg: 0 16px 40px rgba(20, 27, 38, .18); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --nav-inactive: var(--dim); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #1F5C8B; --flow-load-tint: #E9F1F7; --flow-unload: #0B6E66; --flow-unload-tint: #E3F4F1; --flow-stock-in: #1A6E3F; --flow-stock-in-tint: #E7F4EC; --flow-stock-out: #5C3E9B; --flow-stock-out-tint: #EFEAF9; } /* ═══════════════ R4 · CONTROL — donker (thuisbasis) ═══════════════ */ body[data-skin="control"].aw-dark { --bg: #0D1117; --bg2: #151C26; --surface: #151C26; --surface2: #1C2635; --line: #232E3E; --line-soft: #1C2635; --text-c: #E6EDF3; --dim: #A0ABB8; --faint: #848F9D; --brand: #E05545; --brand-press: #AD0000; --brand-red-tint: rgba(224, 85, 69, .12); --primary: #FFB454; --primary-press: #E89B33; --primary-soft: #FFC97E; --primary-tint: #2C2510; --on-primary: #231603; --accent-teal: #2DD4BF; --accent-teal-tint: #113B36; --nav-bg: #0A0E13; --nav-bg-2: #151C26; --nav-fg: #E6EDF3; --nav-fg-dim: var(--dim); --chilled: #4ADE80; --warn: #FBBF24; --warn-accent: #FFB454; --error: #F87171; --info: #60A5FA; --frozen: #7DABF8; --badge-vries: #7DABF8; --badge-vers: #4ADE80; --tint-ok: #132B1D; --tint-info: #152238; --tint-warn: #2C2510; --tint-danger: #331B1B; --tint-frozen: #152238; --gray-50: #10161F; --gray-100: #1C2635; --gray-200: #232E3E; --gray-300: #38465C; --gray-400: #5D6B7E; --gray-500: #7E8CA1; --gray-600: #8B98A9; --gray-700: #B7C2D0; --gray-900: #E6EDF3; --r: 7px; --r-sm: 5px; --r-lg: 10px; --radius: var(--r); --radius-sm: 5px; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 6px 18px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: #FFB454; --success: var(--chilled); --warning: var(--warn); --danger: var(--error); --brand-red: var(--brand); --brand-red-deep: var(--brand-press); /* Flow-accenten (zie :root). */ --flow-load: #7FB6DC; --flow-load-tint: #1B2731; --flow-unload: #4FD1C5; --flow-unload-tint: #113B36; --flow-stock-in: #63C78C; --flow-stock-in-tint: #1D2C23; --flow-stock-out: #B9A3E8; --flow-stock-out-tint: #241E36; } /* ═══════════ R4 · CONTROL — "Buiten/zon" (zwarte console) ═══════════ */ body[data-skin="control"].aw-high-contrast { --bg: #000000; --bg2: #000000; --surface: #000000; --surface2: #0A0A0A; --line: #FFFFFF; --line-soft: #D0D6DE; --text-c: #FFFFFF; --dim: #D0D6DE; --faint: #B0B8C4; --brand: #FF8A80; --brand-press: #E05545; --brand-red-tint: rgba(255, 138, 128, .14); --primary: #FFD400; --primary-press: #E8C200; --primary-soft: #FFE566; --primary-tint: #1E1B00; --on-primary: #000000; --nav-bg: #000000; --nav-bg-2: #0A0A0A; --nav-fg: #FFFFFF; --nav-fg-dim: #D0D6DE; --chilled: #7CFCB1; --warn: #FFD400; --warn-accent: #FFD400; --error: #FF8A80; --info: #9CC7FF; --frozen: #9CC7FF; --badge-vries: #9CC7FF; --badge-vers: #7CFCB1; --tint-ok: #002B10; --tint-info: #002A3A; --tint-warn: #2E2600; --tint-danger: #3A0505; --tint-frozen: #002A3A; --gray-50: #0A0A0A; --gray-100: #141414; --gray-200: #232E3E; --gray-300: #38465C; --gray-400: #8B98A9; --gray-500: #B0B8C4; --gray-600: #D0D6DE; --gray-700: #E6EDF3; --gray-900: #FFFFFF; --r: 7px; --r-sm: 5px; --r-lg: 10px; --radius: var(--r); --radius-sm: 5px; --nav-inactive: var(--dim); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --page-bg: var(--bg); --card-bg: var(--surface); --border: var(--line); --text: var(--text-c); --text-2: var(--dim); --text-3: var(--faint); --nav-active: var(--primary); --success: var(--chilled); --warning: var(--warn); --danger: var(--error); /* Flow-accenten (zie :root). */ --flow-load: #7FC8F5; --flow-load-tint: #000000; --flow-unload: #4FE8D8; --flow-unload-tint: #000000; --flow-stock-in: #6FE39A; --flow-stock-in-tint: #000000; --flow-stock-out: #C7ADFF; --flow-stock-out-tint: #000000; }