/* ============================================================================ LUMINA SYSTEM — DESIGN TOKENS Direction 03 · Brand-Led, with the three operational amendments of 2026-08-11 THIS FILE IS THE ONLY SOURCE OF TRUTH FOR VISUAL VALUES. No colour, spacing, font size, radius or shadow may be written literally anywhere else in the codebase. If a value you need is missing, add it here first — do not inline it. Documentation: docs/DESIGN-SYSTEM.md ========================================================================= */ :root{ /* ========================================================================== 1. BRAND RAMP — derived from design/brand/lumina-logo.svg The logo is teal #14ada5 and orange #ea6d26. Neither carries white text (2.78:1 and 3.13:1), so the chrome uses darkened steps of the same hues. The two values were read off the PNG until 2026-08-11 and were three points out (#17aea5 / #eb6d27). The vector from the client's designer is now the source and these are its exact stops. The darkened steps below are NOT re-derived: a three-point shift in the base moves none of their measured ratios, and re-deriving would invalidate figures that were checked against real screens. ====================================================================== */ --brand-900:#06423f; /* 11.30:1 on white — rail base, band end */ --brand-800:#0a625d; /* 7.20:1 — rail top, table footer, toast */ --brand-700:#0d7c76; /* 5.05:1 — PRIMARY. Buttons, table header, band */ --brand-600:#12938c; --brand-500:#14ada5; /* THE LOGO TEAL — marks on dark, accents, never text bg */ --brand-300:#6ad6cf; --brand-100:#d2f2ef; --brand-050:#eafaf8; /* Logo orange. The dominant colour in the mark, and it cannot carry white text at any usable step without leaving the logo hue. It is therefore an ACCENT, never a text background: active-section marker, active tab underline, number-plate rule. See docs/DESIGN-SYSTEM.md §2.5. */ --accent-orange:#ea6d26; /* THE LOGO ORANGE — non-text use only */ --accent-orange-strong:#c25715; /* 4.50:1 — the only step allowed to hold white text */ --accent-orange-soft:#fdeee4; /* ========================================================================== 2. SURFACES AMENDMENT 1 (2026-08-11): table bodies are neutral, not brand-tinted. --c-row-alt was brand-050; it is now a near-white grey. The accountant reads figures for six hours a day and colour belongs in the chrome. ====================================================================== */ --c-bg:#f4f6f6; --c-surface:#ffffff; --c-surface-2:#f7f9f9; /* neutral — zebra rows, subtle fills */ --c-surface-3:#eceff0; /* neutral — hover, disabled fills */ --c-row-alt:var(--c-surface-2); --c-row-hover:var(--c-surface-3); /* ========================================================================== 3. INK ====================================================================== */ --c-ink:#0d221e; /* 15.8:1 on white */ --c-ink-2:#3b544e; /* 8.6:1 — secondary body */ --c-ink-3:#69817b; /* 4.6:1 — labels, meta. Minimum for text */ --c-ink-4:#9ab0aa; /* 2.6:1 — DECORATIVE ONLY. Never text */ --c-onbrand:#ffffff; --c-onbrand-2:#a9dcd0; /* secondary text on brand surfaces */ /* Controls sitting ON the brand band or rail. The band is a --brand-700 → --brand-900 gradient, so anything tinted with --c-accent (which IS --brand-700) disappears into it -- 1.00:1 at the top of the gradient. A control on brand must be drawn in these, never in the accent. DESIGN-SYSTEM.md §5.1b. */ --c-onbrand-fill:var(--c-onbrand); /* solid control on the band */ --c-onbrand-fill-ink:var(--brand-800); /* 7.20:1 label on that fill */ --c-onbrand-line:rgb(255 255 255/.55); /* outlined control border */ --c-onbrand-wash:rgb(255 255 255/.14); /* hover, active-section fill */ --c-onbrand-rule:rgb(255 255 255/.18); /* hairline inside the band */ /* ========================================================================== 4. LINES ====================================================================== */ /* #d3e5e0 measured 1.31:1 against white -- WCAG 1.4.11 wants 3:1 to delineate a control, and the fill could not help either: --c-surface against --c-bg is 1.05:1. Every text field in the product was bounded by something a user might not see, from P1 until 2026-08-11. It matters most for 11 reps reading a phone outdoors. --c-line-2 is untouched: a row separator is decoration, not a control boundary. */ --c-line:#6f978d; /* standard border — 3.24:1 on white */ --c-line-2:#e6f1ee; /* hairline — row separators */ --c-line-strong:var(--brand-700); /* ========================================================================== 5. SEMANTIC / STATUS AMENDMENT 3 (2026-08-11): status colours NEVER inherit the brand. A rejected bonus and an overdue balance must stay distinguishable from the identity, not dissolve into it. ====================================================================== */ --c-accent:var(--brand-700); --c-accent-ink:#ffffff; --c-accent-soft:var(--brand-100); /* Text on a soft-accent fill -- chips, 5.12. **A darkened step, not --c-accent**, and measured rather than assumed: --brand-700 on --brand-100 is 4.25:1, which is under AA for the 15px figure a chip carries. --brand-800 is 6.06:1. This is the same move 2.2b makes for the logo teal, which also fails text contrast and is darkened for the chrome. */ --c-accent-on-soft:var(--brand-800); --c-ok:#12805f; --c-ok-soft:#d9f2e8; --c-ok-ink:#ffffff; --c-warn:#8a6a00; --c-warn-soft:#f7f1d6; --c-warn-ink:#ffffff; /* yellow-amber, deliberately pulled away from --accent-orange */ --c-danger:#c0293c; --c-danger-soft:#fbe6e9; --c-danger-ink:#ffffff; /* 5.90:1 on white */ --c-info:#0d6f86; --c-info-soft:#ddeff4; --c-info-ink:#ffffff; --c-mute:var(--c-ink-3); --c-mute-soft:var(--c-surface-3); /* The customer's colour for the month -- D190, BR-167, DESIGN-SYSTEM 5.25. The client's five, in their order: none red, one yellow, two green, three blue, more purple -- a badge's dot, a row's stripe. Red and green are the status colours themselves. Yellow on white is 1.68:1, so a yellow mark is never the only carrier -- the number beside it is. */ --c-visits-0:var(--c-danger); --c-visits-1:#f2c200; --c-visits-2:var(--c-ok); --c-visits-3:#1f5fd1; --c-visits-4:#7a3db8; /* The row's own tint, pale -- "الصف كله يبقي واخد اللون بس الوان باهته شويه". Behind link and body text, so each keeps --brand-700 links at 4.47-4.69:1, where the zebra row already sits at 4.71. */ --c-visits-0-soft:#fdeef0; --c-visits-1-soft:#fdf7dc; --c-visits-2-soft:#e6f6ef; --c-visits-3-soft:#edf2fc; --c-visits-4-soft:#f5effa; /* focus ring — deliberately not brand, so it reads on brand surfaces too */ --c-focus:#1f6feb; --focus-ring:0 0 0 3px color-mix(in srgb, var(--c-focus) 40%, transparent); /* ========================================================================== 6. TYPOGRAPHY ====================================================================== */ --f-ui:"Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; --f-num:var(--f-ui); --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fs-micro:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; /* body default */ --fs-lg:18px; --fs-xl:22px; --fs-2xl:30px; --fs-3xl:38px; --fw-n:400; --fw-m:500; --fw-b:600; --fw-x:800; /* headings and figures only */ --lh-tight:1.15; /* headings */ --lh-body:1.55; /* prose */ --lh-data:1.35; /* table cells */ --ls-tight:-0.02em; /* large headings */ --ls-normal:0; --ls-wide:0.07em; /* uppercase micro-labels */ --ls-wider:0.14em; /* eyebrows */ /* ========================================================================== 7. SPACE ====================================================================== */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:26px; --s-7:34px; --s-8:48px; --s-9:72px; /* ========================================================================== 8. RADIUS ====================================================================== */ --r-1:8px; /* inputs, buttons, small controls -- D185 */ --r-2:10px; /* panels, banners */ --r-3:14px; /* cards */ --r-pill:999px; /* buttons, badges, chips */ --rail-dot:8px; /* S-05's unread mark on a rail icon */ /* ========================================================================== 9. BORDER WIDTH ====================================================================== */ --bw:1px; --bw-2:2px; /* input borders, emphasis */ --bw-3:3px; /* banner spine, total rule */ --bw-4:4px; /* the visit stripe on a row's edge -- D190 */ /* ========================================================================== 10. ELEVATION ====================================================================== */ --shadow-1:0 2px 6px rgba(5,63,54,.07); --shadow-2:0 10px 28px rgba(5,63,54,.14); --shadow-3:0 24px 60px rgba(5,63,54,.28); /* ========================================================================== 11. MOTION ====================================================================== */ --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.8,.2,1); /* ========================================================================== 12. COMPONENT DIMENSIONS ====================================================================== */ --ctl-h:36px; /* buttons, inputs — desktop. 40 until D185 */ --chev:6px; /* D185 -- one arm of a select's chevron */ --chev-inset:var(--s-3); /* D185 -- the chevron's distance from the edge */ --ctl-h-sm:32px; --ctl-h-touch:48px; /* field screens — thumb target */ /* DESIGN-SYSTEM.md 5.21 — the lightbox's loading placeholder. A photograph is 2–8 MB on Egyptian mobile data (R2, R3), so the frame has to hold its shape before the image arrives; an empty box reads as "no photograph", which is a different statement from "still loading". */ --lightbox-min-w:320px; --lightbox-min-h:40vh; --row-h:48px; /* table row */ --row-h-dense:38px; --cell-x:16px; --cell-y:12px; --rail-w:78px; /* brand navigation rail */ --rail-h-mobile:60px; --rail-mark:44px; /* the L lockup at the top of the rail */ --rail-item:46px; /* a rail link's tap target */ --rail-avatar:38px; --avatar-sm:32px; /* a person's photograph beside their name, S-07 -- BR-139a */ --avatar-lg:128px; /* the same photograph on their own profile, S-04 -- D160 */ --avatar-action:40px; /* the camera on that photograph's circle */ --profile-aside:20rem; /* S-04's person column -- D160 */ --profile-cover:88px; /* the tinted strip the photograph sits across */ --fact-min:8rem; /* one of S-04's account facts, before they wrap */ --rep-card-min:14rem; /* a distribution rep's card on the manager's home -- BR-140d */ --rep-card-min-sm:10rem; /* a sales rep's card, which holds only a ring */ --ring:88px; /* a sales rep's visits ring -- DESIGN-SYSTEM.md 5.19a */ --ring-lg:128px; /* the team's visits ring */ --ctl-box:18px; /* checkbox, radio */ --icon:20px; /* inline SVG icon, default */ --icon-lg:24px; --empty-icon:64px; /* the brand circle on an empty state */ --measure:1240px; /* max content width */ --measure-prose:560px; /* error pages, single-column copy */ --measure-card:420px; /* the sign-in card */ --measure-form:640px; /* a single-column form card */ --measure-form-sm:520px; /* a form of two or three fields */ /* AMENDMENT 2 (2026-08-11): the brand band collapses on small screens. At full height it consumed roughly 40% of a phone viewport, pushing the invoice form below the fold. The rep's screen must open on the work. */ --band-pad-block:var(--s-7); --band-pad-block-end:var(--s-9); --band-pad-block-mobile:var(--s-4); --band-pad-block-end-mobile:var(--s-6); --band-stats-gap:var(--s-8); --band-stats-gap-mobile:var(--s-4); /* How far the content card rides up into the band. On mobile the band is already collapsed, so a deep overlap clips the band's own actions. */ --card-overlap:var(--s-8); --card-overlap-mobile:var(--s-4); /* ========================================================================== 13. LAYOUT Direction is LTR — the product is English only, confirmed 2026-08-11. Build with CSS logical properties (margin-inline, padding-inline, inset-inline) so this token is the only change if it ever flips. ====================================================================== */ --direction:ltr; --bp-mobile:600px; --bp-tablet:900px; /* Chart -- DESIGN-SYSTEM.md 5.19. The label column on a horizontal bar chart. Wide enough for "Luminacal K2 (LUM-K2)" and a governorate name at --fs-xs, narrow enough to leave the track the majority of the row; labels longer than it ellipsis rather than wrap, so every bar keeps the same height and the bars stay comparable. */ --chart-label-w:10rem; --bp-desktop:1240px; /* ========================================================================== 14. BRAND ASSET ====================================================================== */ /* ⚠️ A `--logo-src` token pointing at the old raster logo lived here from the first commit until 2026-08-14 and **broke `collectstatic` outright**. `static/img/` was deleted by the 2026-08-11 scope audit when the client supplied the vector brand pack -- the raster was superseded and `static/brand/` replaced it. The token itself was referenced by nothing, but WhiteNoise's manifest storage parses every asset reference in every CSS file and raises `MissingFileError` on one that does not resolve. ⚠️ **Including references inside comments.** The first version of this note quoted the old declaration verbatim and broke the build a second time, which is why the path is described here rather than written. So `scripts/deploy.sh` -- which runs `collectstatic --noinput` -- would have failed on a clean host, and `AC 1.5` was broken from that day through `P11`. **Nothing caught it because the deploy was deferred to `P12`**, so the script has never been run end to end, and `manage.py check --deploy` does not collect static files. The comment that used to sit here even said getting the path wrong "fails collectstatic loudly rather than at runtime" -- which was exactly right, and nobody ever ran it. The logo is wired as `lumina-logo.svg` through the templates (`DESIGN-SYSTEM.md` §2.6), not through a token. Guarded now by `core/tests/test_static.py`. */ --logo-h:32px; /* header lockup height */ --logo-h-sm:24px; /* mobile rail */ /* Sign-in brand panel. The lockup is the subject there, not a label, and the "Lumina Pharma" heading that used to sit under it was the wordmark said twice -- so the lockup carries the name alone and scales with the panel it lives in. The mobile strip overrides this back to --logo-h. */ --logo-h-auth:clamp(56px, 7vw, 112px); --auth-tagline:clamp(18px, 1.9vw, 30px); --logo-ratio:2.994; /* 500 x 167 — reserve space to avoid layout shift */ /* ------------------------------------------------------------------ * SIGN-IN — "the light that makes life better" The company's own line, and the concept the panel is built on: the mark is a light source, and the two brand colours are what it casts. Two flat teal rectangles were rejected by the client as ordinary and meaningless, and they were right -- a single colour says nothing about a brand whose name means light. Both colours appear here, which §2.2b otherwise forbids. The rule's reason is that neither colour can carry text; that reason is kept -- nothing is written on the glow, and every value below is measured. ------------------------------------------------------------------ */ --auth-brand-share:56%; /* the identity takes the larger half now -- the white slab beside it was the biggest thing on the screen and said nothing */ --auth-brand-min:380px; --auth-brand-max:980px; --auth-base:#04211f; /* near-black teal, the unlit ground */ /* Two pools of light, kept far apart on the panel. Blurring the mark itself was tried and rejected: its teal and orange sit next to each other, so blur mixes them into brown. Separate layers stay pure. */ --auth-glow-teal:rgba(20,173,165,.78); --auth-glow-orange:rgba(234,109,38,.70); --auth-glow-lift:rgba(63,211,201,.26); /* the far, cool spill */ /* The mark stays sharp, and stays quiet. At full strength it read as a giant logo dropped in a corner; this is a form the light catches. */ --auth-mark-size:900px; --auth-mark-opacity:.16; /* A scrim under the text, falling away to nothing across the panel. Two of the light pools overlap at 3.47:1 and all three at 2.22:1 -- fine where no words sit, unacceptable if a heading ever lands there. This makes the copy legible wherever the light is tuned to, instead of the type being safe only while nobody moves a gradient. It also focuses the eye. */ --auth-scrim:rgba(4,33,31,.88); --auth-scrim-mid:rgba(4,33,31,.55); /* DESIGN-SYSTEM.md 5.21 — the lightbox scrim, and the one colour on top of it. **Fixed in both themes, and that is the point.** `--c-ink` inverts: it is near-black in light and #e4f4f0 in dark, so a scrim mixed from it turns *white* in dark mode and the photograph sits in a glare. A backdrop is not text and does not follow the text palette. Found on screen 2026-08-23, the first time the lightbox was opened in the dark theme — the same class of defect as every other one this project caught by looking rather than by asserting. */ --scrim-overlay:rgba(4,33,31,.88); --on-scrim:#e4f4f0; /* ========================================================================== 15. Z-INDEX ====================================================================== */ --z-base:0; --z-sticky:10; --z-rail:20; --z-overlay:50; --z-toast:60; } /* ============================================================================ DARK THEME Applied as [data-theme="dark"] on the root element. The brand desaturates: #0f6b5c on a dark background is muddy and fails contrast, so chrome shifts to brand-500 territory. ========================================================================= */ /* `.auth` is here on purpose, and it is not a second copy of anything. Sign-in renders on the dark palette in BOTH themes: the panel beside it is an unlit ground with brand light cast across it, and a white form next to that reads as two unrelated screens. Listing the selector costs one line; restating 45 declarations for the auth screen would be the mistake static/css/tokens.css already made once. */ [data-theme="dark"], .auth{ --brand-900:#04211f; --brand-800:#0a3f3c; --brand-700:#14ada5; /* the logo teal reads correctly on dark */ --brand-500:#3fd3c9; --brand-100:#0f3532; --brand-050:#0b2624; --accent-orange:#ff8a4a; --accent-orange-strong:#ff8a4a; --accent-orange-soft:#3a1e10; --c-bg:#071614; --c-surface:#0e211d; --c-surface-2:#132b26; --c-surface-3:#1b3a33; --c-row-alt:var(--c-surface-2); --c-row-hover:var(--c-surface-3); --c-ink:#e4f4f0; --c-ink-2:#b0cec7; --c-ink-3:#7ea49b; --c-ink-4:#5d7f77; --c-onbrand:#eafaf6; --c-onbrand-2:#7fc0b2; /* #1e433b measured 1.53:1 against --c-surface -- half of the 3:1 that WCAG 1.4.11 requires to delineate a control, so every input in the dark theme was a field with no visible edge. Found when sign-in moved onto this palette. --c-line-2 is untouched: it separates rows, and a row separator is decoration rather than a control boundary. */ --c-line:#417c70; /* 3.46:1 on --c-surface, 3.10:1 on --c-surface-2 */ --c-line-2:#173630; --c-accent:#3fbfa8; --c-accent-ink:#04211c; --c-accent-soft:#0f342d; /* Dark needs no darkening: --c-accent on --c-accent-soft measures 5.96:1, already past AA. Declared here anyway so the token resolves in both themes rather than falling back to the light value. */ --c-accent-on-soft:#3fbfa8; --c-ok:#3fcf9d; --c-ok-soft:#0c2f24; --c-ok-ink:#04211c; --c-warn:#d9a53f; --c-warn-soft:#2e2510; --c-warn-ink:#1a1405; --c-danger:#f9788b; --c-danger-soft:#33151a; --c-danger-ink:#26070d; --c-info:#4bb4cc; --c-info-soft:#0b2b33; --c-info-ink:#04191f; /* D190 -- lighter steps for a dark surface: 10.14, 7.14, 7.69 to 1. */ --c-visits-1:#e8c547; --c-visits-3:#7aa7ff; --c-visits-4:#c49bff; --c-visits-1-soft:#2c2710; --c-visits-3-soft:#121f38; --c-visits-4-soft:#231736; --c-focus:#6ea8ff; --shadow-1:0 2px 6px rgba(0,0,0,.45); --shadow-2:0 10px 28px rgba(0,0,0,.6); --shadow-3:0 24px 60px rgba(0,0,0,.8); } /* ============================================================================ REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; } }