/* * INSPIRE — design tokens. * * The theme engine is pure CSS custom properties. Switching theme or colour * scheme sets two attributes on and every surface re-colours, because * nothing hard-codes a colour anywhere else. * * * * Direction uses logical properties (inline-start/end, margin-inline) so the * same rules serve Arabic and English without a mirrored stylesheet. */ /* ---------------------------------------------------------------- palette */ :root { /* Neutral ramp — shared by every theme, tuned for long reading sessions. */ --n-0: #ffffff; --n-25: #fbfcfc; --n-50: #f5f7f6; --n-100: #eef2f0; --n-150: #e5eae7; --n-200: #dae1dd; --n-300: #c2ccc6; --n-400: #94a199; --n-500: #6c7a73; --n-600: #566159; --n-700: #3e4742; --n-800: #2a312d; --n-850: #212623; --n-900: #181c1a; --n-950: #0f1211; /* Semantic status colours. */ --ok: #1f7a38; --ok-soft: #e3f3e7; --warn: #b45309; --warn-soft: #fdf0dc; --err: #b91c1c; --err-soft: #fce8e8; --info: #1d4ed8; --info-soft: #e4ecfb; /* Geometry and motion. */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --shadow-sm: 0 1px 2px rgba(16, 24, 20, .06), 0 1px 3px rgba(16, 24, 20, .04); --shadow-md: 0 2px 6px rgba(16, 24, 20, .07), 0 6px 16px rgba(16, 24, 20, .06); --shadow-lg: 0 8px 24px rgba(16, 24, 20, .10), 0 20px 48px rgba(16, 24, 20, .10); --sidebar-w: 268px; --sidebar-w-collapsed: 68px; --topbar-h: 60px; --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: 120ms; --t-base: 200ms; /* Typography — Arabic and Latin faces paired at matching optical sizes. */ /* Readex Pro was drawn for Arabic and Latin together, so one family carries both scripts at the same weight and rhythm — no pairing to keep in step. */ --font-ar: "Readex Pro", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif; --font-en: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font: var(--font-ar); --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 27px; --fs-3xl: 34px; } :root[lang="en"] { --font: var(--font-en); } /* ------------------------------------------------------------ five themes */ /* A theme supplies only its brand ramp; surfaces come from the scheme. */ :root[data-theme="emerald"] { --brand-rgb: 47, 163, 77; /* the brand as a triplet, for translucent surfaces */ --brand-50: #e8f5ec; --brand-100: #cfe9d8; --brand-300: #79c894; --brand-500: #2fa34d; /* Direct Aid green, taken from the Power App */ --brand-600: #24893f; --brand-700: #1f7a38; --brand-900: #145125; --brand-contrast: #ffffff; } :root[data-theme="teal"] { --brand-rgb: 18, 138, 130; /* the brand as a triplet, for translucent surfaces */ --brand-50: #e4f4f3; --brand-100: #c5e7e5; --brand-300: #66c3bd; --brand-500: #128a82; --brand-600: #0f766e; --brand-700: #0d635d; --brand-900: #0a4541; --brand-contrast: #ffffff; } :root[data-theme="indigo"] { --brand-rgb: 59, 83, 196; /* the brand as a triplet, for translucent surfaces */ --brand-50: #eaeefb; --brand-100: #d2dbf6; --brand-300: #8fa4e8; --brand-500: #3b53c4; --brand-600: #3245a8; --brand-700: #2a3a8e; --brand-900: #1c2761; --brand-contrast: #ffffff; } :root[data-theme="slate"] { --brand-rgb: 72, 89, 107; /* the brand as a triplet, for translucent surfaces */ --brand-50: #eceff2; --brand-100: #d7dce2; --brand-300: #9aa6b4; --brand-500: #48596b; --brand-600: #3b4a59; --brand-700: #313d4a; --brand-900: #1f2831; --brand-contrast: #ffffff; } :root[data-theme="amber"] { --brand-rgb: 183, 121, 31; /* the brand as a triplet, for translucent surfaces */ --brand-50: #fdf2e0; --brand-100: #fae2bd; --brand-300: #eeb85d; --brand-500: #b7791f; --brand-600: #9c6519; --brand-700: #825415; --brand-900: #593a0f; --brand-contrast: #ffffff; } /* --------------------------------------------------------- light surfaces */ :root, :root[data-scheme="light"] { --bg: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-25); --surface-3: var(--n-100); --line: var(--n-200); --line-soft: var(--n-100); --text: var(--n-900); --text-2: var(--n-600); --text-3: var(--n-500); --text-invert: var(--n-0); /* Navigation carries the brand: a translucent tint of it, blurred over the page's own wash, so switching theme recolours the sidebar too. */ --nav-bg: linear-gradient(180deg, rgba(var(--brand-rgb), .20) 0%, rgba(var(--brand-rgb), .11) 100%); --nav-text: var(--brand-900); --nav-muted: rgba(20, 45, 32, .66); --nav-line: rgba(255, 255, 255, .55); --nav-group-bg: rgba(255, 255, 255, .40); --nav-active-bg: rgba(255, 255, 255, .88); --nav-active-text: var(--brand-700); /* Balanced glass: frame surfaces are translucent, data surfaces are not. */ --glass: rgba(255, 255, 255, .72); --glass-line: rgba(255, 255, 255, .80); --glass-blur: 18px; --page-wash: radial-gradient(1100px 620px at 88% -10%, rgba(var(--brand-rgb), .16), transparent 60%), radial-gradient(900px 560px at 4% 104%, rgba(var(--brand-rgb), .10), transparent 62%); --accent: var(--brand-500); --accent-hover: var(--brand-600); --accent-soft: var(--brand-50); --accent-line: var(--brand-100); --on-accent: var(--brand-contrast); --scrim: rgba(24, 28, 26, .38); --focus: var(--brand-500); color-scheme: light; } /* ---------------------------------------------------------- dark surfaces */ :root[data-scheme="dark"] { --bg: var(--n-950); --surface: var(--n-900); --surface-2: var(--n-850); --surface-3: var(--n-800); --line: #2c3430; --line-soft: #232a26; --text: #e8edea; --text-2: #a6b2ac; --text-3: #7f8b85; --text-invert: var(--n-950); --nav-bg: linear-gradient(180deg, rgba(var(--brand-rgb), .22) 0%, rgba(var(--brand-rgb), .10) 100%), var(--n-900); --nav-text: #d3ded7; --nav-muted: rgba(211, 222, 215, .62); --nav-line: rgba(255, 255, 255, .12); --nav-group-bg: rgba(255, 255, 255, .06); --nav-active-bg: rgba(255, 255, 255, .13); --nav-active-text: #ffffff; --glass: rgba(24, 28, 26, .66); --glass-line: rgba(255, 255, 255, .10); --glass-blur: 18px; --page-wash: radial-gradient(1100px 620px at 88% -10%, rgba(var(--brand-rgb), .20), transparent 60%), radial-gradient(900px 560px at 4% 104%, rgba(var(--brand-rgb), .12), transparent 62%); --accent: var(--brand-300); --accent-hover: var(--brand-100); --accent-soft: rgba(255, 255, 255, .06); --accent-line: rgba(255, 255, 255, .12); --on-accent: var(--n-950); --ok: #62c27f; --warn: #e6a64f; --err: #ef7676; --info: #7ea2f0; --ok-soft: rgba(31, 122, 56, .18); --warn-soft: rgba(180, 83, 9, .18); --err-soft: rgba(185, 28, 28, .20); --info-soft: rgba(29, 78, 216, .20); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 2px 8px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .60); --focus: var(--brand-300); color-scheme: dark; } /* Follow the operating system when the user chose "system". */ @media (prefers-color-scheme: dark) { :root[data-scheme="system"] { --bg: var(--n-950); --surface: var(--n-900); --surface-2: var(--n-850); --surface-3: var(--n-800); --line: #2c3430; --line-soft: #232a26; --text: #e8edea; --text-2: #a6b2ac; --text-3: #7f8b85; --text-invert: var(--n-950); --nav-bg: linear-gradient(180deg, rgba(var(--brand-rgb), .22) 0%, rgba(var(--brand-rgb), .10) 100%), var(--n-900); --nav-text: #d3ded7; --nav-muted: rgba(211, 222, 215, .62); --nav-line: rgba(255, 255, 255, .12); --nav-group-bg: rgba(255, 255, 255, .06); --nav-active-bg: rgba(255, 255, 255, .13); --nav-active-text: #ffffff; --glass: rgba(24, 28, 26, .66); --glass-line: rgba(255, 255, 255, .10); --glass-blur: 18px; --page-wash: radial-gradient(1100px 620px at 88% -10%, rgba(var(--brand-rgb), .20), transparent 60%), radial-gradient(900px 560px at 4% 104%, rgba(var(--brand-rgb), .12), transparent 62%); --accent: var(--brand-300); --accent-hover: var(--brand-100); --accent-soft: rgba(255, 255, 255, .06); --accent-line: rgba(255, 255, 255, .12); --on-accent: var(--n-950); --ok: #62c27f; --warn: #e6a64f; --err: #ef7676; --info: #7ea2f0; --ok-soft: rgba(31, 122, 56, .18); --warn-soft: rgba(180, 83, 9, .18); --err-soft: rgba(185, 28, 28, .20); --info-soft: rgba(29, 78, 216, .20); --scrim: rgba(0, 0, 0, .60); --focus: var(--brand-300); color-scheme: dark; } }