/* ========================================================================= tokens.css — Design token layer iDev Digital Library Portal — Wireframe Pack v2 ("refined institutional") The single source of every colour, size, radius, shadow and font in the pack. Nothing outside this file may hard-code any of those values. v2 design direction: precision, restraint, density. Deep navy primary, one warm accent, near-neutral surfaces layered by luminance, hairline borders, near-subliminal elevation. Embedded typefaces (fonts.css): 'InterPack' (Latin 400/500/600/700) + 'PlexArabicPack' (Arabic 400/500/600/700), each carrying unicode-range so ONE stack serves both scripts and the browser picks per glyph. Structure: 1. Fonts & direction-aware typography 2. Type scale, spacing, radii, borders, elevation, motion, z-scale 3. Light theme (default) — neutrals, brand, status 4. Dark theme — full re-derivation on [data-theme="dark"] 5. Tenant palettes — aurora / meridian / qasr, light + dark 6. Print Theme is driven by , tenant by , both set by shell.js. RTL/Arabic is driven purely by . --------------------------------------------------------------------- TOKENS ADDED IN v2 (safe to use anywhere; every v1 name still works): Type --fs-2xs 11px (dense meta, badge/th caps) --fs-display 40px (page-title display size) --fw-regular 400 · --fw-medium 500 · --fw-semibold 600 --fw-bold 700 (the embedded faces ship exactly these) --lh-tight (display/stat numerals; Arabic re-derives) --tracking-display (display headings; Arabic resets) Surfaces --surface-hover (row/list hover — quieter than --surface-2) --scrim (one overlay recipe for modal/drawer/menu scrims) Elevation --shadow-xs (controls: buttons, inputs, table wraps) Focus --focus-ring (theme-correct focus outline colour; local surfaces that invert their ink re-point it — see .toast) Metrics --ctl-h-sm 24px · --ctl-h-md 32px · --ctl-h-lg 40px (control heights: buttons, inputs, selects) Z-scale --z-sticky 100 · --z-dropdown 300 · --z-drawer 500 --z-modal 600 · --z-toast 700 (contract: guide.css owns 800+) --------------------------------------------------------------------- */ /* ------------------------------------------------------------------ */ /* 1. Fonts & direction-aware typography */ /* ------------------------------------------------------------------ */ :root { /* Embedded stacks (fonts.css, loaded before this file). Both families carry unicode-range, so the pair covers both scripts in either order — the order only decides which metrics lead. */ --font-latin: "InterPack", "PlexArabicPack", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ar: "PlexArabicPack", "InterPack", -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; /* Mono stack. The Latin monospace families below carry no Arabic, so Arabic inside `.mono` / `code` (contract §5.5 wraps Latin runs in .mono, but real screens also put Arabic query strings and names in it) would fall through to the OS `monospace` generic — which on many platforms has no Arabic joining forms. 'PlexArabicPack' is appended BEFORE the generic so those runs still shape in the embedded face. It carries an Arabic-only unicode-range, so it can never steal Latin glyphs from the monospace families ahead of it. */ --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "PlexArabicPack", monospace; /* The stack the UI actually uses; swapped for Arabic below. */ --font-ui: var(--font-latin); /* Display stack for large headings. In Latin this is simply the UI face — Inter is already strong at display sizes. Arabic re-points it at a Kufi face below, because Arabic set entirely in one neutral UI face reads as "translated" rather than "designed". */ --font-display: var(--font-latin); /* Weights — the embedded faces ship exactly 400/500/600/700. Never ask for an in-between weight (e.g. 650): with static faces the browser rounds it and the render drifts between platforms. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Leading. Arabic script needs more vertical room than Latin at the same size, so these are re-derived for RTL/Arabic documents. */ --lh-body: 1.55; --lh-heading: 1.25; --lh-tight: 1.1; /* display headings, stat numerals */ /* Tracking. Arabic is cursive: positive tracking splits the connected baseline and negative tracking overlaps glyphs, so EVERY letter-spacing declaration in this pack must come from one of these tokens — never a literal value. The Arabic block below resets all of them to `normal`, which is what makes the rule self-neutralising. */ --tracking-display: -0.02em; /* display / page titles */ --tracking-tight: -0.014em; /* large headings, stat values */ --tracking-tight-2: -0.008em; /* section headings */ --tracking-caps: 0.05em; /* uppercase eyebrows, th, stat labels */ } /* Arabic documents: Arabic-first stack, roomier leading, zero tracking. Matches either signal — shell.js sets both lang and dir on . */ :root[lang="ar"], :root[dir="rtl"] { --font-ui: var(--font-ar); --font-display: "KufiDisplayPack", var(--font-ar); --lh-body: 1.75; --lh-heading: 1.45; --lh-tight: 1.3; --tracking-display: normal; --tracking-tight: normal; --tracking-tight-2: normal; --tracking-caps: normal; } /* Latin runs embedded in an Arabic document keep their Latin tracking — an ISSN or a vendor name should not lose its uppercase spacing just because the surrounding document is Arabic. */ :root[lang="ar"] [dir="ltr"], :root[dir="rtl"] [dir="ltr"] { --tracking-caps: 0.05em; } /* ------------------------------------------------------------------ */ /* 2. Scale tokens (theme-independent) */ /* ------------------------------------------------------------------ */ :root { /* Type scale — a deliberate ramp: display for page titles, a clear step to section headings, comfortable body, dense meta. */ /* v3.1 — the scale was compressed and it is a large part of why the pack read as dull. 13/15/17 are three sizes doing one job, and a 40px display against 15px body is a 2.7:1 ratio, which is not a display tier at all — it is a slightly bigger heading. Two body sizes now, deliberately: the public portal reads at 16px, the admin console at 14px. A dense console set at reading size looks like a website that has been given a table; a portal set at console size looks like an intranet. They are different products for different postures and the type should say so. The display step is 4:1 against public body. Weight never exceeds 600 above 32px — heavy at large size is the loudest dated tell in the whole system. */ --fs-2xs: 11px; /* caps labels, badges, table headers */ --fs-xs: 12px; /* meta, hints, dense admin cells */ --fs-sm: 13px; /* controls, dense tables */ --fs-ui: 14px; /* ADMIN body — the console's reading size */ --fs-md: 16px; /* PUBLIC body — the portal's reading size */ --fs-lg: 18px; /* card/modal titles, lead paragraphs */ --fs-xl: 22px; /* section headings */ --fs-2xl: 28px; /* page headings, stat values */ --fs-3xl: 36px; /* hero headings */ --fs-display: 64px;/* portal display titles — 4:1 against body */ /* Radii — considered, not generically round: small for controls, medium for cards and wraps, large only for hero surfaces. */ /* Radius GRAMMAR, not radius values: one for controls, one for containers, one for pills — and the nesting rule that an inner radius equals the outer minus its padding. Mixed arbitrary radii are the amateur tell; three with a rule reads as a system. */ --r-sm: 6px; /* controls: buttons, inputs, chips */ --r-md: 10px; /* containers: cards, panels, wraps */ --r-lg: 14px; /* large surfaces: hero, modal */ --r-full: 999px; /* pills and circles */ /* Spacing — strict 4px base scale. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-11: 44px; --sp-12: 48px; /* Borders. */ --border-w: 1px; /* Control heights — one rhythm for buttons, inputs, selects. */ --ctl-h-sm: 24px; --ctl-h-md: 32px; --ctl-h-lg: 40px; /* Motion. Durations pair with the global reduced-motion kill switch in base.css. */ /* A published motion budget. Three durations, one curve, nothing above 300ms. Slow and uniform is the "considered" signal; varied, springy easing is what reads as a template. Only transform and opacity are ever animated — animating colour or size on a table row makes a dense list feel unstable under the cursor. */ --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1); --t-med: 180ms cubic-bezier(0.2, 0, 0, 1); --t-slow: 240ms cubic-bezier(0.2, 0, 0, 1); /* Layering — the one ordered scale for every stacking decision (contract note in components.css §11). guide.css owns 800+. */ --z-sticky: 100; --z-dropdown: 300; --z-drawer: 500; --z-modal: 600; --z-toast: 700; } /* ------------------------------------------------------------------ */ /* 3. Light theme (default) */ /* ------------------------------------------------------------------ */ :root { color-scheme: light; /* Neutrals — cool slate with a faint navy cast. Three layers: page ground (--bg) → raised surface (--surface) → sunken well (--bg-sunken), separated by hairlines, not by loud tone jumps. */ /* v3 "ruled page": the ground is warm paper and the card above it is a cool near-white, so surfaces separate by TEMPERATURE as well as by luminance. A card then lifts off the page even where the shadow is nearly invisible — which is what a client actually sees in a screenshot at 100%. Every pair here is contrast-verified. */ --bg: #f5f2ee; /* page ground — warm paper */ --bg-sunken: #eae5de; /* wells, input troughs, recessed areas */ --surface: #ffffff; /* cards, panels, tables */ --surface-2: #f7f4f0; /* table heads, pressed states, chrome */ --surface-hover: #faf8f5; /* row/list hover — a half-step quieter */ /* --border is a DECORATIVE hairline only (1.11:1 — it separates, it does not identify). It must never be the sole boundary of a control: that is --border-strong's job, and WCAG 1.4.11 puts a 3:1 floor on it because .input/.select/.textarea/.btn share --surface with the card they sit on and have no other boundary cue. Verified ≥3.08:1 against all five light surface roles (3.54 on --surface, 3.21 on --surface-2, 3.08 on --bg-sunken), so the resting control outline holds wherever the control is placed. */ --border: #e6e0d8; /* hairlines — decorative, never a boundary */ --border-strong: #8a8175; /* control outlines, emphasised rules */ --text: #141c2b; /* primary ink — near-navy, not black */ --text-muted: #4d5a6c; /* secondary ink */ /* Tertiary ink is real body/meta text (.field-hint, ::placeholder, .facet-count, .console-nav-group, .app-tab), not decoration, so it carries the full 4.5:1 body-text floor — verified on all five light surface roles (5.19 --surface, 4.71 --surface-2, 4.51 --bg-sunken). */ --text-faint: #5e6873; /* tertiary ink, placeholders */ /* Brand — deep navy, authoritative, near-ink. Default palette mirrors the "aurora" demo tenant so an unthemed page still looks finished. Tenants override in §5. */ --primary: #24365f; --primary-hover: #1b294a; --primary-fg: #ffffff; --primary-soft: #e9edf6; /* --primary is the FILL role (button/badge background, paired with --primary-fg). --primary-ink is the ON-SURFACE TEXT role: links, active tabs/chips/nav/tree/facet rows, .btn--subtle, .avatar. Never use --primary as a foreground colour — it is not required to clear AA against --surface / --surface-2 / --primary-soft. In light themes the two coincide (every tenant --primary measures 6.9:1–10.8:1 on --surface-2), so this is a plain alias and it tracks the tenant --primary automatically. Dark themes re-derive it per tenant in §4 and §5. */ --primary-ink: var(--primary); /* The ONE warm accent — aged bronze. It appears only where it carries meaning (featured, starred, .badge--accent, .card--accent keylines when a screen opts in) — never decoratively. */ --accent: #8a6410; /* Status — semantic only. Each is BOTH the .badge ink on its own -soft pastel (11px semibold = small text, so 4.5:1 applies) and the .stat-delta / .alert icon ink on the neutral surfaces. --ok and --warn are tuned to clear 4.5:1 on their -soft pairs (4.56 and 4.50); .step--done keeps a white label on --ok at 5.35:1. */ --ok: #197b35; --warn: #956400; --danger: #b42318; --danger-hover: #9b1c13; --info: #175cd3; /* Soft (tinted-background) variants — light theme uses solid pastels. */ --ok-soft: #ddf2e4; --warn-soft: #faf0d2; --danger-soft: #fbe5e2; --info-soft: #e0eafb; /* Warm parchment, tuned to the bronze --accent above. --accent and --accent-soft are a PAIR (.badge--accent puts one on the other), so every tenant that overrides --accent must override this too — §5. */ --accent-soft: #f6eeda; /* Focus ring — theme-correct indicator colour (WCAG 1.4.11 needs ≥3:1 against the surface; navy ink clears it everywhere). Local inverted surfaces (.toast) re-point this. */ --focus-ring: var(--primary); /* Overlay scrim — one recipe for .modal, .console-scrim, .wf-scrim. A scrim must always DARKEN what it obscures, so it is never derived from --text. */ --scrim: rgba(16, 24, 40, 0.55); /* Elevation — v3. The v2 ladder described itself as "near-subliminal: if a shadow is obvious, it is wrong", and on a 1440px page that produced a grid of cards with no lift at all. The restraint read as unfinished rather than refined, which is the note iDev raised. Each level is now a real two-part shadow: a tight contact edge that defines the card's footprint, plus a soft ambient pool that gives it height. Both are warm-tinted (43,34,20) to sit on warm paper — a cool shadow on a warm ground reads as grey dirt. */ --shadow-xs: 0 1px 2px rgba(43, 34, 20, 0.06); --shadow-sm: 0 1px 2px rgba(43, 34, 20, 0.05), 0 2px 6px -1px rgba(43, 34, 20, 0.07); --shadow-md: 0 2px 4px rgba(43, 34, 20, 0.06), 0 8px 20px -4px rgba(43, 34, 20, 0.12); --shadow-lg: 0 4px 8px rgba(43, 34, 20, 0.08), 0 24px 48px -12px rgba(43, 34, 20, 0.22); } /* ------------------------------------------------------------------ */ /* 3b. Posture — the console reads at a different size to the portal */ /* ------------------------------------------------------------------ */ /* The admin console is a dense working tool and the public portal is a reading surface. Rather than annotate hundreds of elements, the console simply remaps the body token: everything inside .console that asked for reading size now gets console size, and the whole tier steps down with it. This is the "the admin must not look like the portal" rule made structural instead of editorial. */ .console { --fs-md: var(--fs-ui); /* 16px -> 14px */ --fs-lg: 16px; /* card titles: still a step up, not a shout */ --fs-xl: 19px; --fs-2xl: 24px; } /* No display tier in the console, at all. */ .console .portal-hero, .console [class*="display"] { font-size: var(--fs-2xl); } /* ------------------------------------------------------------------ */ /* 4. Dark theme — every role re-derived, not inverted */ /* ------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; /* Neutrals — v3. Re-derived warm to match the light theme's paper ground: the dark mode of a reading room, not of a terminal. Same luminance ladder as v2 (ground darkest → raised surface → lifted chrome, never pure black), rotated off the blue axis so the warm shadow tint and the warm border hairlines do not read as dirt on a cool slate. Every ink/surface pair re-verified: text ≥12.09:1, muted ≥6.87:1, faint ≥5.04:1, --border-strong ≥3.09:1. */ --bg: #17161a; --bg-sunken: #111013; --surface: #1e1c22; --surface-2: #282630; --surface-hover: #232128; --border: #332f39; /* decorative hairline — never a boundary */ --border-strong: #767078; /* ≥3.09:1 on all five dark surfaces */ --text: #eae7e4; --text-muted: #b4aeb8; --text-faint: #9a949e; /* body ink → 4.5:1 floor; 5.04 worst case */ /* Brand (aurora-equivalent). --primary is the FILL: lifted enough for a dark page while keeping WCAG AA against --primary-fg (5.30:1). It is NOT readable as text on --surface, so on-surface text uses --primary-ink, lifted far enough to clear AA on the worst pairing in the pack — --primary-ink on --primary-soft composited over --surface-2 (5.07:1); on --surface-2 alone it is 6.17:1. */ --primary: #4b66c0; --primary-hover: #5a75cd; --primary-fg: #ffffff; --primary-ink: #94a9e8; --accent: #d2a545; /* Status — brightened for dark surfaces. --danger is lifted from #e66358: as .badge--danger ink over --danger-soft it only made 4.05:1 on --surface and 3.55:1 on --surface-2 (.card-foot, .modal-foot, zebra hover). At #eb8279 it is 4.52:1 over --surface-2 and 5.15:1 over --surface, and .btn--danger's `color: var(--surface)` label on the solid fill rises to 6.22:1. */ --ok: #4ab873; --warn: #dbab26; --danger: #eb8279; /* Lifted in step with --danger: dark-theme hovers brighten (as --primary → --primary-hover does), and the old #ec7a70 is now darker than the resting fill, which would read as a dead hover. */ --danger-hover: #ef948c; --info: #6da8f7; /* Soft variants — low-alpha overlays, NOT the light-theme pastels, so they sit correctly on any dark surface. Alpha is load-bearing: each soft tint composites over its real parent surface, and the status ink must still clear 4.5:1 on the LIGHTEST one (--surface-2). --danger-soft deliberately keeps the old rgb — retinting it to the new --danger would push it back under. --ok-soft drops to 0.10 so --ok clears 4.81:1 over --surface-2 (was 4.48:1). */ --ok-soft: rgba(74, 184, 115, 0.10); --warn-soft: rgba(219, 171, 38, 0.13); --danger-soft: rgba(230, 99, 88, 0.15); --info-soft: rgba(109, 168, 247, 0.14); --primary-soft: rgba(94, 122, 211, 0.16); --accent-soft: rgba(210, 165, 69, 0.15); /* Focus ring — the pale brand ink: ≥5:1 on every dark surface. */ --focus-ring: var(--primary-ink); --scrim: rgba(2, 6, 12, 0.68); /* Elevation — on dark ground, depth comes mostly from surface luminance; shadows only anchor the layers. */ /* Depth in dark mode comes from the four-step surface ladder above, never from shadow. A drop shadow on a dark ground is invisible at best and a grey smear at worst, and stacking them is the single most common way a dark theme looks cheap. Kept as hairlines so controls still have an edge. */ --shadow-xs: 0 0 0 var(--border-w) rgba(255, 255, 255, 0.04); --shadow-sm: 0 0 0 var(--border-w) rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 0 0 var(--border-w) rgba(255, 255, 255, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.42); --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.30), 0 18px 36px -8px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------ */ /* 5. White-label tenant palettes */ /* Each tenant overrides --primary / --primary-hover / */ /* --primary-soft / --accent / --accent-soft, in both themes, plus */ /* --primary-ink in dark. Everything else (neutrals, status */ /* colours) is deliberately shared — that is what makes the three */ /* read as one product. */ /* */ /* Contrast contract for a tenant palette (all verified): */ /* --primary ≥ 4.5:1 vs --primary-fg (it is a fill) */ /* --primary-ink ≥ 4.5:1 vs --surface-2 AND vs --primary-soft */ /* composited over --surface-2 (it is ink) */ /* --accent ≥ 4.5:1 vs --accent-soft (.badge--accent) */ /* Light tenants inherit --primary-ink: var(--primary) from §3. */ /* ------------------------------------------------------------------ */ /* -- aurora — deep navy, academic (same as the root default, restated so switching back from another tenant always works). -- */ [data-tenant="aurora"] { --primary: #24365f; /* fill 11.88:1 on #fff; ink 10.78:1 on --surface-2 */ --primary-hover: #1b294a; --primary-soft: #e9edf6; --accent: #8a6410; /* 4.64:1 on --accent-soft */ --accent-soft: #f6eeda; } [data-theme="dark"][data-tenant="aurora"] { --primary: #4b66c0; /* 5.30:1 vs --primary-fg */ --primary-hover: #5a75cd; --primary-soft: rgba(94, 122, 211, 0.16); --primary-ink: #94a9e8; /* 6.17:1 on --surface-2 */ --accent: #d2a545; /* 4.77:1 on --accent-soft/--surface-2 */ --accent-soft: rgba(210, 165, 69, 0.15); } /* -- meridian — deep evergreen-teal, research-institute feel. -------- */ [data-tenant="meridian"] { --primary: #0d5f50; /* fill 7.58:1 on #fff; ink 6.88:1 on --surface-2 */ --primary-hover: #0a4c40; --primary-soft: #e1f1eb; --accent: #9a4708; /* burnt sienna — 5.47:1 on --accent-soft */ --accent-soft: #fbeade; } [data-theme="dark"][data-tenant="meridian"] { --primary: #12796e; /* 5.27:1 vs --primary-fg */ --primary-hover: #15897c; --primary-soft: rgba(35, 164, 148, 0.16); --primary-ink: #4fc0ac; /* 6.42:1 on --surface-2 */ --accent: #eb9c5a; /* 4.94:1 on --accent-soft/--surface-2 */ --accent-soft: rgba(235, 156, 90, 0.14); } /* -- qasr — deep burgundy & gold, Gulf institutional. ---------------- */ [data-tenant="qasr"] { --primary: #6e2233; /* fill 10.83:1 on #fff; ink 9.83:1 on --surface-2 */ --primary-hover: #571a28; --primary-soft: #f6e8ec; --accent: #7d6220; /* old gold — 4.90:1 on --accent-soft */ --accent-soft: #f5ecd6; } [data-theme="dark"][data-tenant="qasr"] { --primary: #a03a50; /* 6.53:1 vs --primary-fg */ --primary-hover: #ae4a5f; --primary-soft: rgba(190, 90, 110, 0.17); --primary-ink: #e4899c; /* 5.66:1 on --surface-2 */ --accent: #d2ab4f; /* 5.04:1 on --accent-soft/--surface-2 */ --accent-soft: rgba(210, 171, 79, 0.14); } /* ------------------------------------------------------------------ */ /* 6. Print */ /* ------------------------------------------------------------------ */ @media print { :root, [data-theme="dark"] { /* Always print the light palette on white, with no elevation. */ color-scheme: light; --bg: #ffffff; --bg-sunken: #f3f4f6; --surface: #ffffff; --surface-2: #f5f6f8; --surface-hover: #ffffff; /* Surfaces are forced light here, so the dark-theme --primary-ink (deliberately pale) would be unreadable on paper. Fall back to the fill colour, which is the darker of the two in every palette. */ --primary-ink: var(--primary); --focus-ring: var(--primary); --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } } /* ------------------------------------------------------------------ */ /* 7. Arabic display typography */ /* ------------------------------------------------------------------ */ /* Noto Kufi Arabic is a DISPLAY face: geometric, high-contrast, and genuinely tiring to read as body copy. It is bound to large headings only — never to body text, table cells, form labels or controls. Kufi also sits optically larger and taller than Plex Arabic at the same nominal size, so headings get a slightly tighter line-height to stop Arabic titles from looking loose next to their English equivalents. Latin documents are untouched: --font-display resolves to Inter. */ :root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] .section-title, :root[lang="ar"] .console-title, :root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] .section-title, :root[dir="rtl"] .console-title { font-family: var(--font-display); line-height: 1.35; font-weight: var(--fw-semibold); }