/* ============================================================ * NextGen MIS — Design Tokens * ------------------------------------------------------------ * Single source of truth for colour, type, space, motion. * * Architecture: * - Scale tokens (--color-sage-50..900) = raw values * - Semantic tokens (--color-text-default) = intent, alias a scale * * Components should prefer semantic tokens. Reach for scale tokens * only when no semantic alias fits the intent. * * Legacy "do not extend" classes (kept for backwards compat, * NOT to be replicated in new code): * - .mr-5 → 5px right margin (NOT Bootstrap-4 1.5rem) * - .mt-5 → 15px top margin (NOT Bootstrap-4 3rem) * - .ml-5 → 5px left margin (NOT Bootstrap-4 1.5rem) * For new code: use the --space-* scale or Bootstrap-3 utilities. * ============================================================ */ :root { /* ---------- COLOUR — RAW SCALES ---------- */ /* Sage — brand secondary; sidebar, app chrome */ --color-sage-50: #f1f5f2; --color-sage-100: #dde7df; --color-sage-200: #b9cbbf; --color-sage-300: #94ad9c; --color-sage-400: #788f81; --color-sage-500: #6a8073; --color-sage-600: #657e6b; /* anchor — current sidebar */ --color-sage-700: #4d6151; --color-sage-800: #3a4a3e; --color-sage-900: #28332c; /* Amber — brand tertiary; top bar, accents */ --color-amber-50: #fef6ec; --color-amber-100: #fce6c5; --color-amber-200: #f8cb87; --color-amber-300: #f1ab48; --color-amber-400: #e69a2e; --color-amber-500: #de982a; /* anchor — current top bar */ --color-amber-600: #b87715; --color-amber-700: #905c13; --color-amber-800: #6e4612; --color-amber-900: #4f3210; /* Navy — brand primary; CTAs, focus, links */ --color-navy-50: #eef0f7; --color-navy-100: #d8dde9; --color-navy-200: #aeb6cf; --color-navy-300: #828db4; --color-navy-400: #5f6a99; --color-navy-500: #4a5288; --color-navy-600: #3d4479; /* anchor — current themed button */ --color-navy-700: #303661; --color-navy-800: #232849; --color-navy-900: #161a31; /* Rust — brand earth-accent; the active sidebar row, "you are here" emphasis, and any "in-progress / committed" surface. Promoted to a full ramp (was a one-off hex inline at --color-sidebar-bg-active). */ --color-rust-50: #fbeee7; --color-rust-100: #f6dccc; --color-rust-200: #ecb898; --color-rust-300: #d99263; --color-rust-400: #c97140; --color-rust-500: #B6582A; /* anchor — active sidebar row (white text ~4.7:1 AA) */ --color-rust-600: #8f4520; /* darker rail edge variant */ --color-rust-700: #6e351a; --color-rust-800: #4d2412; --color-rust-900: #2e1509; /* Neutral — NEAR-NEUTRAL greys with a FAINT warm lean (R3b 2026-05-21: R3 went fully cool which read cold; dial a little warmth back — R a hair above B, not beige). Drives every surface/border/text token app-wide. */ --color-neutral-0: #ffffff; --color-neutral-50: #f8f8f7; --color-neutral-100: #f1f1ef; --color-neutral-200: #e6e5e2; --color-neutral-300: #d2d0cc; --color-neutral-400: #9e9c97; --color-neutral-500: #72706b; --color-neutral-600: #51504c; --color-neutral-700: #3b3a37; --color-neutral-800: #272624; --color-neutral-900: #181715; /* Status — desaturated to coexist with brand palette */ --color-success-50: #e7f4eb; --color-success-500: #3a8e52; --color-success-700: #1f5c33; --color-warning-50: #fff3df; --color-warning-500: #c47900; --color-warning-700: #7d4d00; --color-danger-50: #fceaec; --color-danger-500: #b73841; --color-danger-700: #842028; --color-info-50: #e6f0fa; --color-info-500: #1f6cc8; --color-info-700: #144887; /* ---------- COLOUR — SEMANTIC ALIASES ---------- */ /* Prefer these in components. */ /* Surfaces */ --color-bg-app: var(--color-neutral-100); /* page background */ --color-bg-surface: var(--color-neutral-0); /* card / portlet body */ --color-bg-raised: var(--color-neutral-50); /* slightly lifted */ --color-bg-sunken: var(--color-neutral-200); /* well / table header */ --color-bg-overlay: rgba(15, 19, 17, 0.55); /* modal scrim */ /* Text */ --color-text-strong: var(--color-neutral-900); --color-text-default: var(--color-neutral-800); --color-text-muted: var(--color-neutral-600); --color-text-faint: var(--color-neutral-500); --color-text-disabled: var(--color-neutral-400); --color-text-inverse: var(--color-neutral-0); --color-text-inverse-muted: rgba(255, 255, 255, 0.82); /* Borders — near-neutral strokes with a faint warm lean (match the neutrals). */ --color-stroke-subtle: #ecebe8; /* hairlines, row separators, dividers */ --color-stroke-default: #e0ded9; /* card borders, input borders (resting) */ --color-stroke-strong: #c9c6c0; /* hover / emphasis / focus-adjacent */ --color-border-subtle: var(--color-stroke-subtle); --color-border-default: var(--color-stroke-default); --color-border-strong: var(--color-stroke-strong); /* List filter pattern — shared boundary colour for BOTH the keyword search box and the filter chips, so the whole bar reads as one consistent unit. The app's default input border (--color-input-border #b5afa3) is only ~2.2:1 on white; a filter chip's only persistent affordance is its own outline (no visible label), so the boundary must clear WCAG 1.4.11 (≥3:1). #8c897f = ~3.4:1 on #fff — also lifts the search box to AA. The chips add a subtle neutral fill so they read as filled controls, distinct from the white search box, while sharing the same border. */ --color-filter-border: #8c897f; /* ~3.4:1 on #fff — AA boundary, shared search + chips */ /* Faint warm tint, kept light on purpose: the placeholder uses text-faint (#72706b); on neutral-100 that was only 4.37:1 (below AA), on neutral-50 it is 4.66:1 (passes 1.4.3). Still reads as a tint vs the white search box. */ --color-chip-bg: var(--color-neutral-50); /* Form inputs — soft near-neutral off-white (faint warm) */ --color-input-bg: #fcfcfb; /* very light off-white */ --color-input-bg-focus: var(--color-neutral-0); --color-input-bg-disabled: var(--color-neutral-100); /* Resting input border softened in two passes — #8a857b (3.6:1) -> #948f85 (3.2:1) -> #a39e93 (~2.75:1) per design intent. The current value sits intentionally BELOW WCAG 1.4.11's strict 3:1 non-text floor: in this system the input is also identified by its label above, the always-visible focus ring on interaction, and a hover state at neutral-500 (~5:1) — affordance step-up actually grows as the resting state softens. Warm undertone (R>B) preserved. */ --color-input-border: #b5afa3; --color-input-border-hover: var(--color-neutral-500); --color-input-border-focus: var(--color-brand-secondary); /* GREEN focus (was navy) */ --color-input-placeholder: var(--color-text-faint); --shadow-input-focus: 0 0 0 3px rgba(101, 126, 107, 0.20); /* sage @ 20% */ /* Brand */ --color-brand-primary: var(--color-navy-600); --color-brand-primary-hover: var(--color-navy-700); --color-brand-primary-active: var(--color-navy-800); --color-brand-primary-soft: var(--color-navy-50); --color-brand-secondary: var(--color-sage-600); --color-brand-secondary-hover: var(--color-sage-700); --color-brand-secondary-active: var(--color-sage-800); --color-brand-secondary-soft: var(--color-sage-50); /* faint green wash — soft active/engaged surfaces */ --color-brand-tertiary: var(--color-amber-500); --color-brand-tertiary-hover: var(--color-amber-600); --color-brand-tertiary-active: var(--color-amber-700); /* Brand earth-accent (rust) — promoted from a sidebar-only one-off hex. Carries the "active / you-are-here" emphasis on the sidebar row. */ --color-brand-rust: var(--color-rust-500); --color-brand-rust-hover: var(--color-rust-600); --color-brand-rust-active: var(--color-rust-700); --color-brand-rust-soft: var(--color-rust-50); /* Links */ /* Links use NAVY (brand primary). navy-600 (#3d4479) = ~9.4:1 on white → AAA. Earlier the link colour was sage-700 (~6.5:1, AA) — moved to navy for better accessibility and to align link/CTA colour with brand primary. */ --color-link: var(--color-brand-primary); --color-link-hover: var(--color-brand-primary-hover); --color-link-visited: var(--color-brand-primary); /* Status */ --color-feedback-success: var(--color-success-700); --color-feedback-success-bg: var(--color-success-50); --color-feedback-warning: var(--color-warning-700); --color-feedback-warning-bg: var(--color-warning-50); --color-feedback-danger: var(--color-danger-700); --color-feedback-danger-bg: var(--color-danger-50); --color-feedback-info: var(--color-info-700); --color-feedback-info-bg: var(--color-info-50); /* Payment-period bands (#1115) — the three kinds of period one payment batch can pay, each an accent-on-wash pair like the status tones above. Their own semantic group, because the money they label is not a *status*: back-pay is neither a warning nor an error, it is a legitimate part of the batch that has to be nameable and tintable everywhere it appears (title pill, summary strip, column band, period tag, table column). Foregrounds are lifted in the dark theme for the same reason the feedback ones are. */ --color-period-selected: var(--color-brand-primary); --color-period-selected-bg: var(--color-brand-primary-soft); --color-period-backpay: var(--color-brand-rust-hover); --color-period-backpay-bg: var(--color-brand-rust-soft); /* A period AFTER the declared window: rare, NOT back-pay, and something someone should look at (#1053) — so it borrows the warning tone rather than minting a third brand accent. */ --color-period-later: var(--color-feedback-warning); --color-period-later-bg: var(--color-feedback-warning-bg); /* One step down each wash, for the hover row. A tinted column has to defeat _data-display.css's `background: transparent !important` on table cells, so it wins over the row's hover state too — without these the tinted columns would be the only ones in the row that do not light up under the pointer, which reads as a rendering fault rather than as emphasis. */ --color-period-selected-bg-hover: var(--color-navy-100); --color-period-backpay-bg-hover: var(--color-rust-100); --color-period-later-bg-hover: color-mix(in srgb, var(--color-warning-50) 82%, var(--color-warning-500)); /* ---------- TYPOGRAPHY ---------- */ /* Families: * - display = Figtree (headings, chrome, sidebar, page titles, buttons) * - ui = Figtree (body, labels, links — same as display for harmony) * - data = Atkinson Hyperlegible (tables, IDs, numerics — max legibility) * - mono = system mono (code, secret tokens) */ --font-family-display: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-ui: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-data: 'Atkinson Hyperlegible', 'Figtree', system-ui, -apple-system, sans-serif; --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Type scale — in ABSOLUTE PX, deliberately. ---------------------------------------------------------------- CRITICAL: Bootstrap 3 sets `html { font-size: 10px }` (see bootstrap.min.css). That means `rem` units resolve against a 10px root, NOT 16px — so `1rem` = 10px here, `0.875rem` = 8.75px, etc. Using rem made every size render at ~62.5% of intent (tiny text). We use px to be immune to the 10px root. The whole Metronic/BS3 app is px-based already, so this is consistent, and browser zoom still scales px fine (WCAG 1.4.4 satisfied via zoom). ---------------------------------------------------------------- Scale trimmed ~10% on 2026-05-19 after the px fix landed at a correct (but slightly large) baseline. Previous values shown in comments. */ --font-size-xs: 12px; /* was 13 — smallest UI text; rare use */ --font-size-sm: 13px; /* was 14 — secondary UI, table cells, dense labels */ --font-size-base: 13.5px; /* was 15 — body default, form controls, sidebar */ --font-size-md: 14.5px; /* was 16 — emphasised body, top bar text */ --font-size-lg: 16px; /* was 18 — card / portlet titles */ --font-size-xl: 18px; /* was 20 — section headers */ --font-size-2xl: 21.5px; /* was 24 — page titles */ --font-size-3xl: 27px; /* was 30 — hero / display */ --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-base: 1.5; --line-height-loose: 1.65; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-uppercase: 0.06em; /* ---------- SPACING (4px base) ---------- */ /* PX for the same reason as the type scale: Bootstrap 3's 10px root would otherwise shrink every rem-based gap to 62.5% of intent. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- BORDER RADIUS ---------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ---------- BORDER WIDTH ---------- */ --border-width-hairline: 1px; --border-width-default: 1px; --border-width-emphasis: 2px; /* ---------- SHADOW ---------- */ --shadow-xs: 0 1px 2px rgba(15, 19, 17, 0.04); --shadow-sm: 0 1px 3px rgba(15, 19, 17, 0.08), 0 1px 2px rgba(15, 19, 17, 0.04); --shadow-md: 0 4px 8px rgba(15, 19, 17, 0.07), 0 2px 4px rgba(15, 19, 17, 0.04); --shadow-lg: 0 12px 24px rgba(15, 19, 17, 0.10), 0 4px 8px rgba(15, 19, 17, 0.05); --shadow-focus: 0 0 0 4px rgba(101, 126, 107, 0.30); /* sage @ 30% (green focus) */ /* Inset / pressed-in feel — used on active nav items (top-level + submenu) to read as "depressed" without resorting to a left-edge accent rail. The visible variant shows up against dark/rust surfaces; the subtle variant keeps the effect barely-there on light/white surfaces. */ --shadow-inset-visible: inset 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-inset-subtle: inset 0 1px 2px rgba(0, 0, 0, 0.08); /* ---------- MOTION ---------- */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasis: cubic-bezier(0.3, 0, 0, 1.05); --ease-decel: cubic-bezier(0, 0, 0.2, 1); /* ---------- FOCUS RING ---------- */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-brand-secondary-hover); /* GREEN focus ring (was navy) */ --focus-ring-color-inverse: var(--color-amber-300); /* ---------- TARGETS (WCAG 2.5.5 / 2.5.8) ---------- */ --target-size-min: 44px; /* AAA recommendation */ --target-size-min-2_2: 24px; /* 2.2 minimum baseline */ /* ---------- Z-INDEX SCALE ---------- */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-sidebar: 1025; --z-topbar: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 10050; /* ---------- LAYOUT SHELL DIMENSIONS ---------- */ /* We OWN these (override Metronic's 68px header / 195px sidebar) so the shell is self-consistent: top bar height, sidebar width, content offset, and footer offset all derive from the same tokens. */ --topbar-height: 60px; --footer-height: 40px; --sidebar-width: 244px; --sidebar-width-collapsed: 72px; --content-padding: var(--space-8); /* 32 px — aligns to the scale + matches dashboard row gutters */ --content-max-width: 1600px; --pane-gap: 14px; /* gap framing the floating content pane */ /* ---------- SIDEBAR (light + contemporary; GREEN as the only highlight) ---------- Sits on the app-grey base ("lower level"); the content pane floats above it. */ --color-sidebar-bg: var(--color-bg-app); /* grey base — merges with the app background */ --color-sidebar-submenu-bg: #e6e5e2; /* darker than the sidebar bg (~neutral-200) — recedes the active submenu row */ --color-sidebar-bg-hover: var(--color-neutral-0); /* white pill hover, pops on the grey */ --color-sidebar-bg-active: var(--color-sage-700); /* green selected row (white text → 6.7:1 AA) */ --color-sidebar-text: var(--color-text-muted); /* inactive label */ --color-sidebar-text-strong: var(--color-text-strong); /* brand wordmark + hover label (dark) */ --color-sidebar-text-faint: var(--color-text-faint); --color-sidebar-icon: var(--color-text-muted); /* inactive icon */ --color-sidebar-divider: var(--color-stroke-default); /* visible but soft on the grey sidebar */ --color-sidebar-rail: var(--color-sage-800); /* darker green edge on the active row */ --color-sidebar-active-fg: #ffffff; /* WHITE text + icons on the green row */ --color-sidebar-border: var(--color-border-default); /* right edge vs content */ /* ---------- TOP BAR ---------- */ --color-topbar-bg: var(--color-neutral-0); --color-topbar-border: var(--color-border-subtle); /* ---------- CARD ELEVATION ---------- */ --card-radius: var(--radius-xl); /* 12px — friendly modern corners */ --card-shadow: none; /* flat: defined by the stroke only (R3c) */ --card-shadow-hover: none; --card-border: 1px solid var(--color-border-default); /* ---------- PROFILE BANNER (detail-view hero) ---------- The record-type signal: navy = Beneficiary (approved/absorbed), amber/ochre = Applicant (under review). No semantic alias exists for a "banner fill", so these reference scale tokens directly. Both gradient stops are kept dark enough that WHITE banner text clears WCAG 2.2 AA: navy-700 → white ~11.5:1, amber-700 → white ~5.6:1. */ --banner-radius: var(--radius-2xl); /* 16px — a hair larger than cards for hero weight */ } /* ============================================================ * DARK THEME — applied via [data-theme="dark"] on * ------------------------------------------------------------ * Foundation pass: re-point SEMANTIC tokens only. The raw scales * above are unchanged; components reference semantics, so the * design-system surfaces (chrome, cards, forms, tables, filters, * dashboards, buttons) flip with this block alone. Tokens that * already alias a surface/text/stroke (e.g. --color-sidebar-bg → * --color-bg-app) follow automatically and are NOT repeated here; * only the values that resolve to a hard light value need flipping. * Brand hues (navy/amber/sage/rust) carry across to dark — only * their light "-soft" washes + the status -bg tints get dark * equivalents. Deep vendor Metronic components are out of scope * (tracked as follow-ups in design.md → Dark theme). * `:root[data-theme]` out-specifies `:root`, so these win. * ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* native scrollbars, form controls, autofill go dark */ /* Surfaces — elevation reads as LIGHTER (app darkest, cards lifted above it) */ --color-bg-app: #161513; --color-bg-surface: #211f1c; --color-bg-raised: #2b2825; --color-bg-sunken: #100f0d; --color-bg-overlay: rgba(0, 0, 0, 0.62); /* Text — inverted warm-neutral lights (strong ≈ 15:1 on the app bg) */ --color-text-strong: #f6f5f3; --color-text-default: #e7e5e1; --color-text-muted: #b4b1ab; --color-text-faint: #918e88; --color-text-disabled: #6d6a65; /* text-inverse stays light — it sits on dark brand fills (navy/amber/rust) */ /* Borders — subtle light-on-dark strokes (card/sidebar/divider aliases follow) */ --color-stroke-subtle: #2a2724; --color-stroke-default: #38352f; --color-stroke-strong: #4c473f; /* Filter pattern — boundary ≥3:1 against the dark chip/search fills (4.6:1) */ --color-filter-border: #938f85; --color-chip-bg: #2a2825; /* Form inputs */ --color-input-bg: #1b1a17; --color-input-bg-focus: #211f1c; --color-input-bg-disabled: #161513; --color-input-border: #45413a; --color-input-border-hover: #7c7669; /* clearer hover step-up on dark */ /* input-border-focus inherits sage-600 from :root (3.9:1 on the dark field) */ /* Links + focus — navy-600 / sage-700 are dark and fail on dark surfaces; lift to light scale steps so links clear AA (≥5:1) and the focus indicator clears the 3:1 non-text minimum (≥6.8:1) with a glow that's actually visible. */ --color-link: var(--color-navy-300); /* ~5:1 on cards */ --color-link-hover: var(--color-navy-200); --color-link-visited: var(--color-navy-300); --focus-ring-color: var(--color-sage-300); --shadow-focus: 0 0 0 4px rgba(148, 173, 156, 0.45); /* sage-300 glow */ --shadow-input-focus: 0 0 0 3px rgba(148, 173, 156, 0.35); /* Brand soft washes — dark tints of the hue (the light -50 washes would glare) */ --color-brand-primary-soft: #1d2138; --color-brand-secondary-soft: #1e2a22; --color-brand-rust-soft: #2e1c12; /* Status — dark tinted fills + lifted foregrounds so text clears AA on them */ --color-feedback-success: #6cc287; --color-feedback-success-bg: #16271b; --color-feedback-warning: #e0a93e; --color-feedback-warning-bg: #2a2110; --color-feedback-danger: #e8737c; --color-feedback-danger-bg: #2a1416; --color-feedback-info: #5aa8e8; --color-feedback-info-bg: #122334; /* Payment-period bands — only the two brand-accent FOREGROUNDS need flipping: navy-600 and rust-600 are dark hues that disappear on their own dark washes. The washes themselves alias *-soft, and the `later` pair aliases the warning tone, so all three follow the overrides above. */ --color-period-selected: var(--color-navy-200); --color-period-backpay: var(--color-rust-200); /* The hover washes are hardcoded light values above, so they flip here. */ --color-period-selected-bg-hover: #262b45; --color-period-backpay-bg-hover: #3d2517; --color-period-later-bg-hover: #3a2d16; /* Sidebar — only the two HARDCODED light values need flipping; the rest alias surfaces/text/strokes and follow. The active "you-are-here" row carries across. */ --color-sidebar-submenu-bg: #15140f; /* recedes below the dark sidebar bg */ --color-sidebar-bg-hover: #2b2825; /* lifted pill on hover (was white) */ /* Top bar (was white) */ --color-topbar-bg: #1b1a17; /* Elevation reads deeper on dark */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.45); }