/* ========================================================================= PropertyHub — DESIGN TOKENS (the single source of colour, type and space) ------------------------------------------------------------------------- Load order matters: index.html loads tokens.css BEFORE app.css, and app.css consumes these variables. Change a colour HERE and nowhere else — never in a page, never as a hex in a component. Canonical palette: space cadet #2B2D42 / cool grey #8D99AE / coral #EF8354, canvas #EDF2F4. docs/design-system-v3.md proposes an indigo/purple palette; that section is superseded and deliberately not implemented — see the palette decision in .claude/V4-PLAN.md. ========================================================================= */ /* ===== Self-hosted fonts (no external CDN) ===== */ /* English — Roboto (variable weight) */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Roboto-Variable.ttf') format('truetype'); } /* Arabic — Vazirmatn (variable weight) */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Vazirmatn-Variable.ttf') format('truetype'); } /* Kurdish — NRT */ @font-face { font-family: 'NRT'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/NRT-Regular.ttf') format('truetype'); } @font-face { font-family: 'NRT'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/NRT-Bold.ttf') format('truetype'); } /* ===== PropertyHub Design Tokens ===== */ /* LIGHT THEME (default) — premium neutrals: soft off-white surfaces, white-smoke borders, a soft near-black for text/actions (never pure #000). */ :root { /* NRT first in every stack: one face across the whole interface, in every language, rather than three that change as the user switches. Vazirmatn and Roboto stay behind it to cover glyphs NRT does not carry, so nothing ever renders as a blank box. --font-numeric is the same family on purpose. It named Roboto outright before, which is why every figure on the dashboard was set in a different face from the label above it whatever language was chosen. */ --font-sans: 'NRT', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ar: 'NRT', 'Vazirmatn', 'Roboto', sans-serif; --font-ku: 'NRT', 'Vazirmatn', 'Roboto', sans-serif; --font-numeric: 'NRT', 'Roboto', ui-monospace, monospace; /* Kendo draws its own components from this. Without it every Telerik button, input, grid and dialog is set in the theme's font rather than the app's. */ --kendo-font-family: 'NRT', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Brand — space cadet / cool grey / coral, with red reserved for failure states. The palette carries no positive colour, so success stays a green, pulled towards teal so it sits with the cool greys instead of fighting them. */ --primary: #2B2D42; --primary-dark: #1E2031; --primary-soft: #EEF1F6; /* tint for active/hover backgrounds */ --secondary: #8D99AE; --accent: #EF8354; --pink: #D90429; --success: #2A9D8F; --danger: #D90429; --danger-soft: #FDECEF; --warning: #EF8354; /* Neutrals / surfaces — after GreenSchool (user call, 2026-10-11): a near-white neutral canvas, white cards and slate hairlines. The old blue-grey #EDF2F4 canvas read as dull; the brand colours above are unchanged, only the greys they sit on. */ --bg: #F8FAFC; /* canvas (slate-50) */ --surface: #FFFFFF; /* cards */ --surface-2: #F8FAFC; /* subtle inner panels */ --surface-3: #F1F5F9; --border: #E2E8F0; /* slate-200 hairline */ --border-strong: #CBD5E1; /* Text — the palette's darkest tone, never pure #000 */ --text-primary: #2B2D42; --text-secondary: #55607A; /* darkened from #8D99AE, which fails contrast as body text */ --text-muted: #94A3B8; /* Solid action button */ --btn-dark: #2B2D42; --btn-dark-hover: #3E4159; --btn-dark-text: #FFFFFF; /* Chrome — a light rail, per design/Image Sample: white sidebar and top bar on the soft-grey canvas, structure drawn by the canvas gap and hairline borders rather than a dark block. Coral keeps its one meaning — the active item is the only solid coral pill on the rail, so "you are here" still reads instantly. */ --sidebar-bg: #FFFFFF; --sidebar-text: #5A6478; --sidebar-text-strong: #2B2D42; --sidebar-hover: #F8FAFC; --sidebar-border: #F1F5F9; --topbar-bg: #FFFFFF; /* Elevation */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.05); --shadow-md: 0 6px 18px rgba(15,23,42,0.07); --shadow-lg: 0 20px 40px -12px rgba(15,23,42,0.18); /* Shape */ --sidebar-width: 260px; --topbar-height: 60px; /* Generous, per design/Image Sample — the big soft corner is most of what makes the cards read as that family. */ --radius: 20px; --radius-sm: 10px; --radius-lg: 26px; --radius-pill: 999px; color-scheme: light; /* The Telerik/Kendo accent mapping used to live here and never took effect: this block is a plain :root, and the stock Kendo theme is loaded AFTER this file with a :root of its own, so its salmon #ff6358 won on order. Every component that reads the variable rather than being restyled by class — checkboxes, radios, switches, sliders, focus rings — was drawing in Kendo's red, in a palette where red means destructive. It now lives in telerik-theme.css, which is loaded after Kendo for this purpose. The dark mapping below is unaffected: :root[data-theme="dark"] outranks Kendo's :root, so those always applied. */ } /* DARK THEME — premium black canvas, soft white text, low-glare borders. */ :root[data-theme="dark"] { /* The space cadet is too dark to act as the brand tone on a dark canvas, so the cool grey takes over and the navy becomes the surface family instead. */ --primary: #8D99AE; --primary-dark: #7A879F; --primary-soft: #2A2E3F; --secondary: #A9B4C6; --accent: #EF8354; --pink: #F2556A; --success: #3FBFAE; --danger: #F2556A; /* #D90429 goes muddy on a dark ground */ --danger-soft: #34161C; --warning: #EF8354; --bg: #14151F; /* near-black pulled towards the navy, not #000 */ --surface: #1C1E2C; /* cards */ --surface-2: #222436; --surface-3: #2A2D42; --border: #333652; /* subtle low-glare border */ --border-strong: #454A6B; --text-primary: #EDF2F4; /* anti-flash white */ --text-secondary: #A9B4C6; --text-muted: #8D99AE; --btn-dark: #2B2D42; --btn-dark-hover: #3E4159; --btn-dark-text: #FFFFFF; /* The light theme's rail is a surface, so dark keeps the same relationship: rail = card surface, one step above the canvas, not the canvas itself. */ --sidebar-bg: #1C1E2C; --sidebar-text: rgba(237,242,244,0.66); --sidebar-text-strong: #EDF2F4; --sidebar-hover: rgba(237,242,244,0.07); --sidebar-border: #333652; --topbar-bg: #1C1E2C; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 18px 44px rgba(0,0,0,0.55); color-scheme: dark; /* Telerik/Kendo dark surface mapping so grids, dialogs, dropdowns, pickers follow the app theme instead of staying light. */ --kendo-color-primary: #8D99AE; --kendo-color-primary-hover: #A9B4C6; --kendo-color-primary-active: #7A879F; --kendo-color-on-primary: #14151F; --kendo-color-app-surface: #14151F; --kendo-color-on-app-surface: #EDF2F4; --kendo-color-surface: #222436; --kendo-color-surface-alt: #1C1E2C; --kendo-color-border: #333652; --kendo-color-border-alt: #454A6B; --kendo-color-base-subtle: #2A2D42; --kendo-color-base-subtle-hover: #303350; --kendo-color-base-subtle-active: #383C5C; --kendo-color-base: #222436; --kendo-color-base-hover: #2A2D42; --kendo-color-base-active: #303350; --kendo-color-base-emphasis: #454A6B; --kendo-color-base-on-subtle: #EDF2F4; --kendo-color-on-base: #EDF2F4; --kendo-color-base-on-surface: #EDF2F4; --kendo-color-subtle: #A9B4C6; } /* ========================================================================= TYPOGRAPHY SCALE The app had no shared type scale, so pages fell back to browser defaults and long runs of label/value text read as undifferentiated grey. These give information a hierarchy without each page inventing its own sizes. ========================================================================= */ :root { --text-2xs: .68rem; --text-xs: .75rem; --text-sm: .82rem; --text-md: .9rem; --text-lg: 1.05rem; --text-xl: 1.35rem; --text-2xl: 1.7rem; --lh-tight: 1.25; --lh-body: 1.6; } /* ========================================================================= V4 ADDITIONS Everything above this line was moved here verbatim from app.css so the token layer lives in one file (DES-1). Nothing was re-valued in the move. What follows is new: the scales and derived colours the component library needs, added as separate :root blocks rather than edited into the ones above, so the extraction stays a pure move and is easy to audit. ========================================================================= */ :root { /* ---- Spacing ------------------------------------------------------- One 4/8/12/16/24 scale. Pages were picking arbitrary rem values, which is why card padding and grid gaps never quite agreed across screens. */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ /* ---- Unit status ramp ---------------------------------------------- The ordered coral ramp, promoted from the hardcoded hexes that were repeated in the stat-card, status-badge and chart rules. The statuses are a sequence (Available → Reserved → Rented → Sold), not categories: four separate hues out of this palette measure as three greys under common colour-vision deficiencies, with two of them indistinguishable. --ramp-* are the solid tones, for chart slices and dots. --status-*-bg / -ink are the pill pairings, each contrast-checked. */ --ramp-available: #FBDCC8; --ramp-reserved: #EF8354; --ramp-rented: #A8431C; --ramp-sold: #4A1C06; /* The 3D viewer's hover/selection overlay on a facade (M2). Blue on purpose, as in the sales-tool references: it is a pointer, not a status, and the light end of the ramp above disappears on a white facade. Same in both themes - it sits on the model. */ --mv-highlight: #3B82F6; /* The sun slider's track is the sky over the day: night, dawn/dusk, daylight. Same in both themes for the same reason - it describes the scene, not the page. */ --sun-night: #1B2640; --sun-dusk: #EF8354; --sun-day: #8FC3EA; --sun-knob: #FFD27A; --sun-moon: #DFE7FF; --status-available-bg: #FBDCC8; --status-available-ink: #6E2E10; --status-available-dot: #B4753F; --status-reserved-bg: #FDE4D5; --status-reserved-ink: #A8431C; --status-reserved-dot: #EF8354; --status-rented-bg: #F7DACE; --status-rented-ink: #8A3512; --status-rented-dot: #A8431C; --status-sold-bg: #EFE0D8; --status-sold-ink: #4A1C06; --status-sold-dot: #4A1C06; /* Build/progress states stay neutral on purpose: they describe progress, not sales, and drawing them from the ramp would read as one scale. */ --status-neutral-bg: #E7EBF1; --status-neutral-ink: #3C4257; --status-neutral-dot: #8D99AE; /* ---- Accent, and what hangs off it --------------------------------- --accent is the ONE token a tenant may override (see accent.js). Every other brand colour is fixed, because a tenant recolouring the whole shell is how a design system dies. The three below are derived, never hardcoded, so they stay correct for whatever accent a company picks. --accent-on especially: CLAUDE.md forbids white on coral because it fails contrast, and that guarantee has to survive a tenant choosing a pale yellow or a near-black. The fallback here suits the default coral; accent.js recomputes it from the chosen colour's relative luminance at sign-in. */ --accent-hover: color-mix(in srgb, var(--accent) 86%, #000); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-on: #2B2D42; /* ---- Focus --------------------------------------------------------- One ring for the whole app, accent-derived so it survives rebranding. */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } :root[data-theme="dark"] { /* The pill backgrounds above are pale tints built for a white card and go to mud on the dark canvas, so the dark theme pairs the solid ramp tone with light ink instead of re-tinting. The ramp itself does not change: the ordering has to read the same in both themes. */ --status-available-bg: #4A3527; --status-available-ink: #FBDCC8; --status-available-dot: #FBDCC8; --status-reserved-bg: #5A2E13; --status-reserved-ink: #FDE4D5; --status-reserved-dot: #EF8354; --status-rented-bg: #4A1F0C; --status-rented-ink: #F7DACE; --status-rented-dot: #C4551F; --status-sold-bg: #2E1206; --status-sold-ink: #EFE0D8; --status-sold-dot: #8A3512; --status-neutral-bg: #2A2E3F; --status-neutral-ink: #A9B4C6; --status-neutral-dot: #8D99AE; --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface)); --accent-on: #14151F; }