/** * MNR (Modern News Room) — design tokens * Default: light editorial desk. Optional dark via data-theme="dark" on . */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces — warm newsprint */ --mnr-bg-deep: #f6f3ed; --mnr-bg-raised: #ffffff; --mnr-bg-card: #ffffff; --mnr-surface: #ffffff; --mnr-bg-hover: #efe9df; --mnr-bg-input: #ffffff; /* Type */ --mnr-ink: #1c1917; --mnr-ink-muted: #57534e; --mnr-ink-faint: #78716c; /* Accents */ --mnr-accent: #c1121f; --mnr-accent-hover: #e63946; --mnr-gold: #92600a; --mnr-gold-dim: #b8860b; --mnr-wire: #0d9488; --mnr-link: #92600a; --mnr-link-hover: #1c1917; /* Borders & focus */ --mnr-border: rgba(28, 25, 23, 0.1); --mnr-border-strong: rgba(28, 25, 23, 0.18); --mnr-focus: var(--mnr-gold); /* Semantic surfaces (chrome, overlays) */ --mnr-surface-chrome: rgba(255, 255, 255, 0.94); --mnr-surface-subtle: rgba(255, 255, 255, 0.72); --mnr-surface-muted: rgba(239, 233, 223, 0.85); --mnr-surface-overlay: rgba(28, 25, 23, 0.42); --mnr-surface-footer: rgba(255, 255, 255, 0.88); /* Accent tints */ --mnr-accent-soft: rgba(193, 18, 31, 0.08); --mnr-gold-soft: rgba(146, 96, 10, 0.1); --mnr-wire-soft: rgba(13, 148, 136, 0.1); --mnr-human-soft: rgba(193, 18, 31, 0.06); --mnr-human-border: rgba(193, 18, 31, 0.28); --mnr-shadow-elevated: 0 12px 40px rgba(28, 25, 23, 0.08); --mnr-shadow-card: 0 2px 12px rgba(28, 25, 23, 0.06); /* Body atmosphere */ --mnr-bg-gradient-a: rgba(193, 18, 31, 0.04); --mnr-bg-gradient-b: rgba(146, 96, 10, 0.05); /* Page canvas alias (legacy var name) */ --mnr-bg: #f6f3ed; /* Primary actions — editorial red, not near-black */ --mnr-btn-primary-bg: #c1121f; --mnr-btn-primary-fg: #ffffff; --mnr-btn-primary-border: #c1121f; --mnr-btn-primary-hover-bg: #a50f1a; /* Chips, segmented controls, inactive pills */ --mnr-chip-bg: #efe9df; --mnr-chip-fg: #57534e; --mnr-chip-border: rgba(28, 25, 23, 0.14); --mnr-segment-active-bg: #c1121f; --mnr-segment-active-fg: #ffffff; /* Inverse bars (multibar, etc.) */ --mnr-bar-inverse-bg: #1c1917; --mnr-bar-inverse-fg: #f6f3ed; --mnr-cta-bg-start: #1c1917; --mnr-cta-bg-end: #2a1f1c; --mnr-cta-fg: #f6f3ed; --mnr-cta-fg-muted: rgba(246, 243, 237, 0.85); --mnr-cta-btn-bg: #ffffff; --mnr-cta-btn-fg: #1c1917; --mnr-cta-ghost-fg: #f6f3ed; --mnr-cta-ghost-border: rgba(246, 243, 237, 0.35); /* SSO (brand-adjacent; Google stays light in light mode) */ --mnr-sso-google-bg: #ffffff; --mnr-sso-google-fg: #1f1f1f; --mnr-sso-google-border: rgba(0, 0, 0, 0.14); --mnr-sso-google-hover-bg: #f8f9fa; --mnr-sso-microsoft-bg: #2f2f2f; --mnr-sso-microsoft-fg: #ffffff; --mnr-sso-microsoft-border: #1f1f1f; --mnr-sso-microsoft-hover-bg: #1f1f1f; --mnr-elevated-hover-shadow: 0 6px 22px rgba(28, 25, 23, 0.1); /* Status / meter chips */ --mnr-status-ok-bg: rgba(16, 185, 129, 0.14); --mnr-status-ok-fg: #047857; --mnr-status-warn-bg: rgba(245, 158, 11, 0.14); --mnr-status-warn-fg: #b45309; --mnr-status-error-bg: rgba(239, 68, 68, 0.12); --mnr-status-error-fg: #b91c1c; --mnr-status-neutral-bg: rgba(100, 116, 139, 0.14); --mnr-status-neutral-fg: #475569; --mnr-status-wire-bg: linear-gradient(135deg, #fef3c7, #fbbf24); --mnr-status-wire-fg: #78350f; --mnr-status-wire-border: rgba(180, 83, 9, 0.5); --mnr-meter-neutral-bg: rgba(28, 25, 23, 0.06); --mnr-on-accent-fg: #ffffff; /* Filing pipeline strip (Brief → Library) */ --mnr-pipeline-bg: #ffffff; --mnr-pipeline-shadow: 0 1px 0 var(--mnr-border); /* Desk site footer — follows page theme (light editorial) */ --mnr-footer-bg: var(--mnr-bg-deep); --mnr-footer-bg-card: var(--mnr-bg-card); --mnr-footer-border: var(--mnr-border); --mnr-footer-border-strong: var(--mnr-border-strong); --mnr-footer-ink: var(--mnr-ink); --mnr-footer-ink-muted: var(--mnr-ink-muted); --mnr-footer-ink-faint: var(--mnr-ink-faint); --mnr-footer-accent: var(--mnr-gold); --mnr-footer-accent-dim: var(--mnr-gold-dim); --mnr-footer-accent-soft: var(--mnr-gold-soft); --mnr-footer-glow-a: var(--mnr-bg-gradient-b); --mnr-footer-glow-b: var(--mnr-wire-soft); --mnr-footer-logo-fg: #1c1917; --mnr-footer-shadow: var(--mnr-shadow-elevated); --mnr-footer-icon-bg: var(--mnr-bg-deep); } [data-theme="dark"] { color-scheme: dark; --mnr-bg-deep: #0a0f1a; --mnr-bg-raised: #121a2b; --mnr-bg-card: #161f33; --mnr-surface: #161f33; --mnr-bg-hover: #1c2740; --mnr-bg-input: #121a2b; --mnr-ink: #f2ebe2; --mnr-ink-muted: #b8b0a6; --mnr-ink-faint: #7a736a; --mnr-accent: #e63946; --mnr-accent-hover: #ff4d5c; --mnr-gold: #d4a853; --mnr-gold-dim: #9a7a3a; --mnr-wire: #00c896; --mnr-link: #d4a853; --mnr-link-hover: #f2ebe2; --mnr-border: rgba(242, 235, 226, 0.12); --mnr-border-strong: rgba(242, 235, 226, 0.22); --mnr-surface-chrome: rgba(10, 15, 26, 0.92); --mnr-surface-subtle: rgba(22, 31, 51, 0.55); --mnr-surface-muted: rgba(22, 31, 51, 0.45); --mnr-surface-overlay: rgba(10, 15, 26, 0.78); --mnr-surface-footer: rgba(10, 15, 26, 0.6); --mnr-accent-soft: rgba(230, 57, 70, 0.12); --mnr-gold-soft: rgba(212, 168, 83, 0.1); --mnr-wire-soft: rgba(0, 200, 150, 0.1); --mnr-human-soft: rgba(230, 57, 70, 0.12); --mnr-human-border: rgba(230, 57, 70, 0.45); --mnr-shadow-elevated: 0 24px 48px rgba(0, 0, 0, 0.45); --mnr-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25); --mnr-bg-gradient-a: rgba(230, 57, 70, 0.09); --mnr-bg-gradient-b: rgba(212, 168, 83, 0.06); --mnr-bg: #0a0f1a; --mnr-btn-primary-bg: #e63946; --mnr-btn-primary-fg: #ffffff; --mnr-btn-primary-border: #e63946; --mnr-btn-primary-hover-bg: #ff4d5c; --mnr-chip-bg: #1c2740; --mnr-chip-fg: #b8b0a6; --mnr-chip-border: rgba(242, 235, 226, 0.16); --mnr-segment-active-bg: #e63946; --mnr-segment-active-fg: #ffffff; --mnr-bar-inverse-bg: #161f33; --mnr-bar-inverse-fg: #f2ebe2; --mnr-cta-bg-start: #161f33; --mnr-cta-bg-end: #0a0f1a; --mnr-cta-fg: #f2ebe2; --mnr-cta-fg-muted: rgba(242, 235, 226, 0.82); --mnr-cta-btn-bg: #f2ebe2; --mnr-cta-btn-fg: #0a0f1a; --mnr-cta-ghost-fg: #f2ebe2; --mnr-cta-ghost-border: rgba(242, 235, 226, 0.35); --mnr-sso-google-bg: #121a2b; --mnr-sso-google-fg: #f2ebe2; --mnr-sso-google-border: rgba(242, 235, 226, 0.18); --mnr-sso-google-hover-bg: #1c2740; --mnr-sso-microsoft-bg: #2f2f2f; --mnr-sso-microsoft-fg: #ffffff; --mnr-sso-microsoft-border: #1f1f1f; --mnr-sso-microsoft-hover-bg: #1f1f1f; --mnr-elevated-hover-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); --mnr-status-ok-bg: rgba(16, 185, 129, 0.22); --mnr-status-ok-fg: #6ee7b7; --mnr-status-warn-bg: rgba(245, 158, 11, 0.22); --mnr-status-warn-fg: #fcd34d; --mnr-status-error-bg: rgba(239, 68, 68, 0.2); --mnr-status-error-fg: #fca5a5; --mnr-status-neutral-bg: rgba(148, 163, 184, 0.18); --mnr-status-neutral-fg: #cbd5e1; --mnr-status-wire-bg: rgba(212, 168, 83, 0.28); --mnr-status-wire-fg: #fde68a; --mnr-status-wire-border: rgba(212, 168, 83, 0.45); --mnr-meter-neutral-bg: rgba(242, 235, 226, 0.08); --mnr-on-accent-fg: #ffffff; --mnr-pipeline-bg: color-mix(in srgb, var(--mnr-bg-raised) 92%, var(--mnr-bg-deep)); --mnr-pipeline-shadow: none; /* Desk site footer — follows page theme (dark desk) */ --mnr-footer-bg: var(--mnr-bg-deep); --mnr-footer-bg-card: var(--mnr-bg-card); --mnr-footer-border: var(--mnr-border); --mnr-footer-border-strong: var(--mnr-border-strong); --mnr-footer-ink: var(--mnr-ink); --mnr-footer-ink-muted: var(--mnr-ink-muted); --mnr-footer-ink-faint: var(--mnr-ink-faint); --mnr-footer-accent: var(--mnr-gold); --mnr-footer-accent-dim: var(--mnr-gold-dim); --mnr-footer-accent-soft: var(--mnr-gold-soft); --mnr-footer-glow-a: var(--mnr-bg-gradient-b); --mnr-footer-glow-b: var(--mnr-wire-soft); --mnr-footer-logo-fg: #0a0f1a; --mnr-footer-shadow: var(--mnr-shadow-elevated); --mnr-footer-icon-bg: var(--mnr-bg-raised); } :root { --font-display: "Fraunces", "Georgia", serif; --font-body: "Source Serif 4", "Georgia", serif; --font-ui: "DM Sans", system-ui, sans-serif; --font-arabic: "Cairo", "Noto Sans Arabic", "Tajawal", system-ui, sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; } /* Arabic / RTL: remap design tokens so Fraunces & Source Serif never win for Arabic text */ html[lang="ar"], html[lang^="ar-"], html[dir="rtl"] { --font-display: var(--font-arabic); --font-body: var(--font-arabic); --font-ui: var(--font-arabic); --font-serif: var(--font-arabic); font-family: var(--font-arabic); } html[lang="ar"] body, html[lang^="ar-"] body, html[dir="rtl"] body { font-family: var(--font-arabic); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { margin: 0; min-height: 100vh; font-family: var(--font-ui); background: var(--mnr-bg-deep); color: var(--mnr-ink); line-height: 1.5; transition: background-color 0.2s ease, color 0.2s ease; } /* Text links only — :where() keeps zero specificity so .lp-btn / .mnr-btn colors win */ a:where(:not(.lp-btn):not(.mnr-btn):not(.sso-btn):not(.desk-footer-cta):not([class*='btn'])) { color: var(--mnr-link); text-decoration: none; } a:where(:not(.lp-btn):not(.mnr-btn):not(.sso-btn):not(.desk-footer-cta):not([class*='btn'])):hover { color: var(--mnr-link-hover); } a:where(:not(.lp-btn):not(.mnr-btn):not(.sso-btn):not(.desk-footer-cta):not([class*='btn'])):visited { color: var(--mnr-link); } /* Button-styled anchors (visited state was forcing gold/brown on red primaries) */ a.lp-btn, a.lp-btn:visited, a.lp-btn:hover, a.lp-btn:focus-visible, a.mnr-btn, a.mnr-btn:visited, a.mnr-btn:hover, a.mnr-btn:focus-visible { text-decoration: none; } a.lp-btn, a.lp-btn:visited, a.lp-btn:hover { color: var(--btn-fg, var(--mnr-ink)); } a.lp-btn--primary, a.lp-btn--primary:visited, a.lp-btn--primary:hover, a.lp-btn--primary:focus-visible, a.mnr-btn--primary, a.mnr-btn--primary:visited, a.mnr-btn--primary:hover, a.mnr-btn--primary:focus-visible { color: var(--mnr-btn-primary-fg); } h1, h2, h3, h4, p { margin: 0; } .mnr-theme-toggle { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.38rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--mnr-border-strong); background: var(--mnr-bg-raised); color: var(--mnr-ink-muted); cursor: pointer; line-height: 1; } .mnr-theme-toggle:hover { background: var(--mnr-bg-hover); color: var(--mnr-ink); border-color: var(--mnr-border-strong); }