/* ============================================================ CCS UI Kit — theme tokens + base components Clear Choice System design system. One source of truth for the look of every CCS app (Mission Control, Service Brain, client builds). HOW TO USE 1. Link this file: 2. Build with the CSS variables (--brand, --surface, --ink, …) and the component classes below (.btn, .card, .pill, .field, .seg, .ccs-app…). 3. Dark mode is automatic (prefers-color-scheme). To force a theme, set data-theme="light" | "dark" on . Framework-agnostic — works with plain HTML, React, Vue, anything. ============================================================ */ :root{ /* --- brand (the two logo colors + supports) --- */ --ccs-periwinkle:#6B8CC2; --ccs-periwinkle-strong:#4E6FA8; --ccs-gold:#FCC333; --ccs-gold-deep:#E9AE33; --ccs-navy:#243048; --ccs-blue:#67A8CF; /* --- surfaces + ink (LIGHT, default) --- */ --paper:#F4F1EA; --surface:#FFFFFF; --surface-2:#F0ECE3; --surface-3:#E7E1D5; --ink:#243048; --ink-soft:#5B6478; --ink-faint:#949CAA; --line:#E7E1D6; --line-strong:#D8D1C3; --navy:#243048; --navy-2:#2E3B57; --on-navy:#EAF0F8; --brand:#6B8CC2; --brand-strong:#4E6FA8; --brand-tint:#E7EDF6; --gold:#E9AE33; --gold-bright:#FCC333; --gold-tint:#FBEFD3; --blue:#67A8CF; /* --- status --- */ --ok:#3E9E6E; --ok-tint:#E4F1EA; --pending:#E9AE33; --pending-tint:#FBEFD3; --info:#356299; --info-tint:#E3ECF5; --bad:#CE5A4E; --bad-tint:#F8E5E2; /* --- elevation + shape --- */ --shadow:0 1px 3px rgba(36,48,72,.10), 0 10px 26px -6px rgba(36,48,72,.22); --shadow-lg:0 20px 52px -12px rgba(36,48,72,.40); --radius:12px; --radius-sm:9px; --radius-pill:20px; /* --- type (system stacks — CSP-safe, no webfonts) --- */ --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif; --font-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace; } /* --- dark theme: follows the OS by default --- */ @media (prefers-color-scheme:dark){ :root{ --paper:#171C26; --surface:#212836; --surface-2:#2A3140; --surface-3:#333B4B; --ink:#E9ECF2; --ink-soft:#A4ADBD; --ink-faint:#6F7889; --line:#313947; --line-strong:#3D4553; --navy:#161B24; --navy-2:#212836; --on-navy:#E9ECF2; --brand:#8AA6D4; --brand-strong:#6B8CC2; --brand-tint:#25314A; --gold:#EBBE5A; --gold-bright:#FCC333; --gold-tint:#332B18; --blue:#79B0D6; --ok:#57B487; --ok-tint:#1C2C24; --pending:#EBBE5A; --pending-tint:#2E2818; --info:#77A6DA; --info-tint:#1B2530; --bad:#E07A70; --bad-tint:#2E1C1A; --shadow:0 1px 3px rgba(0,0,0,.4), 0 12px 30px -6px rgba(0,0,0,.62); --shadow-lg:0 22px 58px -12px rgba(0,0,0,.72); } } /* --- explicit overrides win in both directions (theme toggle) --- */ :root[data-theme="light"]{ --paper:#F4F1EA; --surface:#FFFFFF; --surface-2:#F0ECE3; --surface-3:#E7E1D5; --ink:#243048; --ink-soft:#5B6478; --ink-faint:#949CAA; --line:#E7E1D6; --line-strong:#D8D1C3; --navy:#243048; --navy-2:#2E3B57; --on-navy:#EAF0F8; --brand:#6B8CC2; --brand-strong:#4E6FA8; --brand-tint:#E7EDF6; --gold:#E9AE33; --gold-bright:#FCC333; --gold-tint:#FBEFD3; --blue:#67A8CF; --ok:#3E9E6E; --ok-tint:#E4F1EA; --pending:#E9AE33; --pending-tint:#FBEFD3; --info:#356299; --info-tint:#E3ECF5; --bad:#CE5A4E; --bad-tint:#F8E5E2; --shadow:0 1px 3px rgba(36,48,72,.10), 0 10px 26px -6px rgba(36,48,72,.22); --shadow-lg:0 20px 52px -12px rgba(36,48,72,.40); } :root[data-theme="dark"]{ --paper:#171C26; --surface:#212836; --surface-2:#2A3140; --surface-3:#333B4B; --ink:#E9ECF2; --ink-soft:#A4ADBD; --ink-faint:#6F7889; --line:#313947; --line-strong:#3D4553; --navy:#161B24; --navy-2:#212836; --on-navy:#E9ECF2; --brand:#8AA6D4; --brand-strong:#6B8CC2; --brand-tint:#25314A; --gold:#EBBE5A; --gold-bright:#FCC333; --gold-tint:#332B18; --blue:#79B0D6; --ok:#57B487; --ok-tint:#1C2C24; --pending:#EBBE5A; --pending-tint:#2E2818; --info:#77A6DA; --info-tint:#1B2530; --bad:#E07A70; --bad-tint:#2E1C1A; --shadow:0 1px 3px rgba(0,0,0,.4), 0 12px 30px -6px rgba(0,0,0,.62); --shadow-lg:0 22px 58px -12px rgba(0,0,0,.72); } /* ============================================================ BASE ============================================================ */ *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} a{color:var(--brand-strong)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:9px 16px;font-size:14px;font-weight:600;border:1px solid transparent;transition:.15s;white-space:nowrap;cursor:pointer;font-family:inherit} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-strong)} .btn-gold{background:var(--gold-bright);color:#3a2c07} .btn-gold:hover{filter:brightness(1.05)} .btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)} .btn-ghost:hover{border-color:var(--brand)} .btn-lg{padding:12px 22px;font-size:15px} .btn:disabled{opacity:.5;cursor:not-allowed} .icon-btn{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-soft);width:37px;height:37px;border-radius:9px;display:grid;place-items:center;transition:.15s;cursor:pointer} .icon-btn:hover{color:var(--ink);border-color:var(--brand)} /* ============================================================ CARDS ============================================================ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} /* ============================================================ PILLS / STATUS (add .pill-sq for squared corners) ============================================================ */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap} .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill-sq{border-radius:5px} .pill-ok{color:var(--ok);background:var(--ok-tint)} .pill-pending{color:var(--pending);background:var(--pending-tint)} .pill-info{color:var(--info);background:var(--info-tint)} .pill-bad{color:var(--bad);background:var(--bad-tint)} .pill-neutral{color:var(--ink-soft);background:var(--surface-3)} .pill-brand{color:var(--brand-strong);background:var(--brand-tint)} /* ============================================================ FORM FIELDS ============================================================ */ .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:9px 11px;width:100%;font-size:14px;color:var(--ink);font-family:inherit} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none} /* ============================================================ SEGMENTED TABS ============================================================ */ .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px} .seg-btn{border:0;background:none;color:var(--ink-soft);font-size:13px;font-weight:600;padding:6px 13px;border-radius:7px;display:flex;align-items:center;gap:7px;transition:.12s;cursor:pointer;font-family:inherit} .seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)} /* ============================================================ SUMMARY ROWS (label ↔ value) ============================================================ */ .trow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;color:var(--ink-soft)} .trow .val,.trow .mono{color:var(--ink)} .trow.total{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;color:var(--ink);font-weight:700} /* ============================================================ STAT / KPI TILES ============================================================ */ .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 16px} .stat .k{font-size:11.5px;color:var(--ink-soft)} .stat .v{font-size:24px;font-weight:700;margin-top:5px;letter-spacing:-.02em} .stat .v small{font-size:13px;color:var(--ink-faint);font-weight:600} .stat .d{font-size:11px;margin-top:4px;font-weight:600} .stat .d.up{color:var(--ok)} .stat .d.down{color:var(--bad)} /* ============================================================ APP SHELL — navy sidebar + main column Markup: .ccs-app > (.ccs-sidebar , .ccs-main > .ccs-topbar + content) ============================================================ */ .ccs-app{display:grid;grid-template-columns:246px 1fr;min-height:100vh} .ccs-sidebar{background:var(--navy);color:var(--on-navy);display:flex;flex-direction:column;padding:18px 14px;gap:18px;position:sticky;top:0;height:100vh} .ccs-brand{display:flex;align-items:center;gap:11px;padding:2px 6px} .ccs-brand .mark{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 3px 10px -2px rgba(0,0,0,.4);padding:3px;overflow:hidden} .ccs-brand .mark img{width:100%;height:100%;object-fit:contain;display:block} .ccs-brand .name{font-size:16px;font-weight:700;line-height:1.05} .ccs-brand .name small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-top:3px} .nav-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;color:rgba(234,240,248,.8);padding:9px 11px;border-radius:9px;font-size:14px;transition:.15s;cursor:pointer;font-family:inherit} .nav-btn:hover{background:rgba(255,255,255,.06);color:#fff} .nav-btn.active{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 3px 10px -3px rgba(107,140,194,.7)} .ccs-main{display:flex;flex-direction:column;min-width:0} .ccs-topbar{display:flex;align-items:center;gap:14px;padding:15px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);z-index:30} /* ============================================================ MODAL / SCRIM ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(20,25,40,.55);backdrop-filter:blur(3px);z-index:60;display:none;align-items:center;justify-content:center;padding:24px} .scrim.show{display:flex} .modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);max-width:460px;width:100%;padding:25px} /* ============================================================ RESPONSIVE + MOTION ============================================================ */ @media (max-width:900px){ .ccs-app{grid-template-columns:1fr} .ccs-sidebar{position:relative;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px} } @media (prefers-reduced-motion:reduce){*{transition:none!important}}