/* ============================================================ eComma — design system (single source of truth) Colors = official brand (ecomma.co). Fonts = Space Grotesk / Inter / JetBrains Mono. Two themes: light (:root) + dark ([data-theme="dark"]). Load fonts in the HTML ; link this file once per page. VENDORED VERBATIM from 0-System/0.4-Brand-Assets/eComma.css (eComma SSOT). Do not edit here; edit the canonical file and re-vendor. App-specific finance components live in finance.css (eComma vars only). ============================================================ */ /* ---------- THEME: LIGHT (default) ---------- */ :root{ --ink:#0f172a; --ink-soft:#4b5563; --ink-faint:#6b7280; --paper:#f6f9fc; --card:#ffffff; --line:#e5e7eb; --line-soft:#f3f4f6; --mix:#ffffff; --accent:#073877; --on-accent:#ffffff; --ring:rgba(87,202,251,.45); --mark-bg:#d6f0fb; --mark-fg:#073877; --pos:#17a673; --neg:#dc2626; --a0:#64748b; --a1:#0a4a9a; --a2:#0d9488; --a3:#7c3aed; --a4:#d97706; --a5:#db2777; --a6:#073877; --a7:#17a673; --a8:#ea580c; --a9:#9333ea; --radius:10px; } /* ---------- THEME: DARK (Carbon + eComma blue) ---------- */ [data-theme="dark"]{ --ink:#eef2f7; --ink-soft:#a7b0bd; --ink-faint:#6f7884; --paper:#080a0d; --card:#12161c; --line:#242b34; --line-soft:#191e25; --mix:#12161c; --accent:#57cafb; --on-accent:#062032; --ring:rgba(87,202,251,.40); --mark-bg:#57cafb; --mark-fg:#062032; --pos:#34d399; --neg:#f87171; --a0:#94a3b8; --a1:#4aa3ff; --a2:#2dd4bf; --a3:#a78bfa; --a4:#fbbf24; --a5:#f472b6; --a6:#57cafb; --a7:#34d399; --a8:#fb923c; --a9:#c084fc; --radius:10px; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease} .wrap{max-width:1000px; margin:0 auto; padding:48px 24px 80px} /* ---------- typography / header ---------- */ header{margin-bottom:26px} .eyebrow{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px} h1{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:40px; letter-spacing:-.02em; margin:0 0 8px; line-height:1.05} h1 .dot{color:var(--accent)} .sub{font-size:16px; color:var(--ink-soft); margin:0 0 18px; max-width:62ch} .meta{display:flex; flex-wrap:wrap; gap:8px} .tag{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px} h2{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; margin:34px 0 14px; color:var(--ink); display:flex; align-items:center; gap:10px} h2::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--accent)} /* ---------- stat bar ---------- */ .stats{display:flex; gap:0; margin:26px 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} .stat{flex:1; padding:16px 20px; border-right:1px solid var(--line-soft)} .stat:last-child{border-right:0} .stat .num{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:26px; line-height:1} .stat .lbl{font-size:12.5px; color:var(--ink-faint); margin-top:4px} /* ---------- cards & KPIs ---------- */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px} .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 0 rgba(0,0,0,.02)} .card .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)} .card .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:30px; line-height:1.1; margin:8px 0 6px} .chip{display:inline-flex; align-items:center; gap:4px; font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px} .chip.up{color:var(--pos); background:color-mix(in srgb, var(--pos) 14%, var(--mix))} .chip.down{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .chip.flat{color:var(--ink-faint); background:var(--line-soft)} /* ---------- controls ---------- */ .row-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center} .btn{font-family:inherit; font-size:13.5px; font-weight:500; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 16px; cursor:pointer; transition:border-color .15s, color .15s} .btn:hover{border-color:var(--ink-faint); color:var(--ink)} .btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)} .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)} .btn.primary:hover{filter:brightness(1.06); color:var(--on-accent)} .input{flex:1; min-width:200px; padding:11px 14px; font-size:14.5px; font-family:inherit; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--ink)} .input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)} /* ---------- status pills ---------- */ .pill{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500; border-radius:999px; padding:3px 10px} .pill.active{color:var(--on-accent); background:var(--accent)} .pill.ok{color:var(--pos); background:color-mix(in srgb, var(--pos) 15%, var(--mix))} .pill.warn{color:var(--a4); background:color-mix(in srgb, var(--a4) 16%, var(--mix))} .pill.idle{color:var(--ink-faint); background:var(--line-soft)} .pill.low{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .pill.p1{color:var(--neg); background:color-mix(in srgb, var(--neg) 14%, var(--mix))} .pill.p2{color:var(--a4); background:color-mix(in srgb, var(--a4) 16%, var(--mix))} .pill.p3{color:var(--ink-faint); background:var(--line-soft)} /* ---------- table ---------- */ table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden} th,td{text-align:left; padding:11px 16px; font-size:13.5px; border-bottom:1px solid var(--line-soft)} th{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--line-soft)} td.num{font-family:"JetBrains Mono",monospace; text-align:right; color:var(--ink-soft)} /* ---------- callout ---------- */ .callout{background:color-mix(in srgb, var(--accent) 7%, var(--card)); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-left:3px solid var(--accent); border-radius:var(--radius); padding:16px 18px; font-size:14.5px; color:var(--ink-soft)} .callout b{color:var(--ink)} .callout .lbl{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 6px} .callout p{margin:0; color:var(--ink-soft)} /* ---------- footer ---------- */ footer{margin-top:40px; font-size:12.5px; color:var(--ink-faint); text-align:center; font-family:"JetBrains Mono",monospace} /* ============ DASHBOARD ============ */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:24px 0} .kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 0 rgba(0,0,0,.02)} .kpi .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)} .kpi .v{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:30px; line-height:1.1; margin:8px 0 6px} .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:18px 0} .panel h2{display:block; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:15px; margin:0 0 18px} .panel h2::before{display:none} .panel .hint{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-faint); font-weight:400} .chart{display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; border-bottom:1px solid var(--line); position:relative} .chart .grid-line{position:absolute; left:0; right:0; border-top:1px dashed var(--line-soft)} .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; z-index:1} .bar{width:60%; max-width:46px; border-radius:6px 6px 0 0; background:var(--accent); transition:height .5s ease; min-height:3px} .bar-lbl{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-faint)} /* ============ THEME TOGGLE ============ */ .theme-toggle{position:fixed; top:14px; right:14px; z-index:50; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:15px; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(2,6,23,.10); transition:color .15s, border-color .15s} .theme-toggle:hover{color:var(--accent); border-color:var(--accent)} /* ---------- responsive ---------- */ @media (max-width:620px){ h1{font-size:30px} .stats{flex-wrap:wrap} .stat{flex:1 1 50%} } @media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto}}