/* Payroon user design system — tokens, base, primitives.
   Loaded after legacy CSS. The "legacy bridge" block remaps old variables so
   pages not yet rebuilt inherit the new look; delete it once all pages migrate. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

:root{
  /* color */
  --px-ink:#0E1E3A; --px-ink-2:#4A5A78; --px-ink-3:#7F8CA6;
  --px-bg:#F4F6FA; --px-surface:#FFFFFF; --px-surface-2:#EDF1F8; --px-line:#E1E7F0;
  --px-primary:#0A5FD8; --px-primary-dark:#0847A8; --px-primary-soft:#E7F0FD;
  --px-accent:#FFB020; --px-accent-soft:#FFF3D6;
  --px-success:#12805C; --px-success-soft:#E3F5EE;
  --px-warning:#B7791F; --px-warning-soft:#FCF1DC;
  --px-danger:#C93B3B;  --px-danger-soft:#FBE8E8;
  --px-info:#2F7DD1;    --px-info-soft:#E4F0FB;
  /* type */
  --px-font-display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --px-font-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --px-fs-display:clamp(2.1rem,6vw,3rem); --px-fs-title:1.5rem; --px-fs-section:1.05rem;
  --px-fs-body:.94rem; --px-fs-label:.8rem; --px-fs-meta:.74rem;
  /* space / radius / shadow / motion */
  --px-s1:4px; --px-s2:8px; --px-s3:12px; --px-s4:16px; --px-s5:24px; --px-s6:32px; --px-s7:48px;
  --px-r-sm:10px; --px-r-md:14px; --px-r-lg:20px; --px-r-pill:999px;
  --px-shadow-1:0 1px 2px rgba(14,30,58,.06),0 1px 1px rgba(14,30,58,.04);
  --px-shadow-2:0 10px 30px -12px rgba(14,30,58,.22),0 2px 6px rgba(14,30,58,.06);
  --px-fast:160ms; --px-med:300ms; --px-ease:cubic-bezier(.2,.7,.2,1);
  --px-side-w:264px; --px-safe-b:env(safe-area-inset-bottom,0px); --px-safe-t:env(safe-area-inset-top,0px);
}

/* legacy bridge */
:root{
  --primary-color:var(--px-primary); --secondary-color:var(--px-primary-dark); --accent-color:var(--px-accent);
  --bg-primary:var(--px-bg); --bg-secondary:var(--px-surface); --bg-card:var(--px-surface);
  --text-primary:var(--px-ink); --text-secondary:var(--px-ink-2); --border-color:var(--px-line);
  --radius-sm:var(--px-r-sm); --radius-md:var(--px-r-md); --radius-lg:var(--px-r-lg); --radius-xl:var(--px-r-lg);
  --shadow:var(--px-shadow-1); --shadow-hover:var(--px-shadow-2);
}

body{font-family:var(--px-font-body);font-size:var(--px-fs-body);color:var(--px-ink);background:var(--px-bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.px-display{font-family:var(--px-font-display);color:var(--px-ink);letter-spacing:-.02em;font-weight:700}
.px-num{font-family:var(--px-font-display);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em}
:focus-visible{outline:3px solid color-mix(in srgb,var(--px-primary) 55%,transparent);outline-offset:2px;border-radius:var(--px-r-sm)}

/* buttons */
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--px-s2);min-height:48px;padding:0 var(--px-s5);
  border:0;border-radius:var(--px-r-md);font:600 var(--px-fs-body)/1 var(--px-font-body);cursor:pointer;
  background:var(--px-primary);color:#fff;transition:transform var(--px-fast) var(--px-ease),background var(--px-fast),box-shadow var(--px-fast)}
.px-btn:hover{background:var(--px-primary-dark);color:#fff}
.px-btn:active{transform:scale(.97)}
.px-btn[disabled]{opacity:.5;pointer-events:none}
.px-btn--quiet{background:var(--px-surface-2);color:var(--px-ink)} .px-btn--quiet:hover{background:var(--px-line);color:var(--px-ink)}
.px-btn--ink{background:var(--px-ink)} .px-btn--ink:hover{background:#1B3157}

/* inputs */
.px-field{display:grid;gap:6px}
.px-label{font-size:var(--px-fs-label);font-weight:600;color:var(--px-ink-2)}
.px-input{width:100%;min-height:50px;padding:0 var(--px-s4);background:var(--px-surface);color:var(--px-ink);
  border:1.5px solid var(--px-line);border-radius:var(--px-r-md);font:500 1rem var(--px-font-body);
  transition:border-color var(--px-fast),box-shadow var(--px-fast)}
.px-input:focus{outline:0;border-color:var(--px-primary);box-shadow:0 0 0 4px var(--px-primary-soft)}
.px-input[aria-invalid="true"]{border-color:var(--px-danger)}
.px-error{color:var(--px-danger);font-size:var(--px-fs-meta);font-weight:600}

/* surfaces */
.px-panel{background:var(--px-surface);border:1px solid var(--px-line);border-radius:var(--px-r-lg);padding:var(--px-s5);box-shadow:var(--px-shadow-1)}
.px-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--px-r-pill);font-size:var(--px-fs-meta);font-weight:700}
.px-badge--ok{background:var(--px-success-soft);color:var(--px-success)} .px-badge--wait{background:var(--px-warning-soft);color:var(--px-warning)}
.px-badge--bad{background:var(--px-danger-soft);color:var(--px-danger)} .px-badge--info{background:var(--px-info-soft);color:var(--px-info)}
.px-skeleton{border-radius:var(--px-r-sm);background:linear-gradient(90deg,var(--px-surface-2) 25%,#F7F9FD 50%,var(--px-surface-2) 75%);background-size:200% 100%;animation:px-shimmer 1.3s linear infinite}
@keyframes px-shimmer{to{background-position:-200% 0}}

/* dark theme — opt-in via [data-theme="dark"]; light is the default */
:root[data-theme="dark"]{
  color-scheme:dark;
  --px-ink:#E8EEFA; --px-ink-2:#A9B6D0; --px-ink-3:#7686A6;
  --px-bg:#0B1424; --px-surface:#121D31; --px-surface-2:#1A2740; --px-line:#24334F;
  --px-primary:#4C93F5; --px-primary-dark:#8DBBFA; --px-primary-soft:#172C4D;
  --px-accent-soft:#3A2E10; --px-success:#3CC79A; --px-success-soft:#123529;
  --px-warning:#E5B25A; --px-warning-soft:#3A2E12; --px-danger:#F07C7C; --px-danger-soft:#3D1A1A;
  --px-info:#6DAAE8; --px-info-soft:#152B47;
  --px-shadow-1:0 1px 2px rgba(0,0,0,.4); --px-shadow-2:0 12px 32px -12px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .px-btn{color:#0B1424} :root[data-theme="dark"] .px-btn:hover{color:#0B1424}
:root[data-theme="dark"] .px-tab-send{color:#0B1424}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* No underlines on text, anywhere */
a,a:hover,a:focus,a:active,a:visited,.btn,.btn:hover,.link-btn,.ax-link,.ax-link:hover,.nav-link,.dropdown-item,.page-link,.px-link,.px-link:hover{text-decoration:none!important}
u,ins{text-decoration:none!important}