/* ========================================================================== E-chereta (EBID) — design tokens "Navy & Ink" — a professional B2B procurement palette: navy blue as the brand/primary, a brighter blue for CTAs, cool slate greys for text and chrome, all on a crisp cool-white ground. Orange is the complementary accent (category tags, urgency, the liquid-nav bead) so the UI reads as a two-colour system, not mono-blue. Style is "balanced glass": surfaces keep a light frosted depth, but the old gold glow is gone and blur is toned down for readability. ========================================================================== */ :root { /* ---- brand hues — Navy & Ink -------------------------------------- */ /* Official logo colours (assets/logo.svg). Kept as their own tokens rather than overwriting --ebid-primary: the UI palette is a lighter working blue chosen for contrast on white, while these are the exact mark values. Use these wherever the logo itself is being matched. */ --brand-navy: #0A1F44; --brand-accent: #E8842C; --ebid-primary: #1e40af; /* blue 800 — navy brand / interactive */ --ebid-primary-dark: #1e3a8a; /* blue 900 */ --ebid-primary-darkest: #172554; /* blue 950 — deep navy ink */ --ebid-primary-tint: #dbeafe; /* blue 100 — soft fills */ --ebid-bg-tint: #eff6ff; /* blue 50 */ --ebid-surface: #ffffff; --ebid-text-primary: #0f172a; /* navy ink */ --ebid-text-secondary: #475569; /* slate 600 */ --ebid-accent: #2563eb; /* blue 600 — CTA / primary button */ --ebid-urgent: #c2410c; /* orange 700 — deadline-soon / urgent */ --ebid-gold: #3b82f6; /* legacy name, now blue 500 */ --ebid-gold-soft: #dbeafe; --ebid-coral: #e76f51; /* kept only for categorical variety */ /* ---- complementary accent — Orange ------------------------------- Emerald's warm counterpart, so the UI reads as a two-colour system (green + orange) rather than mono-green. Orange carries category tags, deadlines/urgency and highlight touches; emerald stays the brand/primary/CTA. A soft info-blue rounds out status badges. */ --ebid-orange: #ea580c; /* orange 600 — accent fills / icons */ --ebid-orange-strong: #c2410c; /* orange 700 — accent text on light */ --ebid-orange-soft: #fff1e8; /* orange wash for pills */ --ebid-orange-border: rgba(234, 88, 12, 0.28); --ebid-info: #2563eb; /* blue 600 — "new" / info badges */ --ebid-info-soft: #e8f0fe; /* ---- cool-white ground -------------------------------------------- Crisp white with a barely-there cool/blue cast so it sits under the navy brand rather than fighting it. Highest surfaces are pure white. */ --stage-0: #f6f8fc; /* page background */ --stage-1: #fbfcfe; --stage-2: #fefeff; --stage-3: #ffffff; /* highest surface */ --stage-border: rgba(15, 30, 60, 0.10); --stage-border-strong: rgba(15, 30, 60, 0.20); /* Raised interactive surfaces: buttons, inputs, chips, tabs. These were hardcoded white in a dozen places, which is why dark mode looked broken — a white pill on a navy ground. Logo plates are the deliberate exception and stay #fff in both themes (marks are drawn for a light backing). */ /* Bottom dock. Its gradient lives in an inline SVG, so the stops are driven from these rather than hardcoded — otherwise the dock stays white on a dark page. */ --nav-bar-top: rgba(255, 255, 255, 0.86); --nav-bar-bottom: rgba(248, 250, 253, 0.76); --nav-sheen-0: rgba(255, 255, 255, 0.95); --nav-sheen-1: rgba(255, 255, 255, 0.22); --nav-sheen-2: rgba(255, 255, 255, 0); --surface-solid: #ffffff; --surface-soft: rgba(255, 255, 255, 0.75); /* The bright top edge every .glass panel carries. On a dark ground the old hardcoded rgba(255,255,255,0.85) read as a glaring white line. */ --glass-edge: rgba(255, 255, 255, 0.85); /* glass fills — white, layered over the cool-white ground (toned down) */ --glass-fill-1: rgba(255, 255, 255, 0.82); --glass-fill-2: rgba(247, 249, 252, 0.72); --glass-highlight: rgba(255, 255, 255, 0.95); --glass-shadow: rgba(15, 40, 80, 0.16); /* glow accents — now navy blue; kept subtle for the balanced look */ --glow-gold: #3b82f6; --glow-gold-soft: rgba(37, 99, 235, 0.42); --glow-accent: #1e40af; --glow-accent-soft: rgba(30, 64, 175, 0.38); --glow-coral: #e76f51; --glow-coral-soft: rgba(231, 111, 81, 0.32); /* ---- text (semantic names) ---------------------------------------- */ --text-primary: #0f172a; /* near-black navy ink, never pure #000 */ --text-secondary: #45556a; /* slate */ --text-tertiary: #7a879b; /* Legacy aliases: these names date from the original dark-first build and are still referenced from several CSS files and JS-generated markup. Kept pointing at the semantic tokens above. Prefer the --text-* names in new code. */ --text-on-dark-primary: var(--text-primary); --text-on-dark-secondary: var(--text-secondary); --text-on-dark-tertiary: var(--text-tertiary); /* semantic */ --success: #059669; --danger: #dc2626; /* type */ --font-sans: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* radii / spacing scale */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* motion */ --ease-liquid: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur-med: 320ms; --dur-slow: 560ms; } /* ========================================================================== Dark theme Only the tokens that must change are redefined — hues, radii, spacing and motion all inherit from :root above, so the two themes can't drift apart. `data-theme` was already on every page but nothing in CSS responded to it, so it had no effect until now. Three states are handled: an explicit choice wins in both directions, and with no choice stored the OS preference decides. The ground is a deep navy rather than neutral grey — it's the logo's own family, so the brand sits in the palette instead of on top of it. ========================================================================== */ /* System preference, only when the user hasn't chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --stage-0: #0a1020; --stage-1: #101a2e; --stage-2: #142139; --stage-3: #182845; --stage-border: rgba(150, 180, 230, 0.14); --stage-border-strong: rgba(150, 180, 230, 0.26); --glass-fill-1: rgba(20, 33, 57, 0.82); --glass-fill-2: rgba(16, 26, 46, 0.72); --glass-highlight: rgba(120, 160, 220, 0.16); --glass-shadow: rgba(0, 0, 0, 0.5); --text-primary: #e8eefb; --text-secondary: #a8b8d4; --text-tertiary: #7486a6; --nav-bar-top: rgba(30, 48, 80, 0.92); --nav-bar-bottom: rgba(20, 33, 57, 0.86); --nav-sheen-0: rgba(150, 180, 230, 0.20); --nav-sheen-1: rgba(150, 180, 230, 0.06); --nav-sheen-2: rgba(150, 180, 230, 0); --nav-bar-top: rgba(30, 48, 80, 0.92); --nav-bar-bottom: rgba(20, 33, 57, 0.86); --nav-sheen-0: rgba(150, 180, 230, 0.20); --nav-sheen-1: rgba(150, 180, 230, 0.06); --nav-sheen-2: rgba(150, 180, 230, 0); --surface-solid: #1e3050; --surface-soft: rgba(255, 255, 255, 0.055); --glass-edge: rgba(255, 255, 255, 0.07); /* Brand hues lift so they stay legible on the dark ground: the working navy is near-invisible against #0a1020. */ --ebid-primary: #6b9bff; --ebid-primary-dark: #8fb4ff; --ebid-primary-darkest: #b9d0ff; --ebid-primary-tint: rgba(107, 155, 255, 0.18); --ebid-bg-tint: rgba(107, 155, 255, 0.10); --ebid-accent: #7aa7ff; --ebid-surface: #142139; --ebid-orange: #ff9a4d; --ebid-orange-strong: #ffb277; --ebid-orange-soft: rgba(255, 154, 77, 0.14); --ebid-orange-border: rgba(255, 154, 77, 0.34); --ebid-urgent: #ff8a5c; --ebid-info: #6b9bff; --ebid-info-soft: rgba(107, 155, 255, 0.16); --success: #34d399; --danger: #f87171; } } /* Explicit choice — wins over the OS in both directions. */ :root[data-theme="dark"] { --stage-0: #0a1020; --stage-1: #101a2e; --stage-2: #142139; --stage-3: #182845; --stage-border: rgba(150, 180, 230, 0.14); --stage-border-strong: rgba(150, 180, 230, 0.26); --glass-fill-1: rgba(20, 33, 57, 0.82); --glass-fill-2: rgba(16, 26, 46, 0.72); --glass-highlight: rgba(120, 160, 220, 0.16); --glass-shadow: rgba(0, 0, 0, 0.5); --text-primary: #e8eefb; --text-secondary: #a8b8d4; --text-tertiary: #7486a6; --surface-solid: #1e3050; --surface-soft: rgba(255, 255, 255, 0.055); --glass-edge: rgba(255, 255, 255, 0.07); --ebid-primary: #6b9bff; --ebid-primary-dark: #8fb4ff; --ebid-primary-darkest: #b9d0ff; --ebid-primary-tint: rgba(107, 155, 255, 0.18); --ebid-bg-tint: rgba(107, 155, 255, 0.10); --ebid-accent: #7aa7ff; --ebid-surface: #142139; --ebid-orange: #ff9a4d; --ebid-orange-strong: #ffb277; --ebid-orange-soft: rgba(255, 154, 77, 0.14); --ebid-orange-border: rgba(255, 154, 77, 0.34); --ebid-urgent: #ff8a5c; --ebid-info: #6b9bff; --ebid-info-soft: rgba(107, 155, 255, 0.16); --success: #34d399; --danger: #f87171; /* Dock gradient stops — see css/nav.css. These were only added to the prefers-color-scheme block, so an explicit dark choice on a light OS left the dock rendering white. */ --nav-bar-top: rgba(30, 48, 80, 0.92); --nav-bar-bottom: rgba(20, 33, 57, 0.86); --nav-sheen-0: rgba(150, 180, 230, 0.20); --nav-sheen-1: rgba(150, 180, 230, 0.06); --nav-sheen-2: rgba(150, 180, 230, 0); } /* Surfaces that hardcode white because they sit under artwork: a logo plate stays white in both themes (the marks are drawn for a light backing), but the ambient body washes need to dim or they glare. */ :root[data-theme="dark"] body::before, :root[data-theme="dark"] body::after { opacity: 0.5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before, :root:not([data-theme="light"]) body::after { opacity: 0.5; } }