/* ========================================================================== HBS · Home Builder Software — design system Based on Leo's approved "BuildSphere minimal" mockup. Rules (do not break): - Only three surfaces: orange (navigation), white (data), light grey (heads). - No shadows, no border radius, no gradients. - One font family (Inter), three weights. Tabular numerals everywhere. - Every visual pattern lives HERE or in a Blade component under resources/views/components/hbs — never inline in a page view. ========================================================================== */ /* Colour tokens. Every value carries its measured contrast ratio against the surface it is used on, so a later change cannot quietly drop below the line. Text needs 4.5:1 (WCAG 1.4.3), controls and meaningful graphics 3:1 (1.4.11). The palette is unchanged in character — the orange stays the brand — only the values that could not be read were corrected. */ :root{ --orange:#FFA500; /* fill only: 1.97:1, never carries meaning alone */ --orange-edge:#B87400; /* boundary of every orange fill · 3.8:1 on white */ --orange-deep:#5A3700; /* text/markers on orange · 5.4:1 · 10.6:1 on white */ --link:#945A00; /* links on white · 5.6:1 */ --ink:#1A1714; /* body text · 17.9:1 */ --ink-2:#6B655D; /* secondary text · 5.8:1 */ --ink-3:#7A736A; /* tertiary text · 4.7:1 (was #918B82 · 3.4:1) */ --bg:#FFFFFF; --head:#F2F1EE; /* table heads, toolbars */ --zebra:#FCFCFB; --grid:#DFDCD6; /* decorative rules inside a table · 1.4:1 */ --grid-strong:#B8B3AA; /* sum lines and container edges */ --control-line:#767068; /* border of every control · 4.9:1 (1.4.11 needs 3) */ --sel:#FFF3DC; /* selected row */ /* These four were referenced 28 times and never defined, so the browser dropped every declaration that used them: cards had no border at all and disabled fields were indistinguishable from editable ones. They are aliases of the tokens they were always meant to be. */ --line:var(--grid-strong); --line-soft:var(--grid); --paper:var(--zebra); --muted:var(--ink-2); /* Semantic colours. Orange is the brand and the navigation; it is not a meaning. Everything that carries one — a state, a phase, a kind of thing — takes a colour from here, so "orange" stops being the answer to every question and a screen can be read by its colours instead of its labels. Each family has three values: --x ink on white, >= 4.5:1, so it can carry a label (1.4.3) --x-edge border of a filled surface, >= 3:1 (1.4.11) --x-tint fill light enough that --ink still reads on it at >= 7:1 */ --red:#A32A1E; --red-edge:#C4483A; --red-tint:#FBEAE8; --amber:#8A5A00; --amber-edge:#B58020; --amber-tint:#FDF1DC; --green:#2E6B3E; --green-edge:#4C8A5C; --green-tint:#E8F3EA; --blue:#2A5580; --blue-edge:#4A7BAE; --blue-tint:#E7EFF7; --violet:#5B3E8C; --violet-edge:#7B5EB0; --violet-tint:#EFEAF8; --teal:#1F6362; --teal-edge:#3E8887; --teal-tint:#E3F1F1; /* Phase / stage palette. Eight hues that stay apart from each other and from the orange, for anything the user colours themselves: template phases, Gantt bars, calendar entries, legends. Ordered so the first four — the ones most schedules ever use — are the most distinguishable, also under the common forms of colour blindness. */ --stage-1:#2A5580; /* blue */ --stage-2:#8A5A00; /* amber */ --stage-3:#2E6B3E; /* green */ --stage-4:#A32A1E; /* red */ --stage-5:#5B3E8C; /* violet */ --stage-6:#1F6362; /* teal */ --stage-7:#8C4A6B; /* plum */ --stage-8:#4A5568; /* slate */ --gantt-label:220px; /* width of the Gantt's sticky label column */ --gantt-row:44px; /* two lines: the activity, and what it says about it */ --row:32px; /* slightly airier than the mockup (30px) */ --pad:16px; /* horizontal rhythm */ --font:Inter,-apple-system,'Segoe UI',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} /* The browser hides [hidden] with a user-agent rule, and any author rule that sets a display beats it. So an element with both a hidden attribute and a class that says display:flex is simply always on screen — which is how the drag-and-drop hint came to be drawn permanently across the file list, and what every panel, sheet and overlay in this stylesheet risks the moment it is given a display. One rule removes the whole class of bug. !important because it must outrank the class, whatever the class says. */ [hidden]{display:none!important} /* Font sizes are expressed in rem against this, so the whole interface follows the reader's browser setting. It used to be fixed px throughout, which meant "larger text" in the browser did nothing at all. */ html{font-size:100%;-webkit-text-size-adjust:100%} /* Every control can be hit with a gloved finger. 2.5.8 asks for 24x24 CSS pixels; icon-only buttons were 15px wide. `a.btn` is deliberately NOT in this list. Its specificity (0,1,1) beat the phone rule `.btn,.txtbtn{min-height:44px}` (0,1,0), so every link that looks like a button — "Projekt anlegen", "Neuen Vorgang anlegen", "Nächster Monat", about 326 of them — stayed 24px on a phone while the