/* ============================================================================ BAHREX HUB — Design Tokens ---------------------------------------------------------------------------- Single source of truth for colour, type, space, radius, elevation and motion. Every other stylesheet consumes these; none may redefine them. Derived from the company logo: gold #fcc40c (--gold-400) charcoal #2c2c2c (--ink-800) Governing rule: INK ACTS, GOLD INDICATES. Ink carries text, buttons and structure. Gold marks what is active, focused, selected or urgent. Gold measures 1.7:1 on white and therefore NEVER carries text or thin icons on a light surface. On --ink-900 it measures 10.4:1 and is safe. Anything not on the six-size type scale is a bug. State is never encoded by colour alone. ========================================================================== */ :root { /* -------------------------------------------------------------------------- BRAND — GOLD (accent) 400 is the logo colour. 700+ are the only shades safe for text on white. -------------------------------------------------------------------------- */ --gold-50: #fff9e6; --gold-100: #fef0c0; --gold-200: #fde28a; --gold-300: #fdd44f; --gold-400: #fcc40c; /* logo */ --gold-500: #e0ab00; --gold-600: #b88b00; --gold-700: #8a6800; /* 5.6:1 on white — lowest gold safe for text */ --gold-800: #5c4500; /* -------------------------------------------------------------------------- BRAND — INK (text, surfaces, actions) Warm greys, biased toward the gold. A cold slate grey beside #fcc40c reads as an accident; these read as chosen. -------------------------------------------------------------------------- */ --ink-900: #1a1a1a; /* 16.9:1 — headings, key values */ --ink-800: #2c2c2c; /* 14.0:1 — logo charcoal; body, primary buttons */ --ink-700: #3d3b38; --ink-600: #4a4844; /* 8.9:1 */ --ink-500: #6e6b64; /* 5.4:1 — lowest ink safe for body text */ --ink-400: #8c8a84; /* 3.5:1 — icons and borders ONLY, never body text */ --ink-300: #b5b2ab; --ink-200: #d8d5ce; /* default border */ --ink-100: #e8e6e1; /* hairline / divider */ --ink-50: #f4f3f0; /* subtle fill */ --canvas: #faf9f7; /* flat app background */ --surface: #ffffff; /* card / panel background */ /* The app canvas: a warm light field with a gold radial tint in the upper left. This is part of the brand identity — keep it. */ --canvas-bg: radial-gradient(circle at 18% 18%, rgba(252, 196, 12, 0.08), transparent 25rem), linear-gradient(135deg, #f8f8f6 0%, #ececea 54%, #f7f7f4 100%); /* The charcoal bar surface. Single source of truth: the app bar in shell.css and the dashboard's rank-1 module tile both read this, so the tile cannot drift away from the bar it is supposed to match. */ --bar-surface: linear-gradient(145deg, #3a3a38, var(--ink-800)); /* Foreground for the app bar and rail. The chrome is dark in BOTH themes, so its text colour is a constant - using --surface here would flip to dark and make the bar's own text invisible. */ --bar-fg: #ffffff; /* Text placed ON gold. Gold is identical in both themes, so its foreground is a constant too — --ink-900 would flip light in dark mode and disappear against the badge it sits on. */ --on-gold: #1a1a1a; /* FORM FIELDS An editable field sits ABOVE the surface it is on; a disabled or read-only field sits BELOW it. That is what keeps the two distinguishable once both are dark: the difference is depth, not just a lighter grey. Here in the light theme it reads the familiar way — a white field, a grey disabled one. */ --field-bg: #ffffff; --field-disabled-bg: var(--ink-100); --field-disabled-fg: var(--ink-500); /* -------------------------------------------------------------------------- SEMANTIC Meaning only. Never decorative, never a brand colour. Full 50/100/200/500/600/700/800 ramps: the -200 and -800 steps are consumed by existing rules but were never defined, so they silently resolved to nothing. Defining them here repairs that. -------------------------------------------------------------------------- */ --ok-50: #f1faf3; --ok-100: #dcf2e2; --ok-200: #bbe5c6; --ok-500: #15803d; --ok-600: #15803d; --ok-700: #116430; --ok-800: #0d4d25; --ok: #15803d; --ok-bg: #f1faf3; --ok-bd: #bbe5c6; --warn-50: #fdf8ec; --warn-100: #faedcf; --warn-200: #f2ddab; --warn-500: #b45309; --warn-600: #b45309; --warn-700: #8f4207; --warn-800: #6b3105; --warn: #b45309; --warn-bg: #fdf8ec; --warn-bd: #f2ddab; --bad-50: #fdf3f3; --bad-100: #fadede; --bad-200: #f0c4c4; --bad-500: #b91c1c; --bad-600: #b91c1c; --bad-700: #991717; --bad-800: #7a1212; --bad: #b91c1c; --bad-bg: #fdf3f3; --bad-bd: #f0c4c4; --info-50: #f1f5fd; --info-100: #dde7fa; --info-200: #c3d3f5; --info-500: #1d4ed8; --info-600: #1d4ed8; --info-700: #1740b0; --info-800: #12328a; --info: #1d4ed8; --info-bg: #f1f5fd; --info-bd: #c3d3f5; /* -------------------------------------------------------------------------- TYPE — Arial, 16px base Six sizes. Three weights. Nothing else. -------------------------------------------------------------------------- */ --font-sans: Arial, Helvetica, sans-serif; --font-mono: Consolas, "Courier New", monospace; --fs-micro: 12px; /* labels, badges, metadata */ --fs-body: 13px; /* BASE — body, tables, fields, card data */ --fs-md: 15px; /* card titles, dialog titles, section headings */ --fs-lg: 18px; /* panel titles */ --fs-xl: 22px; /* module titles */ --fs-2xl: 27px; /* page titles, KPI values */ /* iOS zooms the viewport when a focused input is under 16px. This is a functional guard, not a style choice — do not put it on the scale. */ --fs-ios-safe: 16px; /* DISPLAY — large numerals only. A deliberate second scale, not an escape hatch for oversized text. Permitted use: KPI figures, dashboard tile values, the login mark. Forbidden use: headings, labels, body copy, buttons — those stay on --fs-*. Rationale: a KPI value is read as data at a glance, not as prose. Clamping it to --fs-2xl flattens the dashboard hierarchy. */ --display-sm: 26px; --display-md: 32px; --display-lg: 40px; --display-xl: 48px; --fw-normal: 400; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-base: 1.45; --lh-loose: 1.6; --ls-label: 0.08em; /* uppercase micro-labels need tracking to hold at 10px */ --ls-tight: -0.02em; /* large headings only */ /* -------------------------------------------------------------------------- SPACE — 4px grid -------------------------------------------------------------------------- */ --s1: 2px; --s2: 4px; --s3: 6px; --s4: 8px; --s5: 12px; --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 40px; /* -------------------------------------------------------------------------- FORM — radius, borders, control sizing -------------------------------------------------------------------------- */ --r-sm: 2px; --r-md: 3px; /* default control radius */ --r-lg: 4px; /* panels, tables */ --r-xl: 6px; /* cards, dialogs */ --r-pill: 999px; --bw: 1px; --bd: var(--bw) solid var(--ink-200); --bd-hair: var(--bw) solid var(--ink-100); --control-h: 26px; /* buttons, inputs, selects */ --control-h-sm: 22px; --icon-btn: 24px; --appbar-h: 76px; --touch-min: 44px; /* accessibility floor for touch targets */ /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --page-max: 1400px; --page-pad: var(--s7); /* -------------------------------------------------------------------------- ELEVATION Restrained on purpose. A list of 24 cards must not read as 24 shadows. -------------------------------------------------------------------------- */ --sh-sm: 0 1px 2px rgba(26, 26, 26, 0.06); --sh-md: 0 2px 8px rgba(26, 26, 26, 0.10); --sh-lg: 0 10px 30px -8px rgba(26, 26, 26, 0.22); --scrim: rgba(26, 26, 26, 0.34); /* -------------------------------------------------------------------------- FOCUS — one ring, everywhere, gold -------------------------------------------------------------------------- */ --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-400); --ring-inset: inset 0 0 0 2px var(--gold-400); /* -------------------------------------------------------------------------- MOTION -------------------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* -------------------------------------------------------------------------- LAYERING -------------------------------------------------------------------------- */ --z-ambient: 0; --z-base: 1; --z-sticky: 10; --z-dropdown: 100; --z-scrim: 900; --z-modal: 1000; --z-toast: 1100; /* -------------------------------------------------------------------------- AMBIENT BACKGROUND Toned down per decision: a faint static grid only. The cursor-follow glow, scanline sweep and floating zones are removed. Idle/screensaver BEHAVIOUR is unaffected — this controls appearance only. -------------------------------------------------------------------------- */ --ambient-grid-line: rgba(44, 44, 44, 0.04); --ambient-grid-size: 48px; /* -------------------------------------------------------------------------- DERIVED — calendar and badge surfaces Semantic aliases used across the time, personal and projects modules. -------------------------------------------------------------------------- */ --cal-bg-day: var(--ink-50); --cal-bg-weekday: var(--ink-100); --cal-text-weekday: var(--ink-500); --cal-bg-holiday: var(--bad-100); --cal-text-holiday: var(--bad-700); --cal-bg-has-due: var(--gold-50); --cal-bg-has-due-today: var(--gold-100); --cal-weeknum: var(--ink-500); --badge-base-bg: var(--ink-50); --badge-base-color: var(--ink-700); } /* ============================================================================ DARK THEME Implemented purely by restating token VALUES. Every consumer in the app - 6,000+ var() references across CSS, JS and PHP - already reads these names, so nothing downstream changes. The ink ramp is INVERTED rather than darkened. It is consumed as "distance from the page background": --ink-900 is the strongest text, --ink-50 the faintest fill. Flipping the ramp and the surface therefore carries every existing rule across without edits - a card that was --surface with --ink-900 text stays correct, and a --ink-50 fill stays one step off the background. The semantic ramps flip the same way: --ok-700 is text (light here, dark in the light theme) and --ok-bg / --ok-50 is a tint (dark here, light there). ========================================================================== */ :root[data-theme="dark"], [data-theme="dark"] { /* Gold keeps its identity: 400 is the logo and reads well on dark. Only the tints flip, because they are used as fills rather than as ink. */ --gold-50: #2a2205; --gold-100: #3a2f07; --gold-200: #55450b; --gold-300: #a37f06; --gold-400: #fcc40c; /* logo — unchanged in both themes */ --gold-500: #ffd23f; --gold-600: #ffdd6e; --gold-700: #ffe89c; /* lowest gold safe for text on dark */ --gold-800: #fff2c6; /* Inverted ink ramp. Ratios are against --surface below. */ --ink-900: #f4f3f0; /* 15.9:1 — headings, key values */ --ink-800: #e6e4df; /* 13.9:1 — body text; primary button fill */ --ink-700: #cfccc5; --ink-600: #b0aca4; /* 7.7:1 */ --ink-500: #918d85; /* 5.2:1 — lowest ink safe for body text */ --ink-400: #726e68; /* 3.3:1 — icons and borders ONLY */ --ink-300: #575350; --ink-200: #3e3b37; /* default border */ --ink-100: #302d2a; /* hairline / divider */ --ink-50: #262421; /* subtle fill */ --canvas: #141312; --surface: #1c1a18; /* The gold radial tint is brand identity and stays; the field beneath it becomes the dark canvas. */ --canvas-bg: radial-gradient(circle at 18% 18%, rgba(252, 196, 12, 0.07), transparent 25rem), linear-gradient(135deg, #131211 0%, #0e0d0c 54%, #141312 100%); /* The bar stays the darkest surface so it still reads as chrome. */ --bar-surface: linear-gradient(145deg, #131211, #0d0c0b); --bar-fg: #ffffff; /* constant: the chrome is dark in both themes */ --on-gold: #1a1a1a; /* constant: gold is the same colour in both themes */ /* Same rule as the light theme, inverted: the editable field is lifted one step off the surface, the disabled one drops below it onto the canvas. A disabled field is therefore recognisable by depth in either theme, rather than by being "the grey one". */ --field-bg: var(--ink-50); --field-disabled-bg: var(--canvas); --field-disabled-fg: var(--ink-500); /* Semantic: foreground steps lighten, tint steps darken. */ --ok-50: #10231a; --ok-100: #16311f; --ok-200: #1f4a2e; --ok-500: #4ac47e; --ok-600: #57cf89; --ok-700: #7ee2a8; --ok-800: #a5eec4; --ok: #7ee2a8; --ok-bg: #10231a; --ok-bd: #1f4a2e; --warn-50: #2a1f0d; --warn-100: #3a2b11; --warn-200: #55401a; --warn-500: #e0a33a; --warn-600: #eab04a; --warn-700: #f2c368; --warn-800: #f7dca6; --warn: #eab04a; --warn-bg: #2a1f0d; --warn-bd: #55401a; --bad-50: #2b1414; --bad-100: #3b1a1a; --bad-200: #572626; --bad-500: #ef6f6f; --bad-600: #f38080; --bad-700: #ff9b93; --bad-800: #ffbdb7; --bad: #f38080; --bad-bg: #2b1414; --bad-bd: #572626; --info-50: #121c2e; --info-100: #17253d; --info-200: #21385c; --info-500: #6ea8fe; --info-600: #7db3ff; --info-700: #9cc5ff; --info-800: #bcd8ff; --info: #7db3ff; --info-bg: #121c2e; --info-bd: #21385c; /* Elevation reads by depth, not by tint: a light-theme shadow built from ink is invisible here, so these are black at a higher alpha. */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --sh-md: 0 2px 8px rgba(0, 0, 0, 0.50); --sh-lg: 0 10px 30px -8px rgba(0, 0, 0, 0.65); --scrim: rgba(0, 0, 0, 0.58); /* The faint grid has to be lighter than its field, not darker. */ --ambient-grid-line: rgba(255, 255, 255, 0.05); /* Derived surfaces follow the ramp above, but the calendar's holiday and due-date tints are stated explicitly so they stay legible rather than inheriting a light-theme fill. */ --cal-bg-day: var(--ink-50); --cal-bg-weekday: var(--ink-100); --cal-text-weekday: var(--ink-500); --cal-bg-holiday: var(--bad-100); --cal-text-holiday: var(--bad-700); --cal-bg-has-due: var(--gold-50); --cal-bg-has-due-today: var(--gold-100); --cal-weeknum: var(--ink-500); --badge-base-bg: var(--ink-50); --badge-base-color: var(--ink-700); }