/* ============================================================================ * SILAH — DESIGN TOKENS * ---------------------------------------------------------------------------- * The single source of truth for colour, type, spacing, radius, shadow, motion * and depth. This is the only file in the codebase allowed to contain a literal * colour or a literal pixel size for these things. * * THE RULE, and the reason this file exists: * * Components use var(--token). Never a hex code, never a raw px. * * Two layers: * * 1. PRIMITIVES the raw ramps (--teal-500, --n-200). Not used by components * directly — they are the paint box, not the palette. * 2. SEMANTIC what a thing means (--surface, --ink, --brand, --danger). * Components only ever use these. * * That indirection is what makes dark mode a token swap instead of a rewrite: * the dark theme below re-points the SEMANTIC layer only, and every component * follows without a single edit. * * Loaded first on every page (Assets::loadBase). Bump ASSETS_VERSION in * config/config.php whenever this file changes. * ========================================================================== */ :root { /* ========================================================================== * 1. PRIMITIVES — the only literals in the codebase * ====================================================================== */ /* -- brand: deep teal ----------------------------------------------------- * Islamic identity without the flat "mosque green" of an older generation of * community sites. Reads as trust at 500, stays legible on white at 600. */ --teal-50: #ECF8F5; --teal-100: #D2EFE8; --teal-200: #A6DED2; --teal-300: #72C7B6; --teal-400: #42AA97; --teal-500: #1E8C79; --teal-600: #157263; --teal-700: #115C50; --teal-800: #0E4941; --teal-900: #0B3A34; /* -- accent: warm gold ---------------------------------------------------- * The warmth in the brief. Used sparingly: highlights, verification, empty * states — never as a second primary button. */ --gold-50: #FDF7EC; --gold-100: #FAEBCE; --gold-200: #F4D69C; --gold-300: #EBBC63; --gold-400: #DFA136; --gold-500: #C4861C; --gold-600: #A06B14; --gold-700: #7D5310; /* -- neutrals ------------------------------------------------------------- * Very slightly warm rather than pure grey, so the interface sits next to the * gold without looking cold. */ --n-0: #FFFFFF; --n-25: #FCFCFB; --n-50: #F7F7F5; --n-100: #F0F0ED; --n-200: #E3E3DE; --n-300: #CFCFC8; --n-400: #A9A9A1; --n-500: #7E7E76; --n-600: #5E5E57; --n-700: #46463F; --n-800: #2E2E29; --n-900: #1C1C18; --n-950: #121210; /* -- status --------------------------------------------------------------- */ --green-500: #17835B; --green-100: #E4F4EC; --amber-500: #B87503; --amber-100: #FBF0DC; --red-500: #C43D3D; --red-100: #FAE9E9; --blue-500: #2C6CB0; --blue-100: #E7F0F9; /* ========================================================================== * 2. SEMANTIC — what components actually use * ====================================================================== */ /* -- surfaces ------------------------------------------------------------- */ --canvas: var(--n-50); /* the page behind everything */ --surface: var(--n-0); /* cards, panels, the header */ --surface-sunken: var(--n-100); /* table heads, inset tiles, code */ --surface-raised: var(--n-0); /* menus and popovers above a card */ --overlay: rgba(18, 18, 16, 0.45); /* -- borders -------------------------------------------------------------- */ --border: var(--n-200); --border-strong: var(--n-300); /* -- ink ------------------------------------------------------------------ */ --ink: var(--n-900); /* headings and body copy */ --ink-soft: var(--n-600); /* secondary text */ --ink-muted: var(--n-500); /* captions, column headers, placeholders */ --ink-inverse: var(--n-0); /* on a dark or brand-coloured fill */ /* -- brand ---------------------------------------------------------------- */ --brand: var(--teal-500); --brand-hover: var(--teal-600); --brand-active: var(--teal-700); --brand-soft: var(--teal-50); /* tinted background */ --brand-border: var(--teal-200); --brand-ink: var(--teal-700); /* brand-coloured text on a light surface */ --brand-on: var(--n-0); /* text on a brand fill */ /* -- accent --------------------------------------------------------------- */ --accent: var(--gold-500); --accent-soft: var(--gold-50); --accent-border: var(--gold-200); --accent-ink: var(--gold-700); /* -- the dark panel ------------------------------------------------------- * THESE DO NOT FLIP WITH THE THEME, and that is the whole point of them. * * The home page's hero, the feature row, the label block on a service card * and the employers band are dark PANELS — dark on a white page and dark on * a dark one, the way a photograph stays a photograph in both themes. They * are a deliberate contrast against the page, not a surface that follows it. * * The first version of that layout used --ink-inverse for the text on them, * which is exactly wrong: --ink-inverse means "ink for a fill that inverts * the page", so in dark mode it correctly turns near-black — and the hero * heading disappeared. A panel that never inverts needs ink that never * inverts either, which is what this group is. * * Everything else on the page still uses the semantic tokens above and still * follows the theme. Reach for these ONLY on a surface that is dark by * design in both. */ --panel: var(--teal-900); --panel-deep: var(--n-950); /* the far end of the panel's gradient */ --panel-accent: var(--teal-300); --panel-ink: #FFFFFF; --panel-ink-soft: rgba(255, 255, 255, 0.76); --panel-ink-faint: rgba(255, 255, 255, 0.62); --panel-line: rgba(255, 255, 255, 0.28); --panel-line-hover: rgba(255, 255, 255, 0.10); /* The scrim that keeps a caption legible over a photograph, whatever the * photograph turns out to be. */ --panel-scrim: rgba(11, 58, 52, 0.88); --panel-scrim-soft: rgba(11, 58, 52, 0.15); /* -- status --------------------------------------------------------------- */ --success: var(--green-500); --success-soft: var(--green-100); --warning: var(--amber-500); --warning-soft: var(--amber-100); --danger: var(--red-500); --danger-soft: var(--red-100); --info: var(--blue-500); --info-soft: var(--blue-100); /* -- focus --------------------------------------------------------------- * One ring for the whole application. Never remove an outline without * putting this in its place — keyboard users lose the interface otherwise. */ --focus-ring: 0 0 0 3px rgba(30, 140, 121, 0.30); /* ========================================================================== * 3. TYPE * ====================================================================== */ /* Self-hosted fonts are optional — see shared/assets/fonts/README.md. Until * they are added, these stacks fall through to good system faces, so nothing * looks broken and no external request is ever made. */ --font-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Noto Naskh Arabic', serif; --font-arabic: 'Noto Naskh Arabic', 'Segoe UI', Tahoma, serif; --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; /* The active UI font. Overridden per language further down — components only * ever reference --font. */ --font: var(--font-latin); /* A modest scale: eight steps is enough for an entire application, and a * short scale is what keeps twenty pages looking like one product. */ --fs-xs: 0.75rem; /* 12px — captions, table headers */ --fs-sm: 0.8125rem; /* 13px — helper text, badges */ --fs-base: 0.9375rem; /* 15px — body */ --fs-md: 1rem; /* 16px — emphasised body, inputs */ --fs-lg: 1.125rem; /* 18px — card titles */ --fs-xl: 1.375rem; /* 22px — section headings */ --fs-2xl: 1.75rem; /* 28px — page titles */ --fs-3xl: 2.25rem; /* 36px — hero */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --lh-loose: 1.8; --tracking-tight: -0.011em; --tracking-wide: 0.02em; /* ========================================================================== * 4. SPACE — a 4px grid * ====================================================================== */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ /* ========================================================================== * 5. RADIUS, SHADOW, MOTION * ====================================================================== */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Soft and low-contrast on purpose. Depth comes from the surface stack; a * heavy shadow makes a dashboard look busy before any content arrives. */ --sh-1: 0 1px 2px rgba(18, 18, 16, 0.05); --sh-2: 0 2px 6px rgba(18, 18, 16, 0.06), 0 1px 2px rgba(18, 18, 16, 0.04); --sh-3: 0 8px 24px rgba(18, 18, 16, 0.08), 0 2px 6px rgba(18, 18, 16, 0.04); --sh-4: 0 20px 48px rgba(18, 18, 16, 0.14); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ========================================================================== * 6. DEPTH — every z-index in the application comes from here * ====================================================================== */ --z-base: 1; --z-sticky: 100; /* sticky tab bars, table headers */ --z-header: 200; --z-dropdown: 300; --z-overlay: 400; /* modal backdrop */ --z-modal: 500; --z-toast: 600; --z-banner: 700; /* the impersonation banner sits above everything */ /* ========================================================================== * 7. LAYOUT * ====================================================================== */ --header-h: 60px; --bottomnav-h: 62px; /* mobile only */ --sidebar-w: 248px; /* Folded: one 38px icon button plus its breathing room, so a folded item is the same size as a header icon button and reads as the same control. */ --sidebar-w-folded: 68px; --container: 1240px; --content-max: 760px; /* reading measure for long text */ } /* ============================================================================ * LANGUAGE — the UI font follows the language * ---------------------------------------------------------------------------- * Nastaliq is a tall, sloping script: at the Latin line-height it collides with * itself, so Urdu gets more room. This is the only place either fact is * encoded — components never test the language. * ========================================================================== */ html[lang="ur"] { --font: var(--font-urdu); --lh-tight: 1.5; --lh-snug: 1.7; --lh-normal: 1.9; --lh-loose: 2.1; } html[lang="ar"] { --font: var(--font-arabic); --lh-tight: 1.35; --lh-snug: 1.55; --lh-normal: 1.75; } /* ============================================================================ * DARK THEME * ---------------------------------------------------------------------------- * Only the SEMANTIC layer is re-pointed. No component knows a theme exists. * * The block appears twice on purpose and the two copies MUST stay identical: * * - the @media copy applies the system preference to a visitor who has not * chosen a theme, with no flash of the wrong colours on first paint * - the [data-theme="dark"] copy lets an explicit choice win in both * directions, including choosing dark on a light system * * There is no way to share one declaration list across a media query and a * plain selector in CSS, and a script that sets the attribute before paint * would have to be inline — which the strict CSP deliberately forbids. Two * copies is the honest cost. * ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --canvas: var(--n-950); --surface: var(--n-900); --surface-sunken: #171714; --surface-raised: var(--n-800); --overlay: rgba(0, 0, 0, 0.65); --border: #33332E; --border-strong: #45453E; --ink: #F2F2EF; --ink-soft: #B5B5AD; --ink-muted: #8B8B83; --ink-inverse: var(--n-950); /* Lifted a step: the 500 tones are too dark to read against a dark canvas. */ --brand: var(--teal-400); --brand-hover: var(--teal-300); --brand-active: var(--teal-200); --brand-soft: rgba(66, 170, 151, 0.14); --brand-border: rgba(66, 170, 151, 0.32); --brand-ink: var(--teal-300); --brand-on: var(--n-950); --accent: var(--gold-300); --accent-soft: rgba(235, 188, 99, 0.14); --accent-border: rgba(235, 188, 99, 0.30); --accent-ink: var(--gold-200); --success: #3FAE83; --success-soft: rgba(63, 174, 131, 0.15); --warning: #D79A3A; --warning-soft: rgba(215, 154, 58, 0.15); --danger: #E06A6A; --danger-soft: rgba(224, 106, 106, 0.15); --info: #5E9BDC; --info-soft: rgba(94, 155, 220, 0.15); --focus-ring: 0 0 0 3px rgba(66, 170, 151, 0.40); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --sh-3: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); --sh-4: 0 20px 48px rgba(0, 0, 0, 0.60); } } /* KEEP IDENTICAL TO THE BLOCK ABOVE. */ :root[data-theme="dark"] { color-scheme: dark; --canvas: var(--n-950); --surface: var(--n-900); --surface-sunken: #171714; --surface-raised: var(--n-800); --overlay: rgba(0, 0, 0, 0.65); --border: #33332E; --border-strong: #45453E; --ink: #F2F2EF; --ink-soft: #B5B5AD; --ink-muted: #8B8B83; --ink-inverse: var(--n-950); --brand: var(--teal-400); --brand-hover: var(--teal-300); --brand-active: var(--teal-200); --brand-soft: rgba(66, 170, 151, 0.14); --brand-border: rgba(66, 170, 151, 0.32); --brand-ink: var(--teal-300); --brand-on: var(--n-950); --accent: var(--gold-300); --accent-soft: rgba(235, 188, 99, 0.14); --accent-border: rgba(235, 188, 99, 0.30); --accent-ink: var(--gold-200); --success: #3FAE83; --success-soft: rgba(63, 174, 131, 0.15); --warning: #D79A3A; --warning-soft: rgba(215, 154, 58, 0.15); --danger: #E06A6A; --danger-soft: rgba(224, 106, 106, 0.15); --info: #5E9BDC; --info-soft: rgba(94, 155, 220, 0.15); --focus-ring: 0 0 0 3px rgba(66, 170, 151, 0.40); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40); --sh-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30); --sh-3: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.30); --sh-4: 0 20px 48px rgba(0, 0, 0, 0.60); }