/* ============================================================================ ASAS POS — DESIGN TOKENS ---------------------------------------------------------------------------- THE ONLY PLACE COLOUR IS EVER DECLARED LITERALLY IS THE "VISUAL IDENTITY" BLOCK BELOW. Change those values and the entire site — including the photography grade, the glows, the borders and the shadows — re-skins. Everything after it is derived with color-mix(). The identity is DUAL. Every one of the nine values is a light-dark() pair: the first argument is day mode, the second is night mode. `color-scheme` picks between them, so there is no second stylesheet, no `.dark` class on a thousand rules, and no way for one mode to drift away from the other — a value that is wrong is wrong in both places at once, in one line. light-dark() carries no fallback here, deliberately. A custom property accepts any token sequence at parse time, so a `--brand-ink: #05121f` line above the pair would be overridden by it and then fail at USE time on an engine that lacks the function — protecting nothing while reading as if it did. The honest guard is @supports, and the site already requires color-mix(), which shipped in the same generation of engines. ========================================================================== */ :root { /* DAY IS THE DEFAULT, not the operating system's opinion. The ground of this brand is white; a visitor whose laptop happens to be in night mode should still meet the page the way it was designed, and then choose otherwise if they want to. `light` here is what every light-dark() below resolves against until the toggle writes an attribute. */ color-scheme: light; /* ========================================================================== ▼▼▼ VISUAL IDENTITY — EDIT THESE 9 PAIRS TO RE-SKIN THE WHOLE SITE ▼▼▼ WHITE PAGE, BLUE INSTRUMENT. Blue is the brand, but it is not the ground. A saturated blue field under white text is the most tiring thing a screen can do to a reader, and a POS landing page is read, not glanced at. So the blue was taken out of the background entirely and spent where it does work instead: the primary action, the key figures, the row marks, the rules that separate a ledger. Everything carrying text is white or near-black. Night is the same idea seen the other way: a NEUTRAL graphite ground, not a navy one, so the off-white text sits on grey rather than on colour. Both modes have exactly one saturated hue on screen at a time, and it is never underneath a sentence. Contrast is measured, not eyeballed. Every foreground clears 4.5:1 on its own ground in BOTH modes, and so does --fg-dim, the dimmest derived text on the page — which is the value that fails first and is checked last. ========================================================================== */ /* DAY NIGHT */ /* the ground. White, and pure white — the brand's own paper. */ --brand-ink: light-dark(#ffffff, #0e1116); /* raised ground — panels, sticky bars. On white a raised surface cannot be lighter, so it steps a hair COOLER instead. */ --brand-surface: light-dark(#f6f8fb, #161b22); /* hairlines, rules, perforations */ --brand-line: light-dark(#e3e8ef, #262d38); /* primary foreground — 18.9:1 day, 15.5:1 night. Near-black, never #000: pure black on pure white is a glare edge, and the eye reads this softer. */ --brand-paper: light-dark(#10161f, #edf0f4); /* secondary foreground — 9:1 day, 8.3:1 night. Graphite, not blue: this is the colour of most of the body copy on the page. Both values are set from the RAISED surface, not from the ground: --fg-dim is 78% of this mixed toward the ground, and on a panel it was the one derived value in the system that came in under 4.5:1. */ --brand-muted: light-dark(#3f4a59, #a3aebc); /* PRIMARY — the one saturated hue. Buttons, key figures, marks, focus. 6.2:1 day, 7.8:1 night, so it can carry text and not only fills. */ --brand-accent: light-dark(#0f5fbf, #6fa8f5); /* data / verified / positive column. Deliberately NOT blue: this hue and the one below carry profit against cost, and two shades of the identity cannot be told apart in a bar chart. */ --brand-accent-2: light-dark(#0b6e5f, #3fc6b4); /* cost / negative column / warnings */ --brand-accent-3: light-dark(#b3352a, #ff8367); /* fourth data hue — charts, permission states */ --brand-violet: light-dark(#4b3fbf, #a98cff); /* ========================================================================== ▲▲▲ END OF VISUAL IDENTITY ▲▲▲ Everything below is derived. Do not hard-code colour past this point. ========================================================================== */ /* --- Derived grounds ---------------------------------------------------- */ --bg: var(--brand-ink); --bg-raised: var(--brand-surface); --bg-sunken: color-mix(in srgb, var(--brand-ink) 88%, black); --bg-panel: color-mix(in srgb, var(--brand-surface) 88%, var(--brand-ink)); --bg-overlay: color-mix(in srgb, var(--brand-ink) 82%, transparent); --bg-tint-accent: color-mix(in srgb, var(--brand-accent) 12%, transparent); --bg-tint-2: color-mix(in srgb, var(--brand-accent-2) 12%, transparent); --bg-tint-3: color-mix(in srgb, var(--brand-accent-3) 12%, transparent); --bg-tint-violet: color-mix(in srgb, var(--brand-violet) 14%, transparent); /* --- Derived foregrounds ------------------------------------------------ */ --fg: var(--brand-paper); --fg-muted: var(--brand-muted); /* The dimmest text on the page, and therefore the value that fails first. 78% holds it at 4.9:1 on the ground and 4.6:1 on a raised panel in day mode, 5.5:1 and 5.0:1 at night — measured, not eyeballed. Do not lower it, and do not lighten --brand-muted, without re-checking all four. */ --fg-dim: color-mix(in srgb, var(--brand-muted) 78%, var(--brand-ink)); --fg-on-accent: color-mix(in srgb, var(--brand-ink) 92%, black); --fg-accent: var(--brand-accent); --fg-positive: var(--brand-accent-2); --fg-negative: var(--brand-accent-3); /* --- Lines -------------------------------------------------------------- */ --line: var(--brand-line); --line-soft: color-mix(in srgb, var(--brand-line) 55%, var(--brand-ink)); --line-strong: color-mix(in srgb, var(--brand-line) 62%, var(--brand-paper)); --line-accent: color-mix(in srgb, var(--brand-accent) 45%, transparent); /* --- Pointer ------------------------------------------------------------ The cursor crosses every ground on the page: the ground itself, panels, the dark terminal that never inverts, and graded photography. A hairline in a single colour loses one of them. A ring in the foreground colour carried by a halo in the ground colour reads on all of them, in both modes, the way a system cursor is white with a black outline. */ --cursor-ring: color-mix(in srgb, var(--brand-paper) 82%, transparent); --cursor-halo: 0 0 0 1px color-mix(in srgb, var(--brand-ink) 58%, transparent), 0 2px 10px color-mix(in srgb, var(--brand-ink) 50%, transparent); /* --- Photography grade (duotone driven by the identity) ----------------- NIGHT ONLY. These four are multiplied by --grade, and day mode sets that scalar to 0 (see .media in components.css) — a photograph on a white page is shown as shot. So every value here describes the dark ground: the duotone that keeps a photograph from punching a hole in it, and the veil that fades the picture into it. */ --grade-shadow: var(--brand-ink); --grade-light: color-mix(in srgb, var(--brand-accent) 70%, var(--brand-paper)); --grade-veil: color-mix(in srgb, var(--brand-ink) 62%, transparent); --grade-veil-strong: color-mix(in srgb, var(--brand-ink) 88%, transparent); /* --- Glows & shadows ---------------------------------------------------- One shadow colour, carrying its own strength in its alpha, and every shadow below scales that alpha by mixing it further with transparent. Day mode gets a blue-tinted shadow at roughly a third of the density: black at night-mode strength on a near-white ground reads as dirt. */ --shadow-base: light-dark(color-mix(in srgb, var(--brand-paper) 34%, transparent), black); --glow-accent: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 30%, transparent), 0 18px 60px -18px color-mix(in srgb, var(--brand-accent) 45%, transparent); --shadow-sm: 0 2px 6px -2px color-mix(in srgb, var(--shadow-base) 55%, transparent); --shadow-md: 0 10px 24px -12px color-mix(in srgb, var(--shadow-base) 70%, transparent), 0 3px 8px -6px color-mix(in srgb, var(--shadow-base) 50%, transparent); --shadow-lg: 0 32px 70px -32px color-mix(in srgb, var(--shadow-base) 82%, transparent), 0 10px 26px -18px color-mix(in srgb, var(--shadow-base) 60%, transparent); --shadow-panel: 0 40px 90px -40px color-mix(in srgb, var(--shadow-base) 88%, transparent), 0 0 0 1px var(--line-soft); /* --- Focus -------------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-accent); /* --- Type --------------------------------------------------------------- */ --font-display: "Archivo", "Tajawal", ui-sans-serif, system-ui, sans-serif; --font-body: "Archivo", "Tajawal", ui-sans-serif, system-ui, sans-serif; --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", monospace; --fs-mono-xs: clamp(0.625rem, 0.6rem + 0.14vw, 0.72rem); --fs-mono-sm: clamp(0.6875rem, 0.65rem + 0.18vw, 0.78rem); --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem); --fs-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); --fs-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); --fs-3xl: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem); /* The floor used to be 3rem, which is more than a 375px screen can hold: "guesswork" wanted 387px inside a 338px line and lost its K to the line mask. Sized from the longest word in the headline, not from the viewport. */ --fs-4xl: clamp(2.4rem, 1.05rem + 7.1vw, 6rem); /* Ceiling is deliberate: past ~7.5rem the closing line stops reading as a sentence and starts reading as texture. */ --fs-mega: clamp(3.25rem, 1.2rem + 8.5vw, 7.5rem); --lh-tight: 0.92; --lh-snug: 1.08; --lh-heading: 1.14; --lh-body: 1.62; --tr-mega: -0.045em; --tr-display: -0.035em; --tr-heading: -0.025em; --tr-body: -0.006em; --tr-mono: 0.06em; --tr-label: 0.14em; /* --- Space (4px base) --------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5.5rem; --s-11: 7.5rem; --s-12: 10rem; /* Tightened: the previous rhythm left large dead bands between sections and a wide empty margin on either side of the content. */ --section-y: clamp(3.25rem, 5.5vw, 6rem); --gutter: clamp(1.15rem, 2.6vw, 2.75rem); --maxw: 92rem; --maxw-text: 46rem; /* --- Radii -------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* --- Motion ------------------------------------------------------------- */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); --e-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-mid: 320ms; --d-slow: 620ms; --z-grain: 60; --z-nav: 80; --z-menu: 90; /* The curtain that covers a language or appearance swap. It was --z-peek, for a hover thumbnail that no longer exists; the layer itself is still needed, above the menu and under the boot curtain. */ --z-wipe: 95; --z-boot: 100; /* The pointer is the top layer, full stop. Above the nav, the menu, the boot curtain and the skip link (--z-boot + 10) — nothing paints over it. */ --z-cursor: 120; } /* -------------------------------------------------------------------------- THE MODE SWITCH. With no attribute, `color-scheme: light dark` above hands the choice to the operating system: a visitor whose machine is in day mode gets day mode, and the page is already correct in the first painted frame. The toggle in the nav writes one of these two attributes on and nothing else — the whole re-skin is the used value of one property. -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* -------------------------------------------------------------------------- Optional alternate identities. Drop `data-identity="…"` on to try one, or just edit the nine pairs above. Nothing else in the codebase changes. Each value is the same light-dark() pair the default identity is, so an alternate identity keeps both modes. -------------------------------------------------------------------------- */ [data-identity="warm"] { --brand-ink: light-dark(#f8f1e8, #0b0705); --brand-surface: light-dark(#fffbf6, #1a100b); --brand-line: light-dark(#e0cdb6, #3a2519); --brand-paper: light-dark(#241408, #f6ece0); --brand-muted: light-dark(#6a4a2c, #b39a86); --brand-accent: light-dark(#8a4a12, #e0a15c); --brand-accent-2: light-dark(#14685a, #7fb69b); --brand-accent-3: light-dark(#a83a2a, #e2705c); --brand-violet: light-dark(#5a3a9c, #b48ad6); } [data-identity="mint"] { --brand-ink: light-dark(#eef8f4, #04100d); --brand-surface: light-dark(#ffffff, #08201a); --brand-line: light-dark(#bfe0d5, #14392f); --brand-paper: light-dark(#06251d, #eaf6f1); --brand-muted: light-dark(#1c5748, #86ab9f); --brand-accent: light-dark(#0a6b4a, #5ef2b0); --brand-accent-2: light-dark(#155c85, #6fd6ff); --brand-accent-3: light-dark(#a8452a, #ff9470); --brand-violet: light-dark(#4a3aa8, #9f8cff); }