/* SuperOffice — the design system, applied to the site. Tokens live in
 * so-tokens.css (loaded first). BRAND.md is the written version. */
:root{
  /* ---- the older vocabularies, re-pointed (blue-whale.css + palette.css) ---- */
  --color-canvas: var(--so-paper-100);
  --color-canvas-raised: var(--so-paper-000);
  --color-canvas-lifted: var(--so-paper-000);
  --color-canvas-inset: var(--so-paper-050);
  --color-ink: var(--so-ink-900);
  --color-ink-muted: var(--so-ink-600);
  --color-ink-dim: var(--so-ink-500);
  --color-rule: var(--so-stone-200);
  --color-rule-strong: var(--so-stone-300);
  --color-accent: #c5a55a;
  --color-accent-soft: #d4ba7a;
  --color-accent-deep: var(--so-gold-800);
  --color-accent-tint: var(--so-gold-050);
  --accent-ink: #0b1d32;
  --accent-press: #a8893e;
  --color-ok: var(--so-success-600); --color-ok-dot: var(--so-success-600);
  --color-bad: var(--so-danger-600); --color-bad-dot: var(--so-danger-600);
  --paper: var(--color-canvas); --card: var(--color-canvas-raised); --raised: var(--color-canvas-inset);
  --ink: var(--color-ink); --ink-2: var(--color-ink-muted); --muted: var(--color-ink-dim);
  --line: var(--color-rule); --line-2: var(--color-rule-strong);
  --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: var(--color-accent-tint);
  --ok: var(--color-ok); --bad: var(--color-bad);
  --ring: 0 0 0 3px light-dark(rgba(11,29,50,.22), rgba(227,233,245,.35));
  --shadow: var(--so-shadow-card);
  --radius-sm: var(--so-r-md); --radius: var(--so-r-lg); --radius-lg: var(--so-r-xl);
}
[data-theme="light"]{color-scheme:light} [data-theme="dark"]{color-scheme:dark}
:root{--scrim:246,244,239}
[data-theme="dark"]{--scrim:14,18,25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--scrim:14,18,25}}

/* ---- one face ---- */
html,body,button,input,select,textarea{font-family:var(--so-font)}
body{background:var(--so-paper-100);color:var(--so-ink-900);-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.01em}
/* no monospace in the chrome: figures keep their columns with tabular numbers */
.mono,.num,time,.eyebrow,.state,td,input[type="date"].fin{font-family:var(--so-font)!important;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--so-gold-800)}
a{color:var(--so-navy-900)}
:focus-visible{outline:2px solid var(--so-navy-900);outline-offset:2px}

/* ---- buttons (variation A) ---- */
.btn,.so-btn{position:relative;overflow:hidden;isolation:isolate;min-height:40px;padding:0 18px;border-radius:var(--so-r-md);
  border:1.5px solid var(--so-navy-900);background:var(--so-paper-000);color:var(--so-navy-900);
  font:600 14px/1 var(--so-font);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;text-decoration:none;transition:transform .14s var(--so-ease),box-shadow .14s var(--so-ease),background .14s,color .14s,border-color .14s}
.btn::before,.so-btn::before{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s var(--so-ease)}
.btn:hover::before,.so-btn:hover::before{left:125%}
.btn:hover,.so-btn:hover{background:var(--so-grad-navy);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:var(--so-shadow-navy)}
.btn:active,.so-btn:active{transform:translateY(0)}
.btn-primary,.so-btn.primary{background:var(--so-gold-050);border-color:var(--so-gold-500);color:var(--so-gold-800)}
.btn-primary:hover,.so-btn.primary:hover{background:var(--so-grad-gold);color:#fff;border-color:transparent;box-shadow:var(--so-shadow-gold)}
.so-btn.filled{background:var(--so-grad-gold);border-color:transparent;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.so-btn.ghost{border-color:transparent;background:transparent}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.btn-bad{border-color:var(--so-danger-600);color:var(--so-danger-600);background:transparent}
.btn-bad:hover{background:var(--so-danger-600);color:#fff;box-shadow:none}
.btn[disabled],.so-btn[disabled]{background:var(--so-stone-300);border-color:var(--so-stone-300);color:var(--so-ink-500);transform:none;box-shadow:none;cursor:default}
.btn[disabled]::before,.so-btn[disabled]::before{display:none}
@media (max-width:700px){.btn,.so-btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){.btn,.so-btn,.btn::before,.so-btn::before{transition:none}.btn:hover,.so-btn:hover{transform:none}}

/* ---- fields ---- */
.fin,.signin input:not([type=checkbox]),.so-in{border:1px solid var(--so-stone-300);border-radius:var(--so-r-md);background:var(--so-paper-000);
  color:var(--so-ink-900);font:500 14px/1.5 var(--so-font);padding:10px 12px;min-height:44px}
.fin:focus,.so-in:focus,.signin input:focus{outline:2px solid var(--so-navy-900);outline-offset:0;border-color:var(--so-navy-900);box-shadow:none}
.flabel{font-weight:600;font-size:14px;color:var(--so-ink-900)}
input[type=checkbox],input[type=radio]{accent-color:var(--so-navy-900)}

/* ---- surfaces ---- */
.card,.tablewrap{background:var(--so-paper-000);border:1px solid var(--so-stone-200);border-radius:var(--so-r-lg);box-shadow:var(--so-shadow-card)}
th{font:700 11px var(--so-font);letter-spacing:.12em;text-transform:uppercase;color:var(--so-gold-800)}
tbody tr:hover{background:var(--so-paper-050)}
/* selection is navy, never gold */
.check:has(input:checked){background:var(--so-navy-050);border-color:var(--so-navy-900)}
.so-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--so-r-pill);
  border:1px solid var(--so-stone-300);background:var(--so-paper-000);color:var(--so-navy-900);font:600 14px var(--so-font);cursor:pointer}
.so-chip[aria-pressed="true"],.so-chip.on{background:var(--so-navy-900);border-color:var(--so-navy-900);color:var(--so-paper-000)}

/* phone: row actions stay compact, and a wide table scrolls inside its card
   instead of pushing its last column off the screen */
.tablewrap{overflow-x:auto}
@media (max-width:700px){
  .btn-sm{min-height:36px;padding:0 10px}
  th,td{padding-left:10px!important;padding-right:10px!important}
}

/* links that stand alone (footer columns, a table's title cell, the wordmark) get a
   24px target — WCAG 2.5.8's floor. Links inside running sentences are exempt. */
footer a,.foot a,td > a,header > a.brand,.brand{display:inline-block;padding-block:3px;min-height:24px}