/* ============================================================================ PropEdge Design System - TOKENS File: design/css/propedge-tokens.css LIVE COPY at PropEdge_UI/css/ — Mahenoor, 27 Sep 2026, with the Login .aspx (D29). Byte-for-byte the approved design file below this header; the live site cannot reference design/. Change the design file first, then re-copy — never edit this copy on its own, or the two drift. Load AFTER Bootstrap 5.3, BEFORE propedge-components.css. These are CSS custom properties that sit ON TOP of Bootstrap 5.3. Bootstrap is not replaced. Where a token maps cleanly onto a Bootstrap variable, we re-point the Bootstrap variable at our token (see the "Bootstrap bridge" block at the bottom) so .btn, .form-control, .table etc. inherit the PropEdge look without being re-written. EVERY colour pair used for text is listed with its MEASURED WCAG 2.1 contrast ratio in the comment beside it. Ratios computed with the WCAG relative-luminance formula and re-verified live, in the browser, by propedge-design-system.html. STATUS: APPROVED. Palette and spacing approved by Azhar 15 Sep 2026, re-confirmed 18 Sep (decision register D1). Typeface IBM Plex Sans + IBM Plex Sans Arabic, 15 Sep, re-confirmed 18 Sep (D2). Brand mark "Corner", 16 Sep, re-confirmed 18 Sep (D3). Priority ramp D5. Urgent red #8E1D17 D6. The record is docs/decision-register.md section 3. Two tokens remain PROPOSED and are marked so where they appear: --pe-status-reopened-* (introduces a violet hue) and --pe-status-breached-* (revised 18 Sep). Do not ship either until the comment beside it says APPROVED. ========================================================================= */ :root { /* ====================================================================== 1. BRAND RAMP - "Marine". One blue family. Replaces the three unrelated blues, two teals and the stray purple inherited from the template. ================================================================== */ --pe-brand-50: #EFF6FB; --pe-brand-100: #D9EAF6; --pe-brand-200: #B3D5EC; --pe-brand-300: #7FB6DC; --pe-brand-400: #4B94C8; --pe-brand-500: #2A76AC; /* 4.90:1 on #FFFFFF - AA for all text */ --pe-brand-600: #1B5E8E; /* 6.91:1 on #FFFFFF - primary action */ --pe-brand-700: #154A72; /* 9.31:1 on #FFFFFF - hover / pressed */ --pe-brand-800: #103957; /* white on it = 12.03:1 - app sidebar */ --pe-brand-900: #0C2A41; /* white on it = 14.75:1 - dark toast */ /* ====================================================================== 2. ACCENT RAMP - "Teal". Data-viz and secondary emphasis only. NEVER used for body text at 500: it measures 3.94:1 (large text only). Use --pe-accent-600 or darker for any text. ================================================================== */ --pe-accent-50: #E4F4F3; --pe-accent-100: #C3E7E6; --pe-accent-200: #9ED6D4; --pe-accent-300: #5FBDBA; --pe-accent-500: #0E8F8C; /* 3.94:1 on #FFFFFF - LARGE TEXT / graphics */ --pe-accent-600: #0B7370; /* 5.67:1 on #FFFFFF - AA body text */ --pe-accent-700: #085957; /* ====================================================================== 3. NEUTRAL RAMP - cool slate, tuned so 700/600 clear AA on white. ================================================================== */ --pe-neutral-0: #FFFFFF; --pe-neutral-25: #FAFBFC; --pe-neutral-50: #F4F6F8; --pe-neutral-100: #E8ECF1; --pe-neutral-200: #D5DBE3; --pe-neutral-300: #B6BFCB; --pe-neutral-400: #8D99A8; /* NON-TEXT ONLY - 2.89:1 on white */ --pe-neutral-450: #7F8A99; /* 3.50:1 on white - input borders (1.4.11) */ --pe-neutral-500: #6B7787; /* 4.55:1 on white - placeholders, just AA */ --pe-neutral-600: #515C6B; /* 6.78:1 on white - secondary text */ --pe-neutral-700: #3B4552; /* 9.72:1 on white - body text */ --pe-neutral-800: #28303A; --pe-neutral-900: #161C23; /* 17.15:1 on white - headings */ /* ====================================================================== 4. SEMANTIC - success / warning / danger / info. Each has: -bg (tint), -border, -fg (text on the tint), -solid (fill) and -on-solid. ================================================================== */ --pe-success-bg: #E6F4EC; --pe-success-border: #A8D8BC; --pe-success-fg: #0B5C2E; /* 7.16:1 on success-bg; 8.12:1 on white */ --pe-success-solid: #0F7A3D; /* 5.42:1 on white */ --pe-success-on-solid: #FFFFFF; /* 5.42:1 on success-solid */ --pe-warning-bg: #FDF3E2; --pe-warning-border: #F0CE93; --pe-warning-fg: #7A4800; /* 6.93:1 on warning-bg; 7.62:1 on white */ --pe-warning-solid: #9A5B00; /* 5.42:1 on white */ --pe-warning-on-solid: #FFFFFF; --pe-warning-graphic: #C77700; /* icon / chart fills only - 3.46:1 */ --pe-danger-bg: #FDECEA; --pe-danger-border: #E08B84; --pe-danger-fg: #8E1D17; /* 7.85:1 on danger-bg; 8.98:1 on white */ --pe-danger-solid: #B3261E; /* 6.53:1 on white */ --pe-danger-on-solid: #FFFFFF; /* 6.53:1 on danger-solid */ --pe-info-bg: #EAF3FA; --pe-info-border: #B3D5EC; --pe-info-fg: #154A72; /* 8.29:1 on info-bg */ --pe-info-solid: #1B5E8E; --pe-info-on-solid: #FFFFFF; /* 6.91:1 */ /* ====================================================================== 5. SURFACE / TEXT ALIASES - what you actually write in component CSS. ================================================================== */ --pe-surface: var(--pe-neutral-0); --pe-surface-raised: var(--pe-neutral-0); --pe-surface-sunken: var(--pe-neutral-50); --pe-canvas: var(--pe-neutral-50); --pe-surface-inverse: var(--pe-brand-900); --pe-text: var(--pe-neutral-700); /* 9.72:1 on surface */ --pe-text-strong: var(--pe-neutral-900); /* 17.15:1 on surface */ --pe-text-muted: var(--pe-neutral-600); /* 6.78:1 on surface */ --pe-text-subtle: var(--pe-neutral-500); /* 4.55:1 on surface */ --pe-text-placeholder: var(--pe-neutral-500); /* 4.55:1 on surface */ --pe-text-on-brand: var(--pe-neutral-0); /* 6.91:1 on brand-600 */ --pe-text-link: var(--pe-brand-600); /* 6.91:1 on surface */ --pe-text-link-hover: var(--pe-brand-700); /* Disabled text is exempt from WCAG 1.4.3, but we still keep it legible: --pe-neutral-500 on --pe-neutral-100 measures 3.83:1. */ --pe-text-disabled: var(--pe-neutral-500); --pe-surface-disabled: var(--pe-neutral-100); --pe-border: var(--pe-neutral-200); /* decorative dividers */ --pe-border-strong: var(--pe-neutral-300); --pe-border-input: var(--pe-neutral-450); /* 3.50:1 - meets 1.4.11 */ --pe-border-focus: var(--pe-brand-500); /* 4.90:1 - meets 1.4.11 */ /* ====================================================================== 6. MAINTENANCE-DESK STATUS LANGUAGE Colour is NEVER the only signal. Every pill carries an icon with a distinct silhouette AND a text label. The ramp is built on luminance plus hue, not on a red/green pair, so it survives deuteranopia and protanopia. ================================================================== */ --pe-status-new-bg: var(--pe-neutral-100); --pe-status-new-fg: var(--pe-neutral-700); /* 8.19:1 */ --pe-status-new-border: var(--pe-neutral-300); --pe-status-assigned-bg: var(--pe-info-bg); --pe-status-assigned-fg: var(--pe-info-fg); /* 8.29:1 */ --pe-status-assigned-border: var(--pe-info-border); --pe-status-progress-bg: var(--pe-accent-50); --pe-status-progress-fg: var(--pe-accent-700); /* 7.19:1 */ --pe-status-progress-border: var(--pe-accent-200); --pe-status-hold-bg: var(--pe-warning-bg); --pe-status-hold-fg: var(--pe-warning-fg); /* 6.93:1 */ --pe-status-hold-border: var(--pe-warning-border); --pe-status-resolved-bg: var(--pe-success-bg); --pe-status-resolved-fg: var(--pe-success-fg); /* 7.16:1 */ --pe-status-resolved-border: var(--pe-success-border); --pe-status-closed-bg: var(--pe-neutral-700); --pe-status-closed-fg: var(--pe-neutral-0); /* 9.72:1 */ --pe-status-closed-border: var(--pe-neutral-700); --pe-status-cancelled-bg: var(--pe-neutral-0); --pe-status-cancelled-fg: var(--pe-neutral-600); /* 6.78:1 */ --pe-status-cancelled-border:var(--pe-neutral-300); --pe-status-overdue-bg: var(--pe-danger-bg); --pe-status-overdue-fg: var(--pe-danger-fg); /* 7.85:1 */ --pe-status-overdue-border: var(--pe-danger-border); /* PROPOSED - STILL OPEN as of 18 Sep 2026. docs/design-open-questions.md Q3b. "Reopened" is a distinct state, not a return to New: it means the fix failed, which is the strongest churn signal the desk produces. It reintroduces a violet hue, which is why it is not assumed. */ --pe-status-reopened-bg: #F1EAFA; --pe-status-reopened-fg: #5B2E8E; /* 8.03:1 */ --pe-status-reopened-border: #C9AEE8; /* PROPOSED - REVISED 18 Sep 2026. See docs/design-open-questions.md Q3a. One step beyond overdue: the SLA promise is broken, not merely at risk. The 16 Sep version of this was a SOLID #8E1D17 pill with a white label. That is exactly the Urgent priority pill Azhar approved on 16 Sep (D6), so the two states that most need separating rendered identically on a ticket row. Measured 18 Sep: the darkest same-hue red that still reads as red (#4E100C) separates from the Urgent fill by only 1.66:1. Colour cannot fix this, so the fix is FORM, not hue. No new hex is introduced. Urgent = solid red PILL, radius 999, white label, no figure. Breached = white-bodied CHIP, radius 4, 2px #8E1D17 border, a solid #8E1D17 inline-start cap with the icon in white, and it ALWAYS carries the overrun figure ("3d 04h over"). Measured: label 8.98:1 on the white body; icon 8.98:1 on the cap; border 8.98:1 on #FFFFFF and 8.29:1 on the #F4F6F8 canvas (1.4.11); chip body vs Urgent fill 8.98:1 normal, 5.67:1 deuteranopia. Greyscale: Urgent pill 73 solid, breached body 255 with a 73 rule. */ --pe-status-breached-bg: var(--pe-neutral-0); --pe-status-breached-fg: #8E1D17; /* 8.98:1 on white */ --pe-status-breached-border: #8E1D17; /* 2px, 8.98:1 */ --pe-status-breached-cap-bg: #8E1D17; --pe-status-breached-cap-fg: var(--pe-neutral-0); /* 8.98:1 */ /* -------------------------------------------------------------------- PRIORITY - approved 15 Sep 2026: slate, blue, amber, red. Deliberately NOT green/amber/red: that is the worst possible ramp for red-green colour blindness. Shape carries the meaning on three independent axes - direction, stroke count and fill - so no single axis has to survive alone: low = 1 chevron DOWN, tint fill medium = 2 horizontal bars (the chevron at zero pitch), tint fill high = 1 chevron UP, tint fill urgent = 2 chevrons UP, SOLID fill None of the four mirror under [dir=rtl]: they encode vertical magnitude, not reading direction. MEASURED by design/propedge-verification.html, 15 Sep 2026: greyscale sRGB levels are low 236, medium 242, high 244, urgent 73. The first three are NOT separable by tone in a black-and-white print. The chevron and the word separate them. Never drop the icon to save column width, and never ship a colour-only priority cell. -------------------------------------------------------------------- */ --pe-priority-low-bg: var(--pe-neutral-100); --pe-priority-low-fg: var(--pe-neutral-700); /* 8.19:1 */ --pe-priority-medium-bg: var(--pe-info-bg); --pe-priority-medium-fg: var(--pe-info-fg); /* 8.29:1 */ --pe-priority-high-bg: var(--pe-warning-bg); --pe-priority-high-fg: var(--pe-warning-fg); /* 6.93:1 */ /* CHANGED from --pe-danger-solid #B3261E. APPROVED by Azhar 16 Sep 2026, decision register D6. Q1 is closed. White on #B3261E measures 6.53:1 normally but 3.83:1 under deuteranopia simulation - below 4.5:1, on the one pill that must never be hard to read. White on #8E1D17 measures 8.98:1 normally and 5.67:1 under the same simulation. #8E1D17 is already --pe-danger-fg, so no new hue is introduced. NOTE: this hex is now owned by Urgent. The SLA-breached flag must not reuse it as a solid fill - see the breached block above. */ --pe-priority-urgent-bg: #8E1D17; --pe-priority-urgent-fg: var(--pe-neutral-0); /* 8.98:1 */ /* ====================================================================== 7. TYPOGRAPHY APPROVED PAIR: IBM Plex Sans + IBM Plex Sans Arabic. Azhar, 15 Sep 2026, re-confirmed 18 Sep. Decision register D2. One superfamily, two scripts, drawn by one team, so identical vertical metrics and weight scale: a bilingual table row keeps its rhythm in both languages. Inter + Cairo was the alternative. It was NOT chosen. Do not implement it. It survives in tokens/typography.json only as a record of what was considered. ================================================================== */ --pe-font-latin: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --pe-font-arabic: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; --pe-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --pe-font-body: var(--pe-font-latin); /* Type scale. Base 16px. Never ship UI text below 12px. */ --pe-fs-display: 2.75rem; /* 44px */ --pe-fs-h1: 2.25rem; /* 36px */ --pe-fs-h2: 1.75rem; /* 28px */ --pe-fs-h3: 1.375rem; /* 22px */ --pe-fs-h4: 1.125rem; /* 18px */ --pe-fs-lg: 1.0625rem; /* 17px */ --pe-fs-base: 1rem; /* 16px */ --pe-fs-sm: 0.875rem; /* 14px */ --pe-fs-caption: 0.8125rem; /* 13px */ --pe-fs-overline: 0.75rem; /* 12px - hard floor */ --pe-lh-tight: 1.15; --pe-lh-heading: 1.25; --pe-lh-snug: 1.4; --pe-lh-base: 1.55; --pe-lh-relaxed: 1.7; --pe-fw-regular: 400; --pe-fw-medium: 500; --pe-fw-semibold: 600; --pe-fw-bold: 700; --pe-ls-tight: -0.02em; --pe-ls-normal: 0; --pe-ls-wide: 0.04em; /* ====================================================================== 8. SPACING - 4px base grid. Named by pixel value; no ambiguity. ================================================================== */ --pe-space-2: 0.125rem; /* 2px */ --pe-space-4: 0.25rem; /* 4px */ --pe-space-8: 0.5rem; /* 8px */ --pe-space-12: 0.75rem; /* 12px */ --pe-space-16: 1rem; /* 16px */ --pe-space-20: 1.25rem; /* 20px */ --pe-space-24: 1.5rem; /* 24px */ --pe-space-32: 2rem; /* 32px */ --pe-space-40: 2.5rem; /* 40px */ --pe-space-48: 3rem; /* 48px */ --pe-space-64: 4rem; /* 64px */ --pe-space-80: 5rem; /* 80px */ --pe-space-96: 6rem; /* 96px */ /* ====================================================================== 9. RADIUS / SHADOW / MOTION / SIZING ================================================================== */ --pe-radius-xs: 4px; --pe-radius-sm: 6px; --pe-radius-md: 8px; --pe-radius-lg: 12px; --pe-radius-xl: 16px; --pe-radius-pill: 999px; /* Shadows tinted with the brand navy, not neutral black. */ --pe-shadow-xs: 0 1px 2px rgba(12, 42, 65, .06); --pe-shadow-sm: 0 1px 3px rgba(12, 42, 65, .08), 0 1px 2px rgba(12, 42, 65, .05); --pe-shadow-md: 0 4px 10px rgba(12, 42, 65, .08), 0 1px 3px rgba(12, 42, 65, .06); --pe-shadow-lg: 0 12px 28px rgba(12, 42, 65, .12), 0 2px 6px rgba(12, 42, 65, .06); --pe-shadow-xl: 0 24px 54px rgba(12, 42, 65, .18); --pe-focus-ring: 0 0 0 3px rgba(42, 118, 172, .40); --pe-dur-fast: 120ms; --pe-dur-base: 180ms; --pe-dur-slow: 260ms; --pe-ease: cubic-bezier(.2, .7, .3, 1); /* Touch targets. Office staff use this all day, often on a tablet. 44px is the floor (WCAG 2.5.5 / 2.5.8); form fields default to 48px. */ --pe-control-h-sm: 36px; --pe-control-h-md: 44px; --pe-control-h-lg: 52px; --pe-field-h: 48px; --pe-tap-min: 44px; --pe-icon-sm: 16px; --pe-icon-md: 20px; --pe-icon-lg: 24px; --pe-z-sticky: 1020; --pe-z-drawer: 1045; --pe-z-modal: 1055; --pe-z-toast: 1090; --pe-container: 1200px; /* Reference design widths: 375 / 768 / 1440. Breakpoints are Bootstrap 5.3's, unchanged: sm 576 - md 768 - lg 992 - xl 1200 - xxl 1400 */ } /* ========================================================================== ARABIC / RTL Arabic needs more leading than Latin: ascenders, descenders and optional diacritics stack further. We add leading rather than changing size, so the two languages keep the same vertical grid. ========================================================================== */ :root:lang(ar), [lang="ar"], [dir="rtl"] { --pe-font-body: var(--pe-font-arabic); --pe-lh-tight: 1.3; --pe-lh-heading: 1.45; --pe-lh-snug: 1.6; --pe-lh-base: 1.8; --pe-lh-relaxed: 1.95; --pe-ls-tight: 0; /* never letter-space Arabic: it breaks the joins */ --pe-ls-wide: 0; } /* ========================================================================== BOOTSTRAP 5.3 BRIDGE Re-point Bootstrap's own variables at PropEdge tokens so stock Bootstrap components (.btn, .form-control, .table, .modal, .card ...) pick the design system up without being re-implemented. ========================================================================== */ :root { --bs-primary: #1B5E8E; --bs-primary-rgb: 27, 94, 142; --bs-secondary: #515C6B; --bs-secondary-rgb: 81, 92, 107; --bs-success: #0F7A3D; --bs-success-rgb: 15, 122, 61; --bs-warning: #9A5B00; --bs-warning-rgb: 154, 91, 0; --bs-danger: #B3261E; --bs-danger-rgb: 179, 38, 30; --bs-info: #0B7370; --bs-info-rgb: 11, 115, 112; --bs-light: #F4F6F8; --bs-dark: #161C23; --bs-body-font-family: var(--pe-font-body); --bs-body-font-size: var(--pe-fs-base); --bs-body-line-height: var(--pe-lh-base); --bs-body-color: var(--pe-text); --bs-body-color-rgb: 59, 69, 82; --bs-body-bg: var(--pe-surface); --bs-secondary-color: var(--pe-text-muted); --bs-emphasis-color: var(--pe-text-strong); --bs-border-color: var(--pe-border); --bs-border-radius: var(--pe-radius-md); --bs-border-radius-sm: var(--pe-radius-sm); --bs-border-radius-lg: var(--pe-radius-lg); --bs-border-radius-pill: var(--pe-radius-pill); --bs-link-color: var(--pe-text-link); --bs-link-color-rgb: 27, 94, 142; --bs-link-hover-color: var(--pe-text-link-hover); --bs-focus-ring-color: rgba(42, 118, 172, .40); --bs-focus-ring-width: 3px; } /* ========================================================================== LTR RESET Needed because the Arabic block above is matched by ANY element with dir="rtl" or lang="ar", not just . Without this reset, an English island inside an Arabic page (a ticket reference panel, a side-by-side comparison) would inherit the Arabic font stack and Arabic leading. ========================================================================== */ [dir="ltr"], [lang="en"] { --pe-font-body: var(--pe-font-latin); --pe-lh-tight: 1.15; --pe-lh-heading: 1.25; --pe-lh-snug: 1.4; --pe-lh-base: 1.55; --pe-lh-relaxed: 1.7; --pe-ls-tight: -0.02em; --pe-ls-wide: 0.04em; }