/* ========================================================================== LaQuest Payroll — Design Tokens (v2) Single source of truth for colour, type, space, radius, shadow, and motion. Derived from: LaQuest-UX-Audit-and-Design-System.md, section 6. v2 revision · Build 110+ · 17 July 2026 What changed in v2: - Typography is Inter-only across the whole product, including money and statutory IDs. IBM Plex Mono is removed. Numerals use tabular-nums via Inter's own tabular figure set — see the --lq-num note below. - Added a systematic multi-colour layer: per-nav-section accents and per-pay-type-family colours, layered on top of (not replacing) the existing semantic + payroll-status colours. Colour still carries meaning only — never decorative, never the sole state indicator. Usage: Toggle dark mode by setting (or "light"). If no data-theme is set, the light palette applies by default; a prefers-color-scheme fallback is provided for first-paint correctness. Do not hardcode hex/px values in components — reference these variables so the token file remains the only place values are changed. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. TYPOGRAPHY Family: Inter, everywhere — UI text, money, statutory IDs, everything. No monospace face. Inter ships tabular (lining) figures via OpenType features, so numerals still align in tables/columns without a mono font. Fraunces is reserved for marketing surfaces only — never used inside the application shell. --lq-num: apply wherever a monospace/tabular treatment was previously reached for (money, IDs, counters). It sets font-variant-numeric: tabular-nums on the existing Inter stack — do NOT swap in a mono font. .amount { font-family: var(--lq-font-ui); font-variant-numeric: var(--lq-num); } A ready-made utility class is provided at the bottom of this file: .lq-tabular-nums. ------------------------------------------------------------------------ */ --lq-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lq-font-marketing: "Fraunces", Georgia, serif; /* marketing pages only, never app UI */ --lq-num: tabular-nums; /* use via font-variant-numeric: var(--lq-num); see note above */ /* Type scale — COMPACT enterprise density (retuned down from the airy scale; more info per screen, still readable). rem @ 16px root. */ --lq-text-display: 1.75rem; /* 28px (was 36) */ --lq-text-h1: 1.375rem; /* 22px (was 28) */ --lq-text-h2: 1.125rem; /* 18px (was 22) */ --lq-text-h3: 1rem; /* 16px (was 18) */ --lq-text-body: 0.9375rem; /* 15px (was 16) */ --lq-text-small: 0.8125rem; /* 13px (was 14) */ --lq-text-caption: 0.6875rem; /* 11px (was 12) */ /* Weights */ --lq-weight-regular: 400; /* body copy */ --lq-weight-medium: 500; /* labels, table headers */ --lq-weight-semibold: 600; /* headings, CTAs */ --lq-weight-bold: 700; /* rare emphasis only */ /* Line-height — tightened for compact density */ --lq-leading-heading: 1.2; --lq-leading-body: 1.45; /* compact (was 1.6 airy) */ /* Letter-spacing — large headings only (Display / H1) */ --lq-tracking-tight: -0.02em; --lq-tracking-normal: 0; /* ------------------------------------------------------------------------ 2. COLOUR — INK / TEXT ------------------------------------------------------------------------ */ --lq-ink-primary: #12131A; /* body text, headings — warm ink, never pure black */ /* A11y (WCAG 2.1 AA): every INK tier used for real text must clear 4.5:1 on the light app canvas AND on the pale gradient/tint bands. Previous secondary #697086 (~4.1:1 on tints) and muted #9CA0A6 (~2.6:1) failed; darkened below. */ --lq-ink-secondary: #454C5E; /* supporting text, labels — warm gray, AA on tints */ --lq-ink-muted: #697086; /* meta, section labels — AA (was #9CA0A6) */ --lq-ink-subtle: #697086; /* smallest meta labels (co-meta, stat labels) — AA */ --lq-ink-2: #454C5E; /* alias tier used by dashboard/get-started tags */ --lq-ink-3: #697086; /* alias tier used by timeline nodes / plan labels */ --lq-ink-inverse: #FFFFFF; /* text on dark/accent fills */ /* Brand accent — COBALT is the SINGLE brand + action colour (Glean model): primary buttons/CTAs, links, active nav, the primary metric ring, key data highlights, headlines. Everything else is neutral (ink / warm gray). NO warm colour in the UI chrome — all warmth lives in the expressive gradient below. */ --lq-accent: #1e36c9; /* APPROVED page 4 — primary actions, links, focus */ --lq-accent-hover: #1a2fb0; --lq-accent-active: #16279a; --lq-accent-tint: #e9ecfb; /* APPROVED page 4 — highlighted panels, hovered data rows */ /* Light blue — the SECOND tone of every duotone icon (approved page 4). The stroke is --lq-accent-light; the fill behind it is --lq-accent-light-tint. Never used as text. */ --lq-accent-light: #41529f; --lq-accent-light-tint: #c9d5f7; /* EXPRESSIVE — imagery & gradients ONLY, never UI chrome or text. This is the ONLY place warm tones (incl. saffron #FF671F family) appear: the lavender→sand bridge on the payroll-period/hero card and marketing imagery. */ --lq-period-grad-start: #C9C4F2; /* soft lavender */ --lq-period-grad-end: #FBD9C2; /* warm sand */ --lq-period-fg: var(--lq-ink-primary); /* dark ink on the light gradient */ --lq-period-fg-muted: var(--lq-ink-secondary); --lq-period-border: rgba(22, 24, 31, 0.08); /* Surfaces — soft pale-blue app canvas (cobalt-tied), white cards floating on it, cool cobalt-tinted hairlines that match the blue background. */ --lq-surface-card: #FFFFFF; /* elevated cards, modals, popovers — float on the blue */ --lq-surface-app: #F2F5FC; /* soft pale-blue app canvas */ --lq-surface-subtle: #EAEFFA; /* subtle cobalt-tinted fills, table zebra, chips */ --lq-border: #E1E6F1; /* cool cobalt-tinted hairline borders, dividers */ --lq-border-strong: #C6CEE0; /* emphasised cobalt-tinted borders (table rules) */ /* ═══ SEMANTIC — APPROVED PAGE 4 (Colour & tokens) ═══════════════════════════════════ The approved palette separates the FILL hue from the TEXT hue in every family, because a hue bright enough to read as a fill is never dark enough to read as body text. So each family carries four roles and each role has exactly one job: --lq-X FILL — dots, bars, icons, chart series, badge and banner backgrounds --lq-X-text TEXT — any glyph on the tint. Verified >= 4.5:1 (WCAG AA). --lq-X-deep SOLID — the only tone allowed under WHITE text. Verified >= 4.5:1. --lq-X-tint WASH — 8% of the fill over white, the approved soft wash --lq-X-border HAIRLINE — 26% of the fill over white Never set `color:` to a bare --lq-success / --lq-warning / --lq-danger. Use the -text token. The test suite fails the build if a stylesheet does. */ --lq-success: #10b981; /* APPROVED fill — success */ --lq-success-text: #0b7d5c; /* APPROVED text — 4.74:1 on the tint */ /* Completed lifecycle stages read in DARK green (approved 2026-08-17): the emerald success tone stays for status chips; the deep tone marks a stage that is finished, and is the only green that may sit under white text (5.5:1). */ --lq-success-deep: #0e6b47; --lq-success-deep-t:rgba(14,107,71,.16); --lq-success-tint: #ecf9f5; --lq-success-border:#c1edde; --lq-warning: #f0a12e; /* APPROVED fill — review / attention */ --lq-warning-tint: #fef7ee; --lq-warning-border:#fbe7c9; /* The ONE deviation from the approved swatch, and it is deliberate. The approved amber text #a8690f measures 4.10:1 on this wash and 4.31:1 on the lightest wash we could justify — below the 4.5:1 AA floor at every tint, so it cannot carry badge text. #9d6210 is the same ochre one step darker and reaches 4.72:1. Revert to #a8690f only if design match is preferred over AA on amber status text. */ --lq-warning-text: #9d6210; --lq-warning-deep: #9c691e; /* white on amber, 4.72:1 */ --lq-danger: #ef6b6b; /* APPROVED fill — blocking */ --lq-danger-text: #c04747; /* APPROVED text — 4.57:1 on the tint */ --lq-danger-deep: #b35050; /* white on red, 5.02:1 */ --lq-danger-tint: #fef3f3; --lq-danger-border: #fbd9d9; --lq-info: #1e36c9; /* brand blue */ --lq-info-tint: #edeffb; --lq-info-border: #c5cbf1; /* Neutral (approved page 4) — the grey that is a decision, not an absence of one. */ --lq-neutral: #5c6270; /* 6.11:1 on white, 5.65:1 on its own tint */ --lq-neutral-tint: #f4f6fb; /* Soft pink wash (approved page 4) — WARMTH ONLY. Never a status, never a figure background, never text. Money is always ink; figures always sit on white. */ --lq-pink-wash: #fdf4f7; /* Payroll run-status colours (badges, pipeline stages, chips). Status colours keep their meaning: computed=cobalt, approved=green, blocked=amber, rejected=red. */ --lq-status-draft: #697086; /* warm gray */ --lq-status-draft-tint: #EFEBE2; --lq-status-computed: #2A3AD6; /* cobalt */ --lq-status-computed-tint:#E9ECFC; --lq-status-approved: #149063; /* emerald */ --lq-status-approved-tint:#E4F3EC; --lq-status-blocked: #DDA23C; /* amber — "blocked / anomaly" */ --lq-status-blocked-tint: #FBF1DF; --lq-status-rejected: #CE313C; /* red */ --lq-status-rejected-tint:#FCEAEB; --lq-status-posted: #12131A; /* ink */ --lq-status-posted-tint: #EFEBE2; /* ------------------------------------------------------------------------ 2b. NAV-SECTION ACCENTS One accent per top-level nav domain. Used for the active nav-item indicator, section headers, section-scoped icons, and the left rule on cards that belong to that domain. Disciplined, not decorative — a given colour must always point back to the same section anywhere in the product. ------------------------------------------------------------------------ */ /* Rainbow dropped (decision): the active nav item is COBALT across every functional domain; inactive items are warm-neutral (via the ink tokens). Settings/system stays a quiet warm-gray. Disciplined, not decorative. */ --lq-nav-payroll: #2A3AD6; --lq-nav-payroll-tint: #E9ECFC; --lq-nav-inputs: #2A3AD6; --lq-nav-inputs-tint: #E9ECFC; --lq-nav-compliance: #2A3AD6; --lq-nav-compliance-tint:#E9ECFC; --lq-nav-configuration: #2A3AD6; --lq-nav-configuration-tint: #E9ECFC; /* ------------------------------------------------------------------------ 2c. PAY-TYPE FAMILY COLOURS Every pay item in the system belongs to exactly one family. These colours drive pay-type chips/badges on payslips, the pay-type catalog, and the run breakdown — so an officer can tell an item's tax/statutory treatment at a glance, before reading the label. ------------------------------------------------------------------------ */ /* Aligned to the disciplined scheme: earnings + allowances are the COBALT family (kept distinct by shade); de-minimis=green, statutory=amber, deduction=red carry their semantic meaning. */ --lq-pay-earnings: #2A3AD6; /* basic pay, regular earnings — cobalt */ --lq-pay-earnings-tint: #E9ECFC; --lq-pay-allowance: #4A57D9; /* taxable allowances — cobalt family; darkened so it passes AA as pill text */ --lq-pay-allowance-tint: #ECEEFB; --lq-pay-de-minimis: #149063; /* de minimis, non-taxable — green */ --lq-pay-de-minimis-tint: #E4F3EC; --lq-pay-statutory: #DDA23C; /* SSS / PhilHealth / Pag-IBIG / withholding tax — amber */ --lq-pay-statutory-tint: #FBF1DF; --lq-pay-deduction: #CE313C; /* loans, negative adjustments, other deductions — red */ --lq-pay-deduction-tint: #FCEAEB; /* ------------------------------------------------------------------------ 3. SPACING — 4px base unit ------------------------------------------------------------------------ */ /* Spacing — small steps kept (component internals), larger steps tightened for compact density (less section whitespace, more per screen). */ --lq-space-1: 0.25rem; /* 4px */ --lq-space-2: 0.4375rem;/* 7px (was 8) */ --lq-space-3: 0.625rem; /* 10px (was 12) */ --lq-space-4: 0.875rem; /* 14px (was 16) */ --lq-space-5: 1rem; /* 16px (was 20) */ --lq-space-6: 1.25rem; /* 20px (was 24) */ --lq-space-8: 1.625rem; /* 26px (was 32) */ --lq-space-12: 2.25rem; /* 36px (was 48) */ --lq-space-16: 3rem; /* 48px (was 64) */ /* ------------------------------------------------------------------------ 4. RADIUS ------------------------------------------------------------------------ */ --lq-radius-sm: 0.5rem; /* 8px — inputs, buttons */ --lq-radius-md: 0.75rem; /* 12px — cards */ --lq-radius-lg: 1rem; /* 16px — large surfaces, modals */ --lq-radius-pill: 999px; /* pills, status badges */ /* ------------------------------------------------------------------------ 5. SHADOWS — use sparingly; borders do most of the work ------------------------------------------------------------------------ */ /* Soft, low, warm-ink shadows — cards FLOAT on the off-white rather than lean on borders (Glean-airy). */ --lq-shadow-sm: 0 1px 2px rgba(22, 24, 31, 0.04), 0 8px 20px -14px rgba(22, 24, 31, 0.12); --lq-shadow-md: 0 4px 12px -6px rgba(22, 24, 31, 0.08), 0 18px 40px -20px rgba(22, 24, 31, 0.14); --lq-shadow-lg: 0 24px 60px -24px rgba(22, 24, 31, 0.20); /* ------------------------------------------------------------------------ 6. MOTION ------------------------------------------------------------------------ */ --lq-duration-fast: 150ms; --lq-duration-base: 200ms; --lq-duration-slow: 250ms; --lq-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* ------------------------------------------------------------------------ 7. FOCUS RING (accessibility — WCAG 2.1 AA, always visible) ------------------------------------------------------------------------ */ --lq-focus-ring-color: #2A3AD6; --lq-focus-ring-width: 2px; --lq-focus-ring-offset: 2px; /* ------------------------------------------------------------------------ 8. GRID / LAYOUT ------------------------------------------------------------------------ */ --lq-grid-max-width: 1440px; /* widened from 1280 so content uses more of the available width on large monitors */ --lq-grid-max-width-min: 1360px; --lq-grid-gutter: 24px; --lq-page-padding: 24px; --lq-page-padding-mobile: 16px; /* ------------------------------------------------------------------------ 9. BREAKPOINTS (reference values — use in media queries directly, custom properties cannot be used inside @media conditions) mobile: ≤640px · tablet: 641–1024px · desktop: ≥1025px ------------------------------------------------------------------------ */ } /* ========================================================================== DARK MODE Applied via [data-theme="dark"] on or . Surfaces invert, accent is preserved for brand continuity, text lifts for contrast. ========================================================================== */ [data-theme="dark"] { --lq-ink-primary: #EDF0F7; --lq-ink-secondary: #AEB4C8; --lq-ink-muted: #7E8598; --lq-ink-inverse: #FFFFFF; /* text on cobalt accent fills */ /* Brand cobalt, lifted just enough for AA on dark surfaces. Stays clearly BLUE (not periwinkle/violet), and the tint is the SAME hue at low alpha. */ --lq-accent: #4C6BF5; --lq-accent-hover: #6683FF; --lq-accent-active: #3A55D8; --lq-accent-tint: rgba(76, 107, 245, 0.16); /* Period card — deep cobalt-navy gradient (white text). No violet drift. */ --lq-period-grad-start: #22346E; --lq-period-grad-end: #33468C; --lq-period-fg: #FFFFFF; --lq-period-fg-muted: rgba(255, 255, 255, 0.82); --lq-period-border: rgba(255, 255, 255, 0.10); /* Layered graphite: near-black canvas -> card -> raised, with defined borders. */ --lq-surface-card: #161A24; --lq-surface-app: #0A0C12; --lq-surface-subtle: #1F2536; --lq-border: #2A3142; --lq-border-strong: #3B4458; --lq-success: #3FCE93; --lq-success-deep: #2FA97A; --lq-success-deep-t: rgba(47, 169, 122, 0.20); --lq-success-tint: rgba(63, 206, 147, 0.15); --lq-success-border: rgba(63, 206, 147, 0.34); --lq-warning: #E8B655; --lq-warning-tint: rgba(232, 182, 85, 0.15); --lq-warning-border: rgba(232, 182, 85, 0.34); --lq-danger: #F26D75; --lq-danger-tint: rgba(242, 109, 117, 0.15); --lq-danger-border: rgba(242, 109, 117, 0.34); --lq-info: #4C6BF5; --lq-info-tint: rgba(76, 107, 245, 0.16); --lq-info-border: rgba(76, 107, 245, 0.38); --lq-status-draft: #AEB4C8; --lq-status-draft-tint: rgba(174, 185, 204, 0.14); --lq-status-computed: #6683FF; --lq-status-computed-tint: rgba(76, 107, 245, 0.16); --lq-status-approved: #3FCE93; --lq-status-approved-tint: rgba(63, 206, 147, 0.14); --lq-status-blocked: #E8B655; --lq-status-blocked-tint: rgba(232, 182, 85, 0.14); --lq-status-rejected: #F26D75; --lq-status-rejected-tint: rgba(242, 109, 117, 0.14); --lq-status-posted: #EDF0F7; --lq-status-posted-tint: rgba(237, 240, 247, 0.12); /* Nav-section accents — single cobalt identity (Glean model), tints now MATCH the foreground hue (previously leftover teal/amber/purple mismatches). */ --lq-nav-payroll: #7C90FF; --lq-nav-payroll-tint: rgba(76, 107, 245, 0.16); --lq-nav-inputs: #7C90FF; --lq-nav-inputs-tint: rgba(76, 107, 245, 0.16); --lq-nav-compliance: #7C90FF; --lq-nav-compliance-tint: rgba(76, 107, 245, 0.16); --lq-nav-configuration: #7C90FF; --lq-nav-configuration-tint: rgba(76, 107, 245, 0.16); /* Pay-type family — earnings/allowance stay in the cobalt family (distinct lightness), the semantic three keep their green / amber / red meaning. */ --lq-pay-earnings: #7C90FF; --lq-pay-earnings-tint: rgba(76, 107, 245, 0.16); --lq-pay-allowance: #9AA6FF; --lq-pay-allowance-tint: rgba(154, 166, 255, 0.16); --lq-pay-de-minimis: #3FCE93; --lq-pay-de-minimis-tint: rgba(63, 206, 147, 0.14); --lq-pay-statutory: #E8B655; --lq-pay-statutory-tint: rgba(232, 182, 85, 0.14); --lq-pay-deduction: #F26D75; --lq-pay-deduction-tint: rgba(242, 109, 117, 0.14); --lq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --lq-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.58); --lq-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.72); --lq-focus-ring-color: #6683FF; } /* First-paint fallback for users with OS-level dark mode and no explicit data-theme set yet. Explicit [data-theme] always wins over this. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --lq-ink-primary: #EDF0F7; --lq-ink-secondary: #AEB4C8; --lq-ink-muted: #7E8598; --lq-accent: #4C6BF5; --lq-accent-hover: #6683FF; --lq-surface-card: #161A24; --lq-surface-app: #0A0C12; --lq-surface-subtle:#1F2536; --lq-border: #2A3142; } } /* ========================================================================== BASE RESET (minimal — token file stays presentation-agnostic, but these two rules are required for tabular numerals and motion preference to work correctly wherever this file is dropped in). ========================================================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .lq-tabular-nums { /* Inter-only tabular numerals — no monospace font swap. Apply to every peso amount, statutory ID, run/employee count, and table numeral. */ font-variant-numeric: var(--lq-num); font-feature-settings: "tnum" 1; } /* ========================================================================== SUPPLEMENT — extra tokens the app shell references (from the approved demo's inline block, kept here so lq-tokens.css remains the single token layer). ========================================================================== */ :root { --lq-accent-2: #41529f; /* APPROVED light blue — duotone second tone, gradients/marks */ --lq-nav-system: #697086; --lq-nav-system-tint: #EEF1F8; /* Settings / system nav domain — quiet graphite */ /* Signature warm accents — the everyday gold and the rare 1% saffron (Payline Spark peak). */ --lq-gold: #f0a12e; --lq-gold-tint: #fef7ee; /* approved amber family */ --lq-saffron: #FF671F; /* APPROVED page 4 — brand signature, 1-2% of any screen */ --lq-mint: #10b981; --lq-mint-tint: #ecf9f5; /* quiet secondary success accent */ } [data-theme="dark"] { --lq-accent-2: #9AA6FF; /* secondary cobalt for gradients / marks */ --lq-nav-system: #AEB4C8; --lq-nav-system-tint: rgba(174,185,204,.14); --lq-gold: #E8B655; --lq-gold-tint: rgba(232,182,85,.16); --lq-saffron: #FF7A3D; /* APPROVED saffron lifted for dark ground — same hue, readable */ --lq-mint: #3FCE93; --lq-mint-tint: rgba(63,206,147,.15); }