/* ============================================================================ Hisaab — design tokens ---------------------------------------------------------------------------- THE single place to change how the platform looks. Every colour, radius, shadow and spacing step used by style.css is declared here; nothing below this file should hard-code a hex value. Change a token and the change lands on every page. Loaded before style.css in base.html and login.html. Two colour systems run side by side and must not be confused: DOMAIN ACCENTS (section 3b) are CHROME. They tint the furniture of a page — the rail down a section card, the eyebrow over a heading, the header row of a table — so a payroll page, a work-order page and an invoice page are recognisably different places. They never sit on a chart mark. STAGE HUES (section 5b) are MARKS. They colour the money itself — the segments of the payout bar, the rail on a stat tile, the step circle, the swatch in a legend — so R2 is the same blue on the dashboard, on the run page and on the staff step page. They never tint furniture. Both sets were run through the dataviz checker node .../dataviz/scripts/validate_palette.js "" --mode light and both report ALL CHECKS PASS. Re-run it if you change a hex. Sections 1. Brand — from the Fulcrum H logo 2. Surfaces & ink — page furniture 3. Accents — interactive blue 3b. Domain accents — one hue per area of the business 4. Status — good / warning / critical, ink + wash + edge 5. Data series — chart marks 5a. Series slots — the two-and-a-bit series ramp 5b. Payroll stages — R1 → R2 / R3 / staff / PF / ESIC / advances 5c. Sequential ramp — magnitude, one hue, light → dark 5d. Categorical set — trades, work-order status, invoice status 5e. On-dark ink — the landing band and the sign-in panel 6. Shape — radii, borders, shadows 7. Space & type — the spacing step and font stacks 8. Components — dialogs, tabs, header height and other shared parts ========================================================================= */ :root { color-scheme: light; /* --- 1. Brand --------------------------------------------------------- The logo's own palette. Deliberately separate from the interface blue: the mark keeps its identity even if the UI is re-themed. */ --brand-ink: #0a1f38; --brand-accent: #2e8bff; --brand-accent-soft: #7fbbff; /* --- 2. Surfaces & ink ------------------------------------------------ */ --page: #f6f8fb; /* soft blue-tinted white */ --surface: #ffffff; /* cards, tables, dialogs */ --ink: #10151d; /* body text, near-black */ --ink-2: #4a5568; /* secondary text */ /* --muted was #8a94a3, which measures 3.07:1 on white — below AA, and it carries real content in a dozen places (axis labels, tile notes, the footer). Darkened until it clears AA on both surfaces it lands on: 5.02:1 on --surface, 4.72:1 on --page. Still a clear third tier below --ink-2 at 7.53:1, so the hierarchy survives. */ --muted: #66707e; /* de-emphasised text */ --grid: #e8edf4; /* table rules, dividers */ --baseline: #cfd9e6; /* chart baselines, totals rules */ --border: #e3e9f1; /* card and control edges */ --ink-inverse: #1d2635; /* the tooltip and any dark-on-light chip */ /* --- 3. Accents ------------------------------------------------------- */ /* White on --accent is 4.42:1 — a hair under AA at the 13px semibold every filled control uses. So --accent stays the link and hairline blue, and anything with white text on it (buttons, the on tab) is painted --accent-deep at 6.63:1, with --accent-deeper as its hover. */ --accent: #2a78d6; /* links, borders, focus */ --accent-deep: #1c5cab; /* filled controls, headings, active nav */ --accent-deeper: #164a8b; /* the hover under a filled control */ --accent-wash: #eaf2fc; /* selected rows, soft fills */ --accent-wash-deep: #dbe9fb; /* the hover under an accent-wash chip */ --accent-line: #c4d5e9; /* an edge drawn on an accent wash */ /* --- 3b. Domain accents ----------------------------------------------- One hue per area of the business, so you can tell from six feet away which part of the product you are standing in. Each is a quartet: --dom-X the hue itself — rails, dots, the eyebrow rule --dom-X-wash a 92%-white tint — card headers, table header rows, the selected row, the section rail's backing --dom-X-line a 74%-white tint — the edge drawn on that wash --dom-X-ink the hue darkened until it reads as text on the wash (every pair below clears 5.9:1) Validated as a categorical set in this order: #1c5cab,#9a6410,#0f8f74,#8038c0,#b8405c → ALL CHECKS PASS */ /* Payroll & wages — the core of the product, so it keeps the house blue */ --dom-payroll: #1c5cab; --dom-payroll-wash: #ecf1f8; --dom-payroll-line: #c4d5e9; --dom-payroll-ink: #144078; /* Attendance — days on the gate pass, the raw material of a wage */ --dom-attendance: #9a6410; --dom-attendance-wash: #f6f2eb; --dom-attendance-line: #e5d7c1; --dom-attendance-ink: #6c460b; /* Invoices — money coming in, the other side of the wage bill */ --dom-invoices: #0f8f74; --dom-invoices-wash: #ebf5f3; --dom-invoices-line: #c1e2db; --dom-invoices-ink: #0b6451; /* Work orders — the contract every rupee of cost has to be attributed to */ --dom-workorders: #8038c0; --dom-workorders-wash: #f4eefa; --dom-workorders-line: #decbef; --dom-workorders-ink: #5a2786; /* People — workers, staff, users; the register behind every other page */ --dom-people: #b8405c; --dom-people-wash: #f9eff1; --dom-people-line: #edcdd5; --dom-people-ink: #812d40; /* --- 4. Status -------------------------------------------------------- Reserved. Good / warning / critical mean state and nothing else — they are never spent on "series 4", and a statutory stream like PF is a stream, not a warning. Each now carries its wash and its edge, so a tinted background stops being invented at the point of use. */ --good: #0a7a3d; --good-badge: #17a05a; --good-wash: #e2f6ea; --good-wash-deep: #cfeedd; /* the hover under a good wash */ --good-line: #bfe6cf; --warn: #f0a91e; --warn-deep: #92400e; --warn-ink: #92600a; /* warn text on a warn wash */ --warn-wash: #fdf6e8; --warn-wash-deep: #fbeccd; --warn-line: #edd9ad; --critical: #d03b3b; --critical-ink: #a32020; /* critical text on a critical wash */ --critical-ink-deep: #8f1c1c; --critical-wash: #fdeeee; --critical-wash-deep: #fbe2e2; --critical-line: #f0caca; /* --- 5a. Series slots ------------------------------------------------- The generic two-series ramp: blue is the first series, orange the second, grey the "everything else" slot, aqua the staff slot. They are aliases onto the stage hues below so that "series blue" and "R2 blue" can never drift into two different blues again — which is exactly what had happened across .cbar, .rcbar, .spread and the flow SVGs. */ --s1: var(--stage-r2); /* series blue */ --s1-lo: #78a1da; /* the light end of a blue column gradient */ --s1-hi: #2a6fd0; /* the deep end */ --s2: var(--stage-r3); /* series orange */ --s2-lo: #e6a377; --s2-hi: #cf6a20; --s3: #c2cbd8; /* non-series grey */ --s3c: var(--stage-staff); /* aqua (staff) */ /* --- 5b. Payroll stages ----------------------------------------------- The month's money, one hue per stage, used identically on every page that draws it: the payout composition bar, the stat-tile rails, the step-list circles, the flow diagram, the legends. R1 is deliberately NOT one of the categorical slots. It is the wage the month earned — the whole that the others are cut out of — so it takes a neutral slate and reads as the track, not as another payment. The six payment hues were validated as a categorical set in this order: #2a6fd0,#cf6a20,#0f9384,#7b4bd0,#b93b8a,#7a6a12 → ALL CHECKS PASS (worst adjacent ΔE 11.7 protan, 16.1 normal). */ /* R1 — wage earned this month. The source figure; the track. */ --stage-r1: #5b6b84; --stage-r1-wash: #f1f2f5; --stage-r1-line: #d4d9df; --stage-r1-ink: #404b5c; /* R2 — paid against a work order */ --stage-r2: #2a6fd0; --stage-r2-wash: #edf3fb; --stage-r2-line: #c8daf3; --stage-r2-ink: #1d4e92; /* R3 — the balance settled direct to the worker */ --stage-r3: #cf6a20; --stage-r3-wash: #fbf2ec; --stage-r3-line: #f3d8c5; --stage-r3-ink: #914a16; /* Staff — salaried people, who settle in their own payroll, not at R3 */ --stage-staff: #0f9384; --stage-staff-wash: #ebf6f5; --stage-staff-line: #c1e3df; --stage-staff-ink: #0b675c; /* PF — provident fund. A statutory stream, so pointedly not amber. */ --stage-pf: #7b4bd0; --stage-pf-wash: #f4f0fb; --stage-pf-line: #ddd0f3; --stage-pf-ink: #563592; /* ESIC — employees' state insurance, the other statutory stream */ --stage-esic: #b93b8a; --stage-esic-wash: #f9eef5; --stage-esic-line: #edcce1; --stage-esic-ink: #822961; /* Advances — money already handed over, recovered at R3 */ --stage-adv: #7a6a12; --stage-adv-wash: #f4f2eb; --stage-adv-line: #dcd8c1; --stage-adv-ink: #554a0d; /* --- 5c. Sequential ramp ---------------------------------------------- Magnitude, not identity: heat behind a number, depth in a distribution bar, the rate ladder on the rate card. One hue, five steps, light to dark, ending exactly on --accent-deep so a full-intensity cell and the app's own deep blue are the same colour. node ... "#9cb7da,#78a1da,#4d86d3,#2a6fd0,#1c5cab" --ordinal → ALL CHECKS PASS White text only clears AA on --seq-4 and --seq-5; put --ink on 1–3. */ --seq-1: #9cb7da; --seq-2: #78a1da; --seq-3: #4d86d3; --seq-4: #2a6fd0; --seq-5: #1c5cab; /* The two tints below the ramp — backgrounds, never marks. */ --seq-0: #dbe7fb; --seq-00: var(--accent-wash); /* --- 5d. Categorical set ---------------------------------------------- Identity: which trade, which work-order status, which invoice status. These five hexes are the same set app/main.py has used as SKILL_COLORS; they live here now so a template can name a slot instead of retyping a hex, and so status can stop meaning two colours on two screens. node ... "#2453b8,#a86a00,#0e8a6b,#8e44c4,#c2432f" → ALL CHECKS PASS Slots 6 and 7 exist because the trade donut on /employees draws one slice per trade and the register carries seven. With those two added the set still clears every ADJACENT-pair check (worst dE 9.8 deutan, 18.0 normal, all >= 3:1 on white), which is what a donut needs — but it does NOT clear the all-pairs check: slot 7 magenta and slot 5 red collapse for a deuteranopic reader. Seven categorical hues is past what colour alone can carry, so that chart names every slice in its legend and lets you click one to isolate it. Do not add a slot 8; fold the tail into --cat-other. Assign in slot order and never cycle. */ --cat-1: #2453b8; /* work-order status: running */ --cat-2: #a86a00; /* extension · invoice: started */ --cat-3: #0e8a6b; /* completed · invoice: complete */ --cat-4: #8e44c4; /* pending */ --cat-5: #c2432f; --cat-6: #1f8fb0; /* trade slots only — see the note above */ --cat-7: #b8336a; --cat-other: #6b7280; /* no status on file */ /* Washes for the four states that also appear as a badge in a table. */ --cat-1-wash: #e9eefa; --cat-1-ink: #1a3e8a; --cat-2-wash: #fdf6e8; --cat-2-ink: #7d4f00; --cat-3-wash: #e4f5ef; --cat-3-ink: #0a6650; --cat-4-wash: #f5edfb; --cat-4-ink: #6b3394; --cat-other-wash: #eef0f3; --cat-other-ink: #4c545f; /* Flow-diagram tints. The two ribbons are the only mark in the attendance flow that carries weight — each is as thick as that order's share of the month — and at their old 1.24:1 against white they carried nothing anyone could see. Raised to a visible tint that still does not compete with the cards it connects. Both are the work-orders violet now rather than a teal/blue pair, because those two hues mean Staff and R2 in the chart directly below this one; a project order is marked by a heavier ribbon and a solid card stroke instead. The dim ink is the one supporting tint allowed on the deep source panel, replacing five of which four failed. */ --flow-ink-dim: #e0d3ef; --flow-ribbon: #d0b9e8; --flow-ribbon-project: #b892dd; /* --- 5e. On-dark ink -------------------------------------------------- The landing band and the sign-in brand panel are the only dark surfaces in the product. Naming their ink means a second dark panel does not have to re-derive it by eye. */ --on-dark-bg-1: #0d2545; --on-dark-bg-2: #0a1f38; --on-dark-bg-3: #071729; --on-dark-ink: #a9c2e2; --on-dark-muted: #8fb0d8; --on-dark-up: #6fdcae; --on-dark-down: #ff9d8a; --on-dark-rule: rgba(255, 255, 255, 0.12); --on-dark-fill: rgba(255, 255, 255, 0.08); /* --- 6. Shape --------------------------------------------------------- */ --radius-sm: 6px; /* chips, tiny buttons */ --radius: 10px; /* inputs, buttons */ --radius-lg: 14px; /* cards, sections */ --radius-xl: 18px; /* dialogs */ --radius-pill: 999px; --shadow: 0 1px 3px rgba(16, 42, 90, 0.07); /* resting card */ --shadow-lift: 0 2px 8px rgba(42, 120, 214, 0.15); /* a card under the cursor */ --shadow-pop: 0 8px 24px rgba(16, 42, 90, 0.18); /* menus, tooltips */ --shadow-modal: 0 30px 90px -20px rgba(10, 31, 56, 0.45); /* Keyboard focus. Only inputs had any focus styling, so every nav link, tab, rail button and dialog action was invisible to a keyboard. */ --focus-ring: 0 0 0 3px rgba(42, 120, 214, 0.35); /* --- 7. Space & type -------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif; --font-brand: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 11px; --text-sm: 12.5px; --text: 14px; --text-lg: 15px; --text-xl: 21px; /* --- 8. Components ---------------------------------------------------- Dialogs share one look: no hard edge, a soft ring and a deep shadow lifting them off a blurred page. Width is per-dialog (see .wide). */ --dialog-bg: var(--surface); --dialog-radius: var(--radius-xl); --dialog-pad: 26px 30px; --dialog-width: 640px; --dialog-width-wide: 1150px; --dialog-ring: 0 0 0 1px rgba(16, 42, 90, 0.06); --dialog-shadow: var(--shadow-modal); --dialog-backdrop: rgba(15, 28, 51, 0.32); --dialog-blur: 6px; /* The sticky header's height. Two sticky offsets used to approximate it with different magic numbers (49px and 63px); both now derive. */ --header-h: 50px; --sticky-top: calc(var(--header-h) - 1px); --rail-top: calc(var(--header-h) + 13px); }