/* ═══════════════════════════════════════════════════════════════════════════ WhatsServ Design Tokens ─────────────────────────────────────────────────────────────────────────── SINGLE SOURCE OF TRUTH for brand colour, gradient, radius, shadow and type. Values are transcribed verbatim from the marketing site's served CSS (https://www.whatsserv.com/site/assets/css/main-rtl.css, theme section from line 27700, marked by their "Author CSS" banner). Do NOT round or "improve" them — a mismatch here is a defect against SC-001. NOTE: never write a nested comment-close sequence inside this block. CSS comments do not nest, so an inner one terminates the comment early and the parser's error recovery silently drops the rule that follows it. Feature: 008-design-system-alignment Contract: specs/008-design-system-alignment/contracts/design-tokens.md THIS FILE MUST LOAD **AFTER** BOOTSTRAP. Bootstrap ships its own :root { --bs-primary: #0d6efd; ... }, and for custom properties at equal specificity the LAST declaration wins. Loading this file first leaves the §8 bridge inert and .text-primary / .bg-primary render Bootstrap blue. Custom properties resolve at use time, so stylesheets loaded after this one still consume --ws-* correctly. Do not "fix" this ordering. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── §1 Font faces (self-hosted) ───────────────────────────────────────── Droid Arabic Kufi comes from Google's RETIRED Early Access programme and is not served by the modern fonts.googleapis.com/css2 API. It must be self-hosted. It ships ONLY weights 400 and 700 — see the remap note below. Licences: wwwroot/fonts/LICENSE.md */ @font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/droidarabickufi/DroidKufi-Regular.woff2') format('woff2'), url('../fonts/droidarabickufi/DroidKufi-Regular.woff') format('woff'); } @font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/droidarabickufi/DroidKufi-Bold.woff2') format('woff2'), url('../fonts/droidarabickufi/DroidKufi-Bold.woff') format('woff'); } /* Latin fallbacks — variable fonts, one file per subset covers 400/600/700. */ @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/mulish/mulish-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/mulish/mulish-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/urbanist/urbanist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/urbanist/urbanist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ─── §2 Font stacks ─────────────────────────────────────────────────── WEIGHT REMAP — Droid Arabic Kufi has no 300/500/600 file. Declaring those weights makes browsers SYNTHESIZE them, which smears Arabic Kufi. Stylesheets must use 400 or 700 only: 300 → 400 500 → 400 600 → 700 */ --ws-font-body: "Droid Arabic Kufi", "Mulish", sans-serif; --ws-font-head: "Droid Arabic Kufi", "Urbanist", sans-serif; /* Dense-region stack (tables, form grids, admin lists). Kept as an ALIAS of the body stack so dense screens still render in the marketing site's own typeface. See research.md Decision 6. */ --ws-font-ui: var(--ws-font-body); /* MEASURED density compensation (SC-005). Droid Arabic Kufi's Arabic advance widths are ~12% wider per em than IBM Plex Sans Arabic (measured from the actual font tables, 3 real UI strings). Compounded with the base size moving 15px -> 16px, dense Arabic text rendered +19.7% wider — over the 15% gate. sample orig(15px Plex) 16px Kufi 14px Kufi contacts row 257.9px 309.8 (+20.2%) 271.1 (+5.1%) table headers 212.1px 257.2 (+21.3%) 225.1 (+6.1%) admin users 204.3px 240.6 (+17.8%) 210.5 (+3.1%) AVERAGE +19.7% FAIL +4.8% PASS Compensating with SIZE rather than swapping the family keeps dense screens matched to the marketing site's typeface. */ --ws-dense-font-size: 0.875rem; /* 14px */ /* ─── §3 Colours ─────────────────────────────────────────────────────── Counts are occurrences in the marketing theme CSS. */ /* Brand greens */ --ws-primary: #008069; /* 102 — the brand green */ --ws-primary-dark: #086f58; /* 35 */ --ws-primary-bright: #00a884; /* 4 — gradient partner */ --ws-primary-deep: #075947; /* 3 */ /* Text */ --ws-heading: #001042; /* 54 — navy, ALL headings */ --ws-text: #666666; /* 8 — body copy */ --ws-text-muted: #b0b0b0; /* Accents */ --ws-accent-coral: #f16262; /* 40 */ --ws-accent-blue: #3200ff; /* 23 */ --ws-accent-orange: #f2921d; /* 12 */ --ws-accent-pink: #ff0766; /* 11 — red gradient start */ --ws-accent-salmon: #ff7e5d; /* 10 — red gradient end */ /* Surfaces */ --ws-surface: #ffffff; /* 176 */ --ws-bg-light: #f6f6f6; /* 9 — .light-bg */ --ws-bg-tint: #f6f9ff; --ws-bg-subtle: #fafafa; /* Dark surfaces */ --ws-dark: #33313d; /* 31 */ --ws-darker: #1e1e2c; /* 27 */ --ws-darkest: #1c1e25; /* Borders */ --ws-border: #c7c7c7; /* 12 */ --ws-border-light: #ebebeb; --ws-border-mid: #d6d6d6; /* RGB triplets for rgba() composition — keep in sync with the hex above */ --ws-primary-rgb: 0, 128, 105; /* ─── §4 Gradients ───────────────────────────────────────────────────── Angles are EXACT and DIRECTIONAL. They do not auto-mirror under RTL — verify both directions before mirroring anything. */ --ws-gradient-header: linear-gradient(269.94deg, #00a884 10.47%, #008069 99.97%); --ws-gradient-btn: linear-gradient(95.45deg, #086f58 0.64%, #008069 98.23%); --ws-gradient-primary: linear-gradient(278.54deg, #00a884 15.93%, #008069 98.7%); --ws-gradient-secondary: linear-gradient(279.3deg, rgba(8, 111, 88, 0.9411764706) 2.98%, #008069 98.6%); --ws-gradient-red: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%); /* ─── §5 Radius scale ────────────────────────────────────────────────── Site frequency: 50% (38), 5px (16), 30px (14), 10px (11), 4px (9). NOTE: buttons are 5px, NOT the 50px pill this app used before. */ --ws-radius-sm: 4px; --ws-radius-btn: 5px; --ws-radius-md: 6px; --ws-radius-card: 10px; --ws-radius-pill: 30px; --ws-radius-circle: 50%; /* ─── §6 Elevation ───────────────────────────────────────────────────── Deliberately shallow: large blur, very low opacity. */ --ws-shadow-deep: 0px 12px 50px rgba(125, 125, 125, 0.1); --ws-shadow-primary: 0px 20px 80px rgba(0, 148, 255, 0.05); /* ─── §7 Derived tokens (no marketing-site counterpart) ──────────────── These exist only in the app. Re-derived from the site palette rather than left on legacy values. See design-tokens.md §7. */ --ws-kpi-primary: var(--ws-gradient-primary); --ws-kpi-accent: var(--ws-gradient-btn); --ws-kpi-info: linear-gradient(135deg, #3200ff 0%, #1e0099 100%); --ws-kpi-warning: linear-gradient(135deg, #f2921d 0%, #bb741d 100%); --ws-kpi-danger: var(--ws-gradient-red); --ws-kpi-purple: linear-gradient(135deg, #3200ff 0%, #001042 100%); /* ─── §8b WhatsApp product simulation ────────────────────────────────── These reproduce WhatsApp's OWN chat interface inside the template-preview phone shell (Company/Templates.razor). They are deliberately NOT brand colours and must NOT be repointed at brand tokens — the preview is meant to look like WhatsApp, not like WhatsServ. Tokenised only so no raw literal lives in a component. */ --ws-wa-chat-bg: #e5ddd5; /* WhatsApp chat wallpaper */ --ws-wa-bubble-out: #dcf8c6; /* outgoing message bubble */ --ws-wa-tick: #00a5f4; /* "read" double-tick blue */ /* ─── §8 Bootstrap bridge ────────────────────────────────────────────── Re-points Bootstrap's own custom properties at brand tokens. Requires this file to load BEFORE bootstrap.css. */ --bs-primary: var(--ws-primary); --bs-primary-rgb: 0, 128, 105; --bs-body-color: var(--ws-text); --bs-body-font-family: var(--ws-font-body); --bs-heading-color: var(--ws-heading); --bs-border-radius: var(--ws-radius-btn); --bs-link-color: var(--ws-primary); --bs-link-hover-color: var(--ws-primary-dark); }