/** * Al-Nakib Frontend Publisher — Design Tokens (v4.26.0) * * Single source of truth for color, type, spacing, radii, shadows, motion. * Loaded before frontend-modern.css and admin-modern.css. * * Style direction: Swiss Modernism 2.0 — 8px base unit, mathematical * spacing, single brand accent (oxblood retained), high contrast, * minimal decoration, WCAG AAA achievable. * * @package AlNakib_Frontend_Publisher */ :root { /* === Brand ============================================================ */ --alnakib-brand: #791C0B; --alnakib-brand-hover: #5C1508; --alnakib-brand-active: #4A1107; --alnakib-brand-soft: #FBE9E5; /* tinted background tier */ --alnakib-brand-ring: rgba(121, 28, 11, 0.25); /* === Neutrals (slate-on-paper) ====================================== */ --alnakib-ink: #0F172A; /* primary text — AAA on white */ --alnakib-ink-muted: #475569; /* secondary text — AAA on white */ --alnakib-ink-soft: #64748B; /* placeholders, hint */ --alnakib-ink-faint: #94A3B8; /* disabled, very low emphasis */ --alnakib-paper: #FFFFFF; /* card surface */ --alnakib-canvas: #F8FAFC; /* page bg */ --alnakib-canvas-soft: #F1F5F9; /* zebra rows, section sep */ --alnakib-line: #E2E8F0; /* default border */ --alnakib-line-strong: #CBD5E1; /* hovered border */ /* === Status =========================================================== */ --alnakib-accent: #0369A1; /* informational blue (links, secondary CTA) */ --alnakib-accent-soft: #E0F2FE; --alnakib-success: #15803D; --alnakib-success-soft: #DCFCE7; --alnakib-warning: #B45309; --alnakib-warning-soft: #FEF3C7; --alnakib-danger: #B91C1C; --alnakib-danger-soft: #FEE2E2; /* === Typography ======================================================= */ --alnakib-font-sans: "Noto Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --alnakib-font-display: "Noto Naskh Arabic", "Newsreader", Georgia, serif; --alnakib-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --alnakib-text-xs: 12px; --alnakib-text-sm: 14px; --alnakib-text-base: 16px; --alnakib-text-lg: 18px; --alnakib-text-xl: 22px; --alnakib-text-2xl: 28px; --alnakib-text-3xl: 36px; --alnakib-leading-tight: 1.25; --alnakib-leading-snug: 1.4; --alnakib-leading-normal: 1.5; --alnakib-leading-relaxed: 1.65; /* === Spacing (8px base) ============================================== */ --alnakib-space-1: 4px; --alnakib-space-2: 8px; --alnakib-space-3: 12px; --alnakib-space-4: 16px; --alnakib-space-5: 20px; --alnakib-space-6: 24px; --alnakib-space-8: 32px; --alnakib-space-10: 40px; --alnakib-space-12: 48px; --alnakib-space-16: 64px; /* === Radii ============================================================ */ --alnakib-radius-sm: 6px; --alnakib-radius-md: 10px; --alnakib-radius-lg: 14px; --alnakib-radius-xl: 20px; --alnakib-radius-pill: 999px; /* === Shadows (calm, not theatrical) ================================== */ --alnakib-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.06); --alnakib-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --alnakib-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --alnakib-shadow-focus: 0 0 0 4px var(--alnakib-brand-ring); /* === Motion =========================================================== */ --alnakib-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --alnakib-dur-fast: 120ms; --alnakib-dur: 200ms; --alnakib-dur-slow: 280ms; /* === Z-index scale =================================================== */ --alnakib-z-base: 1; --alnakib-z-sticky: 10; --alnakib-z-overlay: 100; --alnakib-z-modal: 1000; --alnakib-z-toast: 2000; /* === Legacy aliases (back-compat with v4.25) ========================= */ --alnakib-primary: var(--alnakib-brand); --alnakib-primary-dark: var(--alnakib-brand-active); --alnakib-text: var(--alnakib-ink); --alnakib-text-muted: var(--alnakib-ink-muted); --alnakib-border: var(--alnakib-line); --alnakib-bg-light: var(--alnakib-canvas); --alnakib-link: var(--alnakib-accent); } /* === Dark mode (v4.27.2 — auto-activation removed) ====================== The `prefers-color-scheme: dark` auto-flip shipped in v4.26.0 was removed because (1) it produced inconsistent results when admin templates use inline `background: #fff` styles, leaving dark-mode text invisible on stuck-light backgrounds (e.g. the cross-site Allowed Users list), and (2) the design wasn't tested end-to-end on every plugin surface. Dark-mode tokens are kept here as an *opt-in*: an admin or future setting can apply `data-alnakib-theme="dark"` to any plugin wrapper to activate them. Auto OS-preference activation does NOT fire. */ .alnakib-fp-form-wrapper[data-alnakib-theme="dark"], .alnakib-fp-my-posts-wrapper[data-alnakib-theme="dark"], .alnakib-fp-admin[data-alnakib-theme="dark"], .alnakib-fp-statistics[data-alnakib-theme="dark"] { --alnakib-ink: #E2E8F0; --alnakib-ink-muted: #94A3B8; --alnakib-ink-soft: #64748B; --alnakib-ink-faint: #475569; --alnakib-paper: #0F172A; --alnakib-canvas: #020617; --alnakib-canvas-soft: #1E293B; --alnakib-line: #1E293B; --alnakib-line-strong: #334155; --alnakib-brand-soft: rgba(121, 28, 11, 0.25); --alnakib-accent-soft: rgba(3, 105, 161, 0.15); --alnakib-success-soft: rgba(21, 128, 61, 0.18); --alnakib-warning-soft: rgba(180, 83, 9, 0.18); --alnakib-danger-soft: rgba(185, 28, 28, 0.18); --alnakib-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.5); --alnakib-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --alnakib-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); } /* === Reduced motion ===================================================== */ @media (prefers-reduced-motion: reduce) { :root { --alnakib-dur-fast: 0ms; --alnakib-dur: 0ms; --alnakib-dur-slow: 0ms; } }