/* shared-config/theme.css * * Shared visual theme for every page on staging.ziyaraat.net (and, once a * later project wires it up, other apps on this domain). Two independent * axes: light/dark mode (data-theme="dark" on , unchanged from * before) and a color family (data-color-theme="ocean"|"emerald"|"gold"| * "teal" on -- see shared-config/color-theme.js for the id list, * validation, and the per-user preference this drives). Ocean is the * default and stays defined on the bare :root/[data-theme="dark"] * selectors below (so a page rendered with no data-color-theme attribute * at all -- e.g. a stale cached page, or a future app that hasn't wired * the attribute in yet -- still gets a fully themed, correct look) -- * every other color family is scoped under its own [data-color-theme] * selector, at the same specificity, later in the cascade only where it * needs to win. This file's variable *names* must not need to change to * add a future color family, only a new value block below. * * Prefixed --shell-* so these can never collide with a page's own * variables -- specifically, the landing page (new_menu/landing-page.js) * keeps its own --accent/--cream/--ink variables at their current orange * values, entirely unaffected by this theme or its toggle. */ :root, [data-color-theme="ocean"] { --shell-bg: #eef2fb; --shell-surface: #ffffff; --shell-sidebar-bg: #f6f8fd; --shell-ink: #14213d; --shell-muted: #5b6b8c; --shell-border: #dce3f2; --shell-accent: #2f6fed; --shell-accent-dark: #1f56c9; --shell-radius: 10px; --shell-shadow: 0 10px 30px rgba(20, 33, 61, .08); --shell-font-ur: 'Noto Nastaliq Urdu', serif; --shell-accent-tint: #E2EBFC; /* soft background behind accent-coloured labels/chips */ --shell-on-accent: #ffffff; /* text/icons sitting ON an accent-coloured surface */ --shell-chip-1: var(--shell-accent-dark); --shell-chip-2: #7c2d12; --shell-chip-3: #581c87; /* Status colours -- the same in every colour family unless a family's block below overrides them. bg/fg pairs are for pills, banners and badges; the bare colour is for text, borders and KPI figures. */ --shell-danger: #c0392b; --shell-danger-bg: #3a1c1c; --shell-danger-fg: #ff8a8a; --shell-success: #1d6a46; --shell-success-bg: #123a26; --shell-success-fg: #7ee0a3; --shell-warning: #b8860b; --shell-warning-bg: #3a2f0f; --shell-warning-fg: #e0b84a; --shell-info-bg: #182233; --shell-info-fg: #8fb8ff; --shell-highlight-bg: #ffe14d; --shell-highlight-soft-bg: #e0b87e; --shell-highlight-fg: #1a1a1a; } /* ----- Non-colour tokens: the same in every colour family and in dark mode ----- Named in the asset library (/admin/asset-library) as text.*, font.*, radius.*, leading.*. Defined here (the token source of truth) and exposed to Tailwind through tailwind/input.css. Adopted page by page; a page that still uses its own sizes is not affected by these definitions until it is converted. */ :root { /* font roles */ --shell-font-latin: "Segoe UI", Tahoma, Verdana, Arial, sans-serif; --shell-font-quran: Amiri, serif; /* Quran text and Arabic display */ --shell-font-mono: "IBM Plex Mono", monospace; /* counts, codes (digits and Latin only) */ /* type scale (body 15px; headings scale with the viewport) */ --shell-text-caption: 11px; --shell-text-small: 13px; --shell-text-body: 15px; --shell-text-lead: 17px; --shell-text-h3: 20px; --shell-text-h2: clamp(22px, 1.2rem + 0.7vw, 26px); --shell-text-h1: clamp(26px, 1.3rem + 1.1vw, 32px); --shell-text-display: clamp(30px, 1.4rem + 2vw, 44px); /* line heights */ --shell-leading-tight: 1.25; --shell-leading-normal: 1.5; --shell-leading-urdu: 2; /* corner radii (--shell-radius above stays the "md" value) */ --shell-radius-sm: 6px; --shell-radius-lg: 14px; --shell-radius-full: 999px; } [data-theme="dark"] { /* Backgrounds deliberately land around 85-90% black (a soft charcoal, ~13% lightness) rather than near-black -- confirmed via the visual brainstorming companion on 2026-09-16 as easier on the eyes than the original ~94%-black values. */ --shell-bg: #1f2125; --shell-surface: #262930; --shell-sidebar-bg: #23262c; --shell-ink: #e8eaf0; --shell-muted: #a9afbc; --shell-border: #323742; --shell-accent: #4f7cff; --shell-accent-dark: #3f6ae0; --shell-accent-tint: color-mix(in srgb, var(--shell-accent) 22%, transparent); --shell-chip-1: var(--shell-accent); --shell-chip-2: #ffb58a; --shell-chip-3: #d4b3ff; --shell-shadow: 0 10px 30px rgba(0, 0, 0, .4); } /* ===== Color-theme families (beyond the default Ocean Blue above) ===== Each [data-color-theme="X"] block has the same specificity as the bare [data-theme="dark"] block above, so a combined selector ([data-color-theme="X"][data-theme="dark"]) is needed for that family's dark variant to reliably win over both -- see the file header comment. */ [data-color-theme="emerald"] { --shell-bg: #eef6f0; --shell-surface: #ffffff; --shell-sidebar-bg: #f4f9f5; --shell-ink: #173327; --shell-muted: #5f7d6c; --shell-border: #dcebe0; --shell-accent: #27875a; --shell-accent-dark: #1d6a46; --shell-accent-tint: #DCEFE4; } [data-color-theme="emerald"][data-theme="dark"] { --shell-bg: #1f2522; --shell-surface: #242d28; --shell-sidebar-bg: #212924; --shell-ink: #e6f0ea; --shell-muted: #9fb8ab; --shell-border: #303d35; --shell-accent: #3fbf85; --shell-accent-dark: #2f9c6a; --shell-accent-tint: color-mix(in srgb, var(--shell-accent) 22%, transparent); } [data-color-theme="gold"] { --shell-bg: #faf6ee; --shell-surface: #ffffff; --shell-sidebar-bg: #f8f2e4; --shell-ink: #3a2f1d; --shell-muted: #8a7860; --shell-border: #ecdfc2; --shell-accent: #9c7226; --shell-accent-dark: #7c5a1e; --shell-accent-tint: #F1E6CC; } [data-color-theme="gold"][data-theme="dark"] { --shell-bg: #25221c; --shell-surface: #2c2720; --shell-sidebar-bg: #27231d; --shell-ink: #f0e8d8; --shell-muted: #b8a888; --shell-border: #3b3426; --shell-accent: #d1a04a; --shell-accent-dark: #b8862f; --shell-accent-tint: color-mix(in srgb, var(--shell-accent) 22%, transparent); } [data-color-theme="teal"] { --shell-bg: #eef6f7; --shell-surface: #ffffff; --shell-sidebar-bg: #f2f9fa; --shell-ink: #123437; --shell-muted: #5c7f82; --shell-border: #d7ecee; --shell-accent: #1f8a8f; --shell-accent-dark: #156b6f; --shell-accent-tint: #DBEEEF; } [data-color-theme="teal"][data-theme="dark"] { --shell-bg: #1d2526; --shell-surface: #232d2e; --shell-sidebar-bg: #202829; --shell-ink: #e2eef0; --shell-muted: #9bb5b8; --shell-border: #2d3f42; --shell-accent: #3fb0b6; --shell-accent-dark: #2b9096; --shell-accent-tint: color-mix(in srgb, var(--shell-accent) 22%, transparent); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--shell-bg); color: var(--shell-ink); } a { color: inherit; text-decoration: none; } /* No document-wide Urdu font rule here on purpose: an earlier version had :lang(ur) { font-family: var(--shell-font-ur); } which matched every descendant of , re-fonting the entire (still-English) page in Nastaliq whenever a visitor switched to Urdu. Urdu font rules are scoped to the specific elements that carry real translated text instead -- the header/mega-menu/sidebar chrome now carries its own [&[lang="ur"]] variants in shared-config/ui-shell.js's class strings, converted to Tailwind 2026-09-22; this file no longer has header rules at all. */ /* Everything past this point -- KPI tiles, manuscript/launch cards, filter pills, the upload dropzone, data tables and the whole List-Pages pattern (filter panel/pagination/row actions), the card+form shell, the colour-theme picker and the modal dialog -- moved to Tailwind (shared-config/ui-shared.js's SHARED map) on 2026-09-22. This file now only owns the colour theme tokens above and the few small global resets (box-sizing, body font, the `a{color:inherit}` reset) still relied on everywhere. */