/* ===================================================================== NewsFirst Newsroom OS — design tokens (UI Standard v2.2) Source of truth: docs/design-system/reference/ui-standard-v2.html Loaded only when NF_UI_V2 is on. Variables only: this file changes nothing on screen by itself. ("system" theme is resolved to light/dark by an inline script in head.) ===================================================================== */ :root{ /* brand — matches the logo's red triangle */ --nf-brand-red:#b70a06; --nf-brand-red-hover:#950805; --nf-brand-red-soft:#fbe8e7; /* main colour (black by default, blue in Appearance) */ --nf-primary:#1a1a24; --nf-primary-hover:#2e2e3c; --nf-primary-soft:#ecebe7; --nf-on-primary:#ffffff; /* surfaces */ --nf-canvas:#f3f1ec; --nf-surface:#f7f5f1; --nf-raised:#faf9f6; --nf-card:#ffffff; --nf-stripe:#f6f4ef; --nf-border-subtle:#eceae4; --nf-border:#d6d1c8; --nf-control:#b5afa4; --nf-control-off:#cfc9be; /* text */ --nf-text:#1a1a24; --nf-text-2:#5c5850; --nf-text-muted:#767369; --nf-text-disabled:#a5a197; /* status */ --nf-success:#137a43; --nf-success-soft:#e6f4ec; --nf-danger:#c0392b; --nf-danger-soft:#fbeaea; --nf-warning:#a15a0a; --nf-warning-soft:#fdf1e0; --nf-info:#2b62a8; --nf-info-soft:#e8eff9; --nf-pin-new:#1f9d5c; --nf-pin-top:#c9a227; /* side menu (option A, dark) */ --nf-sidebar-bg:#1b1b27; --nf-sidebar-bg-2:#16161f; --nf-sidebar-text:#a6a6b5; --nf-sidebar-hi:#ffffff; --nf-sidebar-section:#6d6d7c; --nf-sidebar-hover:rgba(255,255,255,.06); --nf-sidebar-active:rgba(183,10,6,.22); --nf-sidebar-line:rgba(255,255,255,.07); --nf-sidebar-accent:var(--nf-brand-red); --nf-sidebar-field:rgba(255,255,255,.05); /* depth + focus */ --nf-scrim:rgba(26,26,36,.55); --nf-shadow-1:0 1px 2px rgba(26,26,36,.06),0 1px 8px rgba(26,26,36,.04); --nf-shadow-2:0 4px 16px rgba(26,26,36,.10); --nf-shadow-3:0 16px 48px rgba(26,26,36,.22); --nf-focus:0 0 0 3px color-mix(in srgb,var(--nf-primary) 24%,transparent); /* type, radius, motion, layers */ --nf-font:'DM Sans',-apple-system,'Segoe UI',Roboto,sans-serif; --nf-font-app:'Poppins','DM Sans',sans-serif; --nf-font-mono:'DM Mono',ui-monospace,Menlo,monospace; --nf-fs-2xs:11px; --nf-fs-xs:12px; --nf-fs-sm:13px; --nf-fs-base:14px; --nf-fs-md:16px; --nf-fs-lg:20px; --nf-fs-xl:24px; --nf-fs-2xl:32px; --nf-r-sm:6px; --nf-r-md:10px; --nf-r-lg:16px; --nf-r-pill:999px; --nf-ease:140ms cubic-bezier(.25,.46,.45,.94); --nf-z-sticky:90; --nf-z-header:100; --nf-z-popover:900; --nf-z-modal:1000; --nf-z-confirm:1060; --nf-z-toast:1080; /* original logo files (public/assets/images) */ --nf-logo-word-on-dark:url("../../images/newlatestsidebarrlogo.svg"); --nf-logo-word-on-light:url("../../images/newsfirstlogodarknew.svg"); --nf-logo-mark-on-dark:url("../../images/logo-light.svg"); --nf-logo-mark-on-light:url("../../images/logo-light-f.svg"); --nf-logo-word:var(--nf-logo-word-on-light); --nf-logo-mark:var(--nf-logo-mark-on-light); } :root[data-nf-canvas="white"]{ --nf-canvas:#ffffff; --nf-surface:#fafaf8; } :root[data-nf-primary="blue"]{ --nf-primary:#3056d3; --nf-primary-hover:#2446b3; --nf-primary-soft:#e9eefc; --nf-on-primary:#ffffff; } :root[data-nf-theme="dark"]{ color-scheme:dark; --nf-brand-red:#f0584b; --nf-brand-red-hover:#f47468; --nf-brand-red-soft:rgba(240,88,75,.16); --nf-primary:#ecebe6; --nf-primary-hover:#ffffff; --nf-primary-soft:#2e2e39; --nf-on-primary:#15151c; --nf-canvas:#131319; --nf-surface:#18181f; --nf-raised:#1c1c24; --nf-card:#20202a; --nf-stripe:#25252f; --nf-border-subtle:#2b2b36; --nf-border:#3a3a47; --nf-control:#5a5866; --nf-control-off:#44434f; --nf-text:#ecebe6; --nf-text-2:#bdbab2; --nf-text-muted:#94918a; --nf-text-disabled:#64626b; --nf-success:#45c283; --nf-success-soft:rgba(69,194,131,.14); --nf-danger:#f07565; --nf-danger-soft:rgba(240,117,101,.14); --nf-warning:#e7a847; --nf-warning-soft:rgba(231,168,71,.14); --nf-info:#74a9f0; --nf-info-soft:rgba(116,169,240,.14); --nf-pin-new:#2fae6c; --nf-pin-top:#d4b13f; --nf-sidebar-bg:#0e0e13; --nf-sidebar-bg-2:#0a0a0e; --nf-sidebar-active:rgba(240,88,75,.2); --nf-scrim:rgba(0,0,0,.62); --nf-logo-word:var(--nf-logo-word-on-dark); --nf-logo-mark:var(--nf-logo-mark-on-dark); --nf-shadow-1:0 0 0 1px rgba(255,255,255,.02); --nf-shadow-2:0 6px 20px rgba(0,0,0,.45); --nf-shadow-3:0 20px 60px rgba(0,0,0,.6); } :root[data-nf-theme="dark"][data-nf-primary="blue"]{ --nf-primary:#3f63e0; --nf-primary-hover:#5073e6; --nf-primary-soft:rgba(63,99,224,.2); --nf-on-primary:#ffffff; } /* light side menu (option D): same markup, remapped menu tokens */ :root[data-nf-menu="light"]{ --nf-sidebar-bg:var(--nf-card); --nf-sidebar-bg-2:var(--nf-card); --nf-sidebar-text:var(--nf-text-2); --nf-sidebar-hi:var(--nf-text); --nf-sidebar-section:var(--nf-text-muted); --nf-sidebar-hover:var(--nf-stripe); --nf-sidebar-active:var(--nf-primary-soft); --nf-sidebar-line:var(--nf-border-subtle); --nf-sidebar-accent:var(--nf-primary); --nf-sidebar-field:var(--nf-stripe); }