/* CPS PAY shared design tokens.
   One file for the cloud dashboards and the connector's built-in pages (ui/index.html, ui/vterm.html).
   Names are --cps-*. Components read these; nothing in here sets a selector except :root and the theme switches.
   Copy this file verbatim into the connector's ui/ folder: if the two copies differ, this one is right.
   No inline styles or scripts are needed: the cloud's strict CSP only allows 'self' stylesheets. */

:root{
  /* type */
  --cps-font:system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,sans-serif;
  --cps-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --cps-fs-xs:12px;--cps-fs-sm:13px;--cps-fs-md:15px;--cps-fs-lg:18px;--cps-fs-xl:22px;--cps-fs-hero:clamp(40px,11vw,64px);
  --cps-lh:1.45;
  /* space: 4px base */
  --cps-s1:4px;--cps-s2:8px;--cps-s3:12px;--cps-s4:16px;--cps-s5:24px;--cps-s6:32px;
  /* shape */
  --cps-r-sm:8px;--cps-r-md:12px;--cps-r-lg:16px;--cps-r-pill:99px;
  /* touch: minimum tap target on phones */
  --cps-tap:44px;
  /* page gutter grows with the screen: 12px phone, 20px tablet, 24px desktop */
  --cps-gutter:12px;
  /* motion */
  --cps-ease:cubic-bezier(.2,.7,.2,1);--cps-t:.18s;

  /* colour: light theme (default for the connector and the admin pages) */
  --cps-bg:#eceff3;--cps-surface:#ffffff;--cps-surface-2:#f6f8fb;--cps-chip:#eef2f6;
  --cps-ink:#13233a;--cps-mute:#5b6b80;--cps-line:#dbe1e9;--cps-rail:#13233a;--cps-rail-ink:#c9d4e4;
  --cps-accent:#1f4fbf;--cps-accent-hi:#3b6fe0;--cps-on-accent:#ffffff;
  --cps-ok:#0f8a5f;--cps-ok-bg:#e2f6ee;
  --cps-warn:#b87100;--cps-warn-bg:#fdf1d9;
  --cps-bad:#c93434;--cps-bad-bg:#fbe4e4;
  --cps-idle:#8b97a8;
  --cps-shadow:0 1px 2px rgba(19,35,58,.08),0 6px 18px -10px rgba(19,35,58,.25);
  /* chart series: same ten in the same order everywhere (matches .sc0 .. .sc9) */
  --cps-s-0:#4d9bf0;--cps-s-1:#f0983a;--cps-s-2:#3ec28f;--cps-s-3:#e4639f;--cps-s-4:#e9d34a;
  --cps-s-5:#a78bfa;--cps-s-6:#2dd4d4;--cps-s-7:#ef6a6a;--cps-s-8:#9bd13f;--cps-s-9:#9aa7b4;
}

@media (min-width:700px){:root{--cps-gutter:20px}}
@media (min-width:1100px){:root{--cps-gutter:24px}}

/* dark theme: follows the system, or is forced with data-theme="dark" (the customer dashboard always forces it) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cps-bg:#0a0e14;--cps-surface:#10161e;--cps-surface-2:#151d27;--cps-chip:#18212c;
    --cps-ink:#e8eef5;--cps-mute:#8da0b3;--cps-line:#1e2936;--cps-rail:#080c12;--cps-rail-ink:#9fb0c6;
    --cps-accent:#3987e5;--cps-accent-hi:#79b0f5;--cps-on-accent:#ffffff;
    --cps-ok:#37c27a;--cps-ok-bg:rgba(55,194,122,.14);
    --cps-warn:#e7b04a;--cps-warn-bg:rgba(231,176,74,.14);
    --cps-bad:#ef6a6a;--cps-bad-bg:rgba(239,106,106,.14);
    --cps-idle:#8696a8;
    --cps-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --cps-bg:#0a0e14;--cps-surface:#10161e;--cps-surface-2:#151d27;--cps-chip:#18212c;
  --cps-ink:#e8eef5;--cps-mute:#8da0b3;--cps-line:#1e2936;--cps-rail:#080c12;--cps-rail-ink:#9fb0c6;
  --cps-accent:#3987e5;--cps-accent-hi:#79b0f5;--cps-on-accent:#ffffff;
  --cps-ok:#37c27a;--cps-ok-bg:rgba(55,194,122,.14);
  --cps-warn:#e7b04a;--cps-warn-bg:rgba(231,176,74,.14);
  --cps-bad:#ef6a6a;--cps-bad-bg:rgba(239,106,106,.14);
  --cps-idle:#8696a8;
  --cps-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){:root{--cps-t:0s}}