/* * Design tokens — "Night clinic", shared with dr-abdallah-wajih.com. * * Dark-first: a deep navy ground with a faint dotted grid and two soft glows, * and one gradient (indigo → cyan → emerald) reserved for the primary action, * the current level and the hero highlight. Cyan is the lab's highlighter: it * marks matched rows, keys and hovered notes. Every colour is one token with * its light and dark value (light-dark()); the theme switch only flips * color-scheme on (see assets/js/core/theme-boot.js). * * Type follows the site: IBM Plex Sans Arabic for Arabic reading and Noto Kufi * Arabic for Arabic headings; Plus Jakarta Sans and Outfit for English. */ :root { color-scheme: light dark; --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace; --fs-2xs: 0.72rem; --fs-xs: 0.8rem; --fs-sm: 0.9rem; --fs-base: 1.03rem; --fs-md: 1.14rem; --fs-lg: 1.32rem; --fs-xl: 1.62rem; --fs-2xl: 2.1rem; --fs-3xl: 2.75rem; /* Arabic is a connected script: Kufi headings need tall leading and no negative tracking. */ --lh-body: 1.85; --lh-tight: 1.6; --lh-display: 1.45; --tracking-display: 0; --weight-display: 700; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --content-width: 760px; --page-width: 1240px; --gutter: clamp(16px, 4vw, 40px); --topbar-height: 64px; /* Surfaces & ink */ --paper: light-dark(#f6f8fc, #060913); --surface: light-dark(#ffffff, #0b1122); --surface-2: light-dark(#f1f5f9, #0f172a); --surface-3: light-dark(#e2e8f0, #1e293b); --ink: light-dark(#0f172a, #f1f5f9); --ink-2: light-dark(#475569, #94a3b8); --ink-3: light-dark(#5b6b82, #8390a6); --rule: light-dark(#e2e8f0, #1a2338); --rule-strong: light-dark(#cbd5e1, #2a3650); --dot: light-dark(rgb(15 23 42 / 0.07), rgb(148 163 184 / 0.09)); --paper-grid: light-dark(rgb(79 70 229 / 0.06), rgb(129 140 248 / 0.07)); --glow-1: light-dark(rgb(99 102 241 / 0.1), rgb(99 102 241 / 0.16)); --glow-2: light-dark(rgb(16 185 129 / 0.08), rgb(6 182 212 / 0.12)); /* Accent: the site's indigo "pen" */ --accent: light-dark(#4f46e5, #818cf8); --accent-hover: light-dark(#4338ca, #a5b4fc); --accent-ink: light-dark(#ffffff, #060913); --accent-soft: light-dark(#eef2ff, #151a3a); --accent-line: light-dark(rgb(79 70 229 / 0.35), rgb(129 140 248 / 0.4)); --teal: light-dark(#0e7490, #22d3ee); --teal-soft: light-dark(#ecfeff, #0a2230); /* Brand gradient: brighter stops on dark, deeper stops on light for contrast. */ --grad-a: light-dark(#4f46e5, #6366f1); --grad-b: light-dark(#0e7490, #06b6d4); --grad-c: light-dark(#047857, #10b981); /* Button gradient keeps white label text at 5:1 or better in both themes. */ --btn-a: #4f46e5; --btn-b: #0e7490; --btn-c: #047857; --on-btn: #ffffff; --brand-gradient: linear-gradient(120deg, var(--btn-a), var(--btn-b) 55%, var(--btn-c)); --text-gradient: linear-gradient(120deg, var(--grad-a), var(--grad-b) 55%, var(--grad-c)); /* Highlighter (cyan): matched rows, keys, hovered notes */ --highlight: light-dark(#67e8f9, #22d3ee); --highlight-wash: light-dark(rgb(6 182 212 / 0.16), rgb(34 211 238 / 0.14)); --highlight-ink: light-dark(#0f172a, #060913); --highlight-band: light-dark(rgb(6 182 212 / 0.28), rgb(34 211 238 / 0.3)); /* Semantic state (never used as accent) */ --ok: light-dark(#047857, #34d399); --ok-ink: light-dark(#ffffff, #060913); --ok-soft: light-dark(#ecfdf5, #0b2620); --bad: light-dark(#b91c1c, #f87171); --bad-ink: light-dark(#ffffff, #060913); --bad-soft: light-dark(#fef2f2, #2a1215); --warn: light-dark(#92400e, #fbbf24); --warn-soft: light-dark(#fffbeb, #2a2010); /* Code */ --code-surface: light-dark(#fbfcfe, #0a1020); --code-gutter: light-dark(#f1f5f9, #0d1428); --syn-keyword: light-dark(#4338ca, #a5b4fc); --syn-string: light-dark(#047857, #6ee7b7); --syn-number: light-dark(#b45309, #fcd34d); --syn-comment: light-dark(#64748b, #7c89a0); --syn-function: light-dark(#0e7490, #67e8f9); --syn-operator: light-dark(#475569, #94a3b8); --syn-variable: light-dark(#0f172a, #e2e8f0); --selection: light-dark(rgb(79 70 229 / 0.18), rgb(129 140 248 / 0.26)); /* Charts: indigo, amber, cyan, pink — distinct hues that survive colour-vision deficiency */ --series-1: light-dark(#4f46e5, #818cf8); --series-2: light-dark(#d97706, #f59e0b); --series-3: light-dark(#0891b2, #22d3ee); --series-4: light-dark(#db2777, #f472b6); --chart-grid: light-dark(#e2e8f0, #1a2338); --chart-axis: light-dark(#cbd5e1, #2a3650); --shadow-1: 0 1px 2px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.4)), 0 1px 1px light-dark(rgb(15 23 42 / 0.04), rgb(0 0 0 / 0.2)); --shadow-2: 0 16px 40px -18px light-dark(rgb(15 23 42 / 0.22), rgb(0 0 0 / 0.7)), 0 2px 6px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.35)); --shadow-glow: 0 22px 50px -28px color-mix(in srgb, var(--grad-a) 60%, transparent); --focus-ring: 0 0 0 3px light-dark(rgb(14 116 144 / 0.4), rgb(34 211 238 / 0.45)); --ease: cubic-bezier(0.22, 0.7, 0.3, 1); --dur-fast: 140ms; --dur: 240ms; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* English edition: the site's Latin pair. Arabic glyphs (the language switch) fall back to Plex Arabic. */ :root[lang="en"] { --font-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-display: "Outfit", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --lh-body: 1.7; --lh-tight: 1.25; --lh-display: 1.1; --tracking-display: -0.015em; }