/* ============================================================================ * RecoGood — Claude Design canonical foundation (Apple direction) * ---------------------------------------------------------------------------- * Source of truth: design_handoff_recogood_reskin/specs/01_foundations.md * ("Final Front-End Design (2).zip", founder-LOCKED Apple/blue direction). * Component rules lifted verbatim from RecoGood App.dc.html (visual reference). * Type loaded via Google Fonts (self-host .woff2 in prod): Geist + Geist Mono. * (Geist 400/500/600/700 + Geist Mono 400/500 already self-hosted at * static/velzon/fonts/recogood/ — wire @font-face there in the port.) * Theme: light = :root; dark (first-class) = [data-theme="dark"]; persist in * localStorage['rg-theme']; topbar moon/sun flips data-theme on . * This is a foundation artifact — NOT yet wired into base.html. Re-theme the * existing Django templates onto these tokens (preserve every route/column/copy). * ==========================================================================*/ /* ---- Light (default) ---- */ :root { --canvas:#FFFFFF; --card:#FFFFFF; --inset:#F5F5F7; --hover:#F3F3F5; --border:#E6E6E9; --border2:#D8D8DD; --text:#1D1D1F; --text2:#6E6E73; --text3:#86868B; --muted:#A1A1A6; --accent:#0071E3; --accent-h:#0060C4; --accent-soft:#E8F1FD; --accent-text:#0064C8; --on-accent:#FFFFFF; --sidebar:#FBFBFD; --side-text:#5E5E63; --side-active:#1D1D1F; --recovery:#248A3D; --rec-bg:#E8F4EC; --warn:#9A6300; --warn-bg:#F6EEDD; --risk:#C8102E; --risk-bg:#F7E5E8; --grid:#E8E8EB; /* shape / elevation / motion (both themes) */ --radius:14px; /* cards */ --radius-sm:11px; /* KPI tiles, insets */ --btn-radius:980px; /* pill buttons & filter chips */ --shadow:0 1px 3px rgba(0,0,0,.05); --shadow-pop:0 8px 30px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08); /* popovers/dialogs/dropdowns (FE3) */ /* type */ --fui:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---- Dark (first-class) ---- */ [data-theme="dark"] { --canvas:#000000; --card:#1C1C1E; --inset:#2C2C2E; --hover:#2C2C2E; --border:#2E2E32; --border2:#3A3A3E; --text:#F5F5F7; --text2:#A1A1A6; --text3:#86868B; --muted:#6E6E73; --accent:#0A84FF; --accent-h:#3D9BFF; --accent-soft:#16263C; --accent-text:#5AB0FF; --on-accent:#FFFFFF; /* #141 #4a — lightened from #161618 (too near-black) so the nav/sidebar/topbar chrome reads as a distinct dark surface above the pure-black --canvas, not a black-on-black blob. */ --sidebar:#202023; --side-text:#A1A1A6; --side-active:#FFFFFF; --recovery:#30D158; --rec-bg:#102A18; --warn:#FFD426; --warn-bg:#2A2410; --risk:#FF453A; --risk-bg:#2A1414; --grid:#2C2C2E; --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-pop:0 16px 48px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5); } /* ============================================================================ * Component rules — verbatim from RecoGood App.dc.html (scoped to .rgw app root) * ==========================================================================*/ *{box-sizing:border-box} html,body{margin:0} .rgw [data-lucide]{flex:0 0 auto} .rgw svg.lucide{display:block} /* nav: NO transition on sticky sidebar items (compositor stale-paint) — brightness hover only */ .rgw .navlink:hover{filter:brightness(0.97)} .rgw .navlink[data-active="1"]{background:var(--accent-soft) !important;color:var(--side-active) !important;font-weight:600 !important;border-left-color:var(--accent) !important;padding-left:9px !important} .rgw .row-hover{cursor:pointer;transition:background .1s ease} .rgw .row-hover:hover{background:var(--inset) !important} .rgw .lnk:hover{color:var(--accent-h) !important} .rgw .ibtn{transition:background .12s ease,color .12s ease} .rgw .ibtn:hover{background:var(--hover) !important;color:var(--text) !important} .rgw .pbtn{transition:background .12s ease} .rgw .pbtn:hover{background:var(--accent-h) !important} .rgw .chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap;font-family:var(--fui)} /* status vocab: recovery tone = settled/approved/ready/recovered; neutral = unsettled/drafted/open; warn = pending/review/in-review; risk = refunded/loss/failed/error. RESERVED tones, never decorative. FE3 .rg-chip ok/neutral/warn/risk translate to these data-st values (see static/design/CLASS_MAP.md). */ .rgw .chip[data-st="settled"],.rgw .chip[data-st="approved"],.rgw .chip[data-st="ready"],.rgw .chip[data-st="recovered"]{background:var(--rec-bg);color:var(--recovery);border-color:color-mix(in srgb,var(--recovery) 34%,transparent)} .rgw .chip[data-st="unsettled"],.rgw .chip[data-st="drafted"],.rgw .chip[data-st="open"]{background:var(--inset);color:var(--text2);border-color:var(--border2)} .rgw .chip[data-st="pending"],.rgw .chip[data-st="review"],.rgw .chip[data-st="in-review"]{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)} .rgw .chip[data-st="refunded"],.rgw .chip[data-st="loss"],.rgw .chip[data-st="failed"],.rgw .chip[data-st="error"]{background:var(--risk-bg);color:var(--risk);border-color:color-mix(in srgb,var(--risk) 34%,transparent)} .rgw .chip[data-grade="claim"]{background:var(--rec-bg);color:var(--recovery);border-color:color-mix(in srgb,var(--recovery) 40%,transparent)} .rgw .chip[data-grade="advisory"]{background:var(--inset);color:var(--text2);border-color:var(--border2)} .rgw .mt[data-match="matched"]{color:var(--recovery)} .rgw .mt[data-match="partial"]{color:var(--warn)} .rgw .mt[data-match="none"]{color:var(--risk)} .rgw ::-webkit-scrollbar{width:10px;height:10px} .rgw ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px} .rgw ::-webkit-scrollbar-track{background:transparent} @keyframes rgIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}} @keyframes rgFade{from{opacity:0}to{opacity:1}}