/* Bold style (Settings › Appearance, html[data-style="bold"]; Minimal = no attribute, the original look untouched).
uix-style: tinted canvas, white 16 px cards with no shadow, pills for buttons / tabs / filters / nav, black primary action, one accent
(HV teal, as a fill), Urbanist for titles and big numbers, Inter for UI text at 14 px, 12 px floor, stronger status and stage fills.
Impeccable floor: 4.5:1 text, 3:1 control borders, 44 px touch targets. Every rule is prefixed with :root[data-style="bold"] so it
outranks the page styles the pages inject later; light and dark only swap tokens. */
:root[data-style="bold"] {
--bg: #eef2f1; --surface: #ffffff; --surface-2: #f6f8f7; --line: #e2e6e5; --line-strong: #dfe4e2; --line-input: #dfe4e2; --hover: #eef1f0;
--text: #0e0f11; --text-2: #4f5661; --muted: #5f6670;
--accent: #0a6f68; --accent-bg: #d9f2ee; --accent-hover: #075a54; --on-accent: #ffffff; --seg-on: #0e0f11;
--ink: #0e0f11; --on-ink: #ffffff;
--green: #1f6b43; --green-bg: #d6f0e0; --amber: #8a5a00; --amber-bg: #ffe9bf; --red: #b42318; --red-bg: #fddcdc;
--violet: #5b3bc4; --violet-bg: #e6defc;
--st-res: #4a4f57; --st-res-bg: #e7eaed; --st-al: #765c00; --st-al-bg: #fbeba8; --st-pr: #1f6b43; --st-pr-bg: #d6f0e0;
--st-out: #0a6f68; --st-out-bg: #ccefea; --st-in: #0b5f8c; --st-in-bg: #d6ecf8;
--st-al-fill: #e8c53a; --st-pr-fill: #4fb37a; --st-out-fill: #3fb8ab; --st-in-fill: #4aa6d8; --accent-fill: #2aa198;
--font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --display: Urbanist, Inter, system-ui, sans-serif;
--r: 12px; --shadow: 0 8px 24px rgba(14, 15, 17, .10);
}
@media (prefers-color-scheme: dark) {
:root[data-style="bold"]:not([data-theme="light"]) {
--bg: #0f1012; --surface: #1a1b1f; --surface-2: #23252b; --line: #2c2f36; --line-strong: #33363e; --line-input: #33363e; --hover: #23252b;
--text: #ffffff; --text-2: #b6bcc6; --muted: #9ba2ad; --accent: #2dd4bf; --accent-bg: #0f3a35; --accent-hover: #5eead4; --on-accent: #04201d; --seg-on: #ffffff;
--ink: #ffffff; --on-ink: #0e0f11;
--green: #7fd6a4; --green-bg: #173325; --amber: #f2c063; --amber-bg: #3a2c0c; --red: #ff8a80; --red-bg: #3d1614; --violet: #b9a7ff; --violet-bg: #2a2150;
--st-res: #b4b9c2; --st-res-bg: #2a2c32; --st-al: #fde047; --st-al-bg: #3a330c; --st-pr: #7fd6a4; --st-pr-bg: #173325;
--st-out: #5eead4; --st-out-bg: #0f3a35; --st-in: #8fd3ff; --st-in-bg: #0f2f45; --shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
}
:root[data-style="bold"][data-theme="dark"] {
--bg: #0f1012; --surface: #1a1b1f; --surface-2: #23252b; --line: #2c2f36; --line-strong: #33363e; --line-input: #33363e; --hover: #23252b;
--text: #ffffff; --text-2: #b6bcc6; --muted: #9ba2ad; --accent: #2dd4bf; --accent-bg: #0f3a35; --accent-hover: #5eead4; --on-accent: #04201d; --seg-on: #ffffff;
--ink: #ffffff; --on-ink: #0e0f11;
--green: #7fd6a4; --green-bg: #173325; --amber: #f2c063; --amber-bg: #3a2c0c; --red: #ff8a80; --red-bg: #3d1614; --violet: #b9a7ff; --violet-bg: #2a2150;
--st-res: #b4b9c2; --st-res-bg: #2a2c32; --st-al: #fde047; --st-al-bg: #3a330c; --st-pr: #7fd6a4; --st-pr-bg: #173325;
--st-out: #5eead4; --st-out-bg: #0f3a35; --st-in: #8fd3ff; --st-in-bg: #0f2f45; --shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
/* type: Inter 14 px for the UI, Urbanist for titles and the big numbers */
:root[data-style="bold"] body { font: 14px/1.5 var(--font); }
:root[data-style="bold"] :is(h1, .toptitle h1, .ph h1) { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; }
:root[data-style="bold"] .ph h1, :root[data-style="bold"] .toptitle:not(.rec) h1 { font-size: 24px; }
:root[data-style="bold"] .card h2 { font-size: 16px; font-weight: 650; }
:root[data-style="bold"] :is(.kpi b, .rpk b, .jc2 .when .t, .whhero b, .clock) { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
:root[data-style="bold"] .kpi b { font-size: 28px; }
:root[data-style="bold"] :is(.kpi small, .rpk small, .jv .stat small, .whjh .stat small) { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
:root[data-style="bold"] .muted { color: var(--muted); }
/* canvas and cards: tint difference instead of borders and shadows */
:root[data-style="bold"] :is(.card, .kpi, .tile, .jc2, .whpack, .fdradar, .fdrows, .whsec, .whgrp) { border-color: transparent; border-radius: 16px; box-shadow: none; }
:root[data-style="bold"] .card { padding: 18px 20px; }
:root[data-style="bold"] .jc2:hover { border-color: transparent; box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(14, 15, 17, .06); }
:root[data-style="bold"] .rpk8 { border-radius: 16px; border-color: transparent; gap: 2px; background: var(--bg); }
/* pills: buttons, tabs, filters, nav; primary = black ink */
:root[data-style="bold"] .btn { border-radius: 999px; min-height: 36px; padding: 0 16px; font-weight: 600; border-color: var(--line); background: var(--surface); }
:root[data-style="bold"] .btn:hover { border-color: var(--line); background: var(--surface-2); }
:root[data-style="bold"] .btn.sm, :root[data-style="bold"] .jv .btn { border-radius: 999px; min-height: 32px; padding: 0 12px; font-size: 13px; }
:root[data-style="bold"] .btn.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
:root[data-style="bold"] .btn.primary:hover { background: color-mix(in srgb, var(--ink) 82%, var(--surface)); border-color: transparent; }
:root[data-style="bold"] .btn.primary.danger { background: var(--red); color: #fff; border-color: var(--red); }
:root[data-style="bold"] .btn.ic, :root[data-style="bold"] .savegrp .btn, :root[data-style="bold"] .iconbtn { border-radius: 50%; }
:root[data-style="bold"] :is(.seg, .seg2) { border-radius: 999px; padding: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-style="bold"] :is(.seg, .seg2) button { border-radius: 999px; padding: 6px 14px; color: var(--text-2); font-weight: 600; }
:root[data-style="bold"] :is(.seg, .seg2) button.on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root[data-style="bold"] .tabs { border-bottom: 0; gap: 6px; flex-wrap: wrap; }
:root[data-style="bold"] .tabs :is(a, button) { border: 0; border-radius: 999px; padding: 7px 14px; margin: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-weight: 600; }
:root[data-style="bold"] .tabs .on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
:root[data-style="bold"] .side a[data-nav] { border-radius: 999px; font-weight: 600; }
:root[data-style="bold"] .side a[data-nav].on { background: var(--accent); color: var(--on-accent); }
:root[data-style="bold"] .side a .navbadge { background: var(--ink); color: var(--on-ink); }
:root[data-style="bold"] .dtog { border-radius: 999px; }
:root[data-style="bold"] .dtog:has(input:checked), :root[data-style="bold"] button.dtog.on { background: var(--accent); color: var(--on-accent); }
:root[data-style="bold"] .dtog.tx:has(input:checked) span, :root[data-style="bold"] button.dtog.tx.on span { color: var(--on-accent); }
/* inputs: clear 3:1 edge, rounder, a little taller */
/* fields: soft fill and a hairline (uix-style); the edge turns teal when you type in it */
:root[data-style="bold"] :is(.input, .sel, .field input:where(:not([type=checkbox], [type=radio])), .field select, .field textarea, .whq) { border-radius: 12px; min-height: 38px; background: var(--surface-2); border: 1px solid var(--line); }
:root[data-style="bold"] :is(.input, .sel, .field input, .field select, .field textarea, .whq):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; background: var(--surface); }
:root[data-style="bold"] .jv .stat input { background: transparent; }
:root[data-style="bold"] .qscan .input, :root[data-style="bold"] .whcode { border-radius: 999px; }
/* status and stage pills: stronger fills, bolder words (always a word or a dot, never colour alone) */
:root[data-style="bold"] .pill { padding: 2px 10px; font-size: 12.5px; font-weight: 600; }
:root[data-style="bold"] .wp { font-size: 12.5px; padding: 3px 10px; }
/* focus: ink ring, visible on every tint */
:root[data-style="bold"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
:root[data-style="bold"] .btn { min-height: 44px; } :root[data-style="bold"] :is(.seg, .seg2) button { min-height: 40px; }
}
/* warehouse tool row: the pills keep to the phone's width */
:root[data-style="bold"] .whtools .btn { padding: 0 10px; font-size: 13px; }
@media (max-width: 640px) { :root[data-style="bold"] .whtools .btn .lbl { white-space: nowrap; } :root[data-style="bold"] .whtools { flex-wrap: wrap; } }
/* KPI tiles (dashboard, reports): plain-word label, Urbanist numeral, no capitals, no border */
:root[data-style="bold"] :is(.tile small, .tile .lab) { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-2); }
:root[data-style="bold"] .tile b { font-family: var(--display); font-weight: 700; font-size: 30px; }
/* tables inside cards: hairline rows, header in plain grey words */
:root[data-style="bold"] .tbl th { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-2); }
/* the record header and the board's filter row sit on the canvas without a ruled line */
:root[data-style="bold"] .top { border-bottom-color: transparent; background: var(--bg); }
:root[data-style="bold"] .side { border-right-color: transparent; }
:root[data-style="bold"] [tabindex="-1"]:is(:focus, :focus-visible) { outline: none; }