/* theme.css — finsights design system (redesign cycle 1). SINGLE SOURCE OF COLOR TRUTH: every hex of the new UI lives in THIS file; pages and scripts consume var(--*) only (suite-enforced no-hex gates). Byte-identical copies ship in chatbot/web/ and dashboard/web/ — EDIT THE CHATBOT COPY, copy over the dashboard one, run the suite (test_theme_parity.php fails on drift). Three theme states (spec §2b): bare :root = light; html[data-theme="dark"] = explicit dark; the media block below = system dark (guarded so an explicit "light" wins). Spec: docs/superpowers/specs/2026-08-11-design-system-logo-pipeline-design.md §2. */ /* ---------- tokens: light (default, "Clean Light") ---------- */ :root{ --bg:#f4f7fb; --card:#ffffff; --card-shadow:0 2px 10px rgba(27,58,94,.08); --ink:#16324c; --ink-2:#4c6a86; --ink-3:#8aa0b8; --hair:#dfe7f0; --brand:#1b3a5e; --brand-2:#7db8e0; --accent:#2a78d6; --accent-soft:#eef3f9; --pos:#13a06b; --neg:#d64545; --s1:#2a78d6; --s2:#1baf7a; --s3:#0d8f60; --s4:#e8a33d; --neg-2:#b65454; --neg-3:#d97b6c; /* chart series + sankey cost shades */ --num-font:inherit; /* dark mode swaps to monospace for terminal feel */ --font:"Segoe UI","Noto Sans Hebrew",Arial,sans-serif; --fs-label:12px; --fs-body:14.5px; --fs-stat:26px; --fs-h1:clamp(26px,4vw,40px); --radius:10px; --radius-s:7px; --pad:16px; /* mobile breakpoint is 800px — custom properties can't drive @media, so the value is repeated literally in the media queries below; keep them in sync by hand */ } /* ---------- tokens: dark ("Dark Terminal") — explicit user override ---------- */ html[data-theme="dark"]{ --bg:#0b1220; --card:#111b2e; --card-shadow:0 2px 10px rgba(0,0,0,.35); --ink:#e8eefb; --ink-2:#a7b7cf; --ink-3:#5d7290; --hair:#1c2a42; --brand:#7db8e0; --brand-2:#1b3a5e; --accent:#4fd1ff; --accent-soft:#0f1930; --pos:#3ddc97; --neg:#ff6b6b; --s1:#4fd1ff; --s2:#3ddc97; --s3:#18b47e; --s4:#f0c05a; --neg-2:#e07a7a; --neg-3:#ff9b8a; --num-font:Consolas,"Courier New",monospace; } /* toggle glyph: CSS-driven so fragments/SSR never show a stale server-rendered char */ html[data-theme="dark"] #themeToggle::before{content:"\2600"} /* ---------- tokens: dark — OS preference when the user hasn't chosen ---------- */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --bg:#0b1220; --card:#111b2e; --card-shadow:0 2px 10px rgba(0,0,0,.35); --ink:#e8eefb; --ink-2:#a7b7cf; --ink-3:#5d7290; --hair:#1c2a42; --brand:#7db8e0; --brand-2:#1b3a5e; --accent:#4fd1ff; --accent-soft:#0f1930; --pos:#3ddc97; --neg:#ff6b6b; --s1:#4fd1ff; --s2:#3ddc97; --s3:#18b47e; --s4:#f0c05a; --neg-2:#e07a7a; --neg-3:#ff9b8a; --num-font:Consolas,"Courier New",monospace; } html:not([data-theme="light"]) #themeToggle::before{content:"\2600"} html:not([data-theme="light"]) .logo-on-light{display:none} html:not([data-theme="light"]) .logo-on-dark{display:block} } /* ---------- base ---------- */ .themed{ background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:1.55; } /* pages opt in by putting .themed on ; cycle-1 only the styleguide does */ /* ---------- top bar ---------- */ .topbar{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:14px; background:var(--card); box-shadow:var(--card-shadow); border-radius:var(--radius); padding:8px 14px; margin-bottom:18px; } .topbar-brand{display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0} .brand-logo{height:30px; width:auto; display:block} .auth-logo{height:44px; width:auto; display:inline-block} .logo-on-dark{display:none} html[data-theme="dark"] .logo-on-light{display:none} html[data-theme="dark"] .logo-on-dark{display:block} .topbar-sub{color:var(--ink-3); font-size:var(--fs-label)} .topbar-search{flex:1; max-width:420px; position:relative} .topbar-actions{margin-inline-start:auto; display:flex; align-items:center; gap:10px} .topbar-logout{ color:var(--ink-3); text-decoration:none; font-size:var(--fs-label); display:inline-flex; align-items:center; min-height:40px; } .topbar-logout:hover{color:var(--accent)} /* toggle glyph: light default; dark blocks above override via higher-specificity selectors */ #themeToggle::before{content:"\263E"} /* ---------- cards & tiles ---------- */ .card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:var(--pad); } .stat-tile{display:flex; flex-direction:column; gap:2px} .stat-tile .t-label{color:var(--ink-3); font-size:var(--fs-label); letter-spacing:.03em} .stat-tile .t-value{ color:var(--ink); font-size:var(--fs-stat); font-weight:700; font-family:var(--num-font); font-variant-numeric:tabular-nums; } .stat-tile .t-note{color:var(--ink-3); font-size:11.5px} /* ---------- ratios grid ---------- */ .ratio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--hair); border-radius:var(--radius); overflow:hidden; } .ratio-cell{background:var(--card); padding:10px 12px} .ratio-cell .r-label{color:var(--ink-3); font-size:var(--fs-label)} .ratio-cell .r-value{ color:var(--ink); font-weight:700; font-size:17px; font-family:var(--num-font); font-variant-numeric:tabular-nums; } /* "i"-in-a-circle info glyph + CSS hover tooltip (content from data-tip) */ .r-info{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-inline-start:5px; vertical-align:middle; border:1px solid var(--ink-3); border-radius:50%; color:var(--ink-3); font-size:10px; font-weight:700; font-style:normal; line-height:1; cursor:help; position:relative; } .r-info:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .r-info::after{ content:attr(data-tip); /* opens DOWNWARD, right-anchored: .ratio-grid is overflow:hidden (hairline-gap look), so an upward bubble from a first-row cell exits the grid's top edge and gets clipped. The info icon lives on first-row cells (P/E is the first cell added); downward + rightward-anchored keeps the bubble inside the grid in RTL. RESIDUAL CASE (I3, fix wave): a grid with only ONE row still clips a downward bubble against the grid's own overflow:hidden bottom edge -- accepted rather than chased further, because the glyph also carries a native title= (dashboard.js) that surfaces the same text via the browser's own tooltip/long-press affordance regardless of where the CSS bubble clips. */ position:absolute; top:calc(100% + 7px); right:-10px; background:var(--ink); color:var(--card); padding:7px 10px; border-radius:7px; box-shadow:var(--card-shadow); font-size:11.5px; font-weight:400; line-height:1.45; text-align:right; width:max-content; max-width:250px; white-space:normal; opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none; z-index:40; } .r-info:hover::after, .r-info:focus-visible::after{opacity:1; visibility:visible} /* ---------- small components ---------- */ .chip{ display:inline-block; font-size:12.5px; color:var(--ink-2); background:var(--accent-soft); border-radius:14px; padding:3px 12px; } .btn{ display:inline-block; background:var(--accent); color:var(--card); border:none; border-radius:var(--radius-s); padding:8px 18px; min-height:40px; font-family:var(--font); font-size:var(--fs-body); font-weight:700; cursor:pointer; } .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--ink-2); border:1px solid var(--hair); border-radius:var(--radius-s); min-width:40px; min-height:40px; padding:4px 10px; font-family:var(--font); font-size:var(--fs-body); cursor:pointer; } .btn-ghost:hover{color:var(--accent); border-color:var(--accent)} .field{ width:100%; background:var(--accent-soft); color:var(--ink); border:1px solid transparent; border-radius:var(--radius-s); padding:8px 12px; font-family:var(--font); font-size:var(--fs-body); transition:width .15s; } .field:focus{outline:none; border-color:var(--accent); background:var(--card)} .field::placeholder{color:var(--ink-3)} /* ---------- sections, tables, semantics ---------- */ .section-h{ /* 700, not 800: Segoe UI has no 800 face — Hebrew glyphs at 800 get synthesized/ substituted and visibly mismatch the rest of the design (user report 2026-08-11) */ color:var(--brand); font-size:20px; font-weight:700; display:flex; align-items:center; gap:12px; margin:26px 0 10px; } .section-h::after{content:""; flex:1; border-top:1px solid var(--hair)} .table-wrap{overflow-x:auto} .data-table{width:100%; border-collapse:collapse; font-size:13.5px} .data-table th{ color:var(--ink-3); font-size:var(--fs-label); font-weight:600; text-align:start; border-bottom:2px solid var(--hair); padding:8px 12px; white-space:nowrap; } .data-table td{ padding:8px 12px; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; font-family:var(--num-font); } .pos{color:var(--pos)} .neg{color:var(--neg)} /* ---------- avatars (company logos + letter fallback) ---------- */ .avatar{ width:40px; height:40px; border-radius:50%; object-fit:contain; background:var(--card); border:1px solid var(--hair); } .avatar-letter{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:var(--card); font-weight:700; font-size:18px; } /* ---------- mobile (breakpoint 800px, see token note above) ---------- */ @media (max-width:800px){ .topbar{border-radius:0; margin:0 0 12px; padding:8px 10px} .topbar-search{max-width:none} .stat-tile .t-value{font-size:21px} .ratio-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} }