/* Kashaf design tokens — ported from /project/src/tokens.css in the Claude Design handoff. Light is the default; [data-theme="dark"] on flips to the dark palette. The Customizer / theme-toggle.js writes data-theme on before paint. */ :root { /* Brand: deep indigo from Kashaf logo */ --kashaf-indigo: #1f2a78; --kashaf-indigo-soft: #2d3a96; /* Accent — overridden by tweak (inlined from Customizer, see inc/enqueue.php) */ --accent: var(--kashaf-indigo); --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent); --accent-line: color-mix(in oklab, var(--accent) 30%, transparent); --accent-fg: var(--accent); /* accent for TEXT/links — lightened in dark mode for legibility */ --on-accent: #ffffff; /* Verdict colors (semantic, not themable) */ --v-true: #1f8a5b; --v-false: #d6443c; --v-misleading: #d68a1c; --v-mixed: #5b5fc7; --v-fabricated: #2b2b2b; --v-unverifiable: #5a8fb1; --v-news: #8e8e9a; --v-aware: #2c8aa6; /* Verdict colors — darkened ink-safe variants for small text on color (WCAG AA ≥ 4.5:1 vs #fff). Used by .k-pill where 11–13px white text needs higher contrast. Header bands and other large surfaces continue to use the brand --v-* values above. */ --v-true-ink: #156a45; --v-false-ink: #b8362d; --v-misleading-ink: #a86a14; --v-mixed-ink: #4548a8; --v-fabricated-ink: #1a1a1a; --v-unverifiable-ink: #3f6f8e; --v-news-ink: #6a6d77; --v-aware-ink: #1f6a80; /* Typography */ --ff-arabic-display: "Noto Kufi Arabic", "Tajawal", system-ui, sans-serif; --ff-arabic-body: "Tajawal", "Noto Sans Arabic", system-ui, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, monospace; --ff-latin: "Inter", system-ui, sans-serif; } /* Font pair overrides (Customizer can switch the pair on ) */ [data-fontpair="kufi-tajawal"] { --ff-arabic-display: "Noto Kufi Arabic", system-ui, sans-serif; --ff-arabic-body: "Tajawal", system-ui, sans-serif; } [data-fontpair="cairo-plex"] { --ff-arabic-display: "Cairo", system-ui, sans-serif; --ff-arabic-body: "IBM Plex Sans Arabic", system-ui, sans-serif; } [data-fontpair="kufi-plex"] { --ff-arabic-display: "Noto Kufi Arabic", system-ui, sans-serif; --ff-arabic-body: "IBM Plex Sans Arabic", system-ui, sans-serif; } /* Light theme (default) */ :root, [data-theme="light"] { --bg: #f7f5f0; --bg-elev: #ffffff; --bg-sunk: #efece6; --ink: #14151a; --ink-2: #3a3c44; --ink-3: #6a6d77; --ink-4: #a0a3ad; --rule: rgba(20, 21, 26, 0.08); --rule-strong: rgba(20, 21, 26, 0.14); --shadow-sm: 0 1px 0 rgba(20,21,26,0.04), 0 1px 2px rgba(20,21,26,0.04); --shadow-md: 0 1px 0 rgba(20,21,26,0.04), 0 8px 24px rgba(20,21,26,0.06); --img-tone: #e6e2da; } /* Dark theme */ [data-theme="dark"] { --bg: #0e1024; --bg-elev: #161937; --bg-sunk: #0a0c1d; --ink: #f4f4f8; --ink-2: #cdd0e0; --ink-3: #8e92ad; --ink-4: #5a5e7a; --rule: rgba(255, 255, 255, 0.08); --rule-strong: rgba(255, 255, 255, 0.14); --shadow-sm: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 1px 0 rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.4); --img-tone: #232744; --accent-fg: #8b97ec; /* lighter indigo so accent links stay legible on dark surfaces */ } /* Base — applied to . Mirrors the .k-app reset from the prototype. */ html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--ff-arabic-body); direction: rtl; text-align: right; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "ss02"; font-size: 15px; line-height: 1.55; } /* English-locale post: flip direction + use Latin font, align text to the start. The filter takes care of layout primitives; this block handles typography + alignment overrides. */ html[dir="ltr"] body, body.k-locale-en { direction: ltr; text-align: left; font-family: var(--ff-latin); } body.k-locale-en .k-display { font-family: var(--ff-latin); letter-spacing: -0.015em; } body.k-locale-en .k-art-top__title, body.k-locale-en .k-hero__title, body.k-locale-en .k-claim-card__quote, body.k-locale-en .k-tip-banner__title, body.k-locale-en .k-section-title { font-family: var(--ff-latin); } /* Mono UI chips look better in Inter spacing on EN */ body.k-locale-en .k-meta-mono, body.k-locale-en .k-eyebrow, body.k-locale-en .k-section-meta, body.k-locale-en .k-meta-light { letter-spacing: .12em; } *, *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; } .k-display { font-family: var(--ff-arabic-display); letter-spacing: -0.01em; } .k-mono { font-family: var(--ff-mono); font-feature-settings: "tnum"; } .k-latin { font-family: var(--ff-latin); } /* Placeholder image — striped fallback when no thumbnail */ .k-img-ph { background: repeating-linear-gradient( 135deg, var(--img-tone) 0 12px, color-mix(in oklab, var(--img-tone) 80%, var(--bg)) 12px 24px ); position: relative; overflow: hidden; } .k-img-ph::after { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: 11px; color: color-mix(in oklab, var(--ink) 40%, transparent); letter-spacing: 0.04em; direction: ltr; } /* When .k-img-ph wraps an , the gradient stays as background but the img is what shows. */ .k-img-ph > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .k-img-ph:has(> img)::after { content: none; } /* Skip link for keyboard a11y. */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: #fff; padding: 8px 14px; z-index: 9999; } .skip-link:focus { top: 0; } /* Screen-reader-only utility (WP default name). */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }