/* Shared tokens mirrored from the live CP26 client portal (the client portal)
   and operator portal (the operator portal). Approximate — sampled visually, not
   extracted from source. Used only for this design prototype. */

:root{
  --client-bg:#f6f6f7;
  --client-card-border:#e6e5e3;
  --client-text:#171717;
  --client-muted:#6b6b6b;
  --client-pink-bg:#fdeaf0;
  --client-pink-text:#c22a63;
  --client-orange:#d1490c;
  --client-orange-dark:#b23e09;
  --client-green-bg:#e3f3e6;
  --client-green-text:#1e7a34;
  --client-amber-bg:#fdeee0;
  --client-amber-text:#a15414;

  --ops-navy:#161a24;
  --ops-navy-2:#1d2230;
  --ops-magenta:#b81f6f;
  --ops-bg:#f2f1ee;
  --ops-card-border:#e3e2de;
  --ops-text:#16181d;
  --ops-muted:#6c6f76;
  --ops-green-bg:#e3f3e6;
  --ops-green-text:#1e7a34;
  --ops-red-bg:#fbe4e4;
  --ops-red-text:#a3221f;
  --ops-gray-bg:#efeeea;
  --ops-gray-text:#6c6f76;
  --ops-blue-bg:#e6eefb;
  --ops-blue-text:#2452a3;

  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

* { box-sizing: border-box; }
body { font-family: var(--font); margin:0; }

/* ---- prototype chrome: never part of either real product ---- */
.proto-bar{
  background:#2b2140; color:#fff; font-size:13px; padding:8px 20px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.proto-bar b{ color:#f2c9ff; }
.proto-bar a{ color:#cdb8ff; text-decoration:underline; }
.proto-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-left:6px;
}
.tag-current{ background:#3a3350; color:#c9c2e0; }
.tag-proposed{ background:#5a2a83; color:#f3dcff; }
.tag-assumed{ background:#5a4300; color:#ffdf8a; }

.note-proposed{
  border:1px dashed #9a5cc9; background:#faf3ff; color:#5a2a83;
  padding:10px 14px; border-radius:8px; font-size:13px; margin:14px 0;
}
.note-assumed{
  border:1px dashed #b8890b; background:#fff8e6; color:#7a5a00;
  padding:10px 14px; border-radius:8px; font-size:13px; margin:14px 0;
}
.note-gap{
  border:1px dashed #c23; background:#fff0ef; color:#8a2117;
  padding:10px 14px; border-radius:8px; font-size:13px; margin:14px 0;
}