/* ============================================================ * 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); /* ---------- 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; /* 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); }