/* Spondea design tokens, vendored from the design system handoff.
   Two layers are deliberately left out. The webfont layer, because the ops
   console is an internal tool and must not reach a third-party font host to
   render a decision. And the element-defaults layer, because this file is
   picked up by every HTML surface in the application: what is safe to define
   globally is variables, and what is not is a rule that restyles somebody
   else's page. The console's own element defaults are scoped in ops.css. */

/* --- tokens/colors.css --- */
/* ── Spondea color system ───────────────────────────────────────────────
   Ink = graphite with a faint cool cast (records, print).
   Paper = warm off-white (documents, receipts).
   Seal = oxide red, the wax-seal accent. Brand mark + vouched marks only.
   Verify = deep green (identity + QA passed). Hold = amber (pending money,
   at-risk). Agent = slate blue, reserved EXCLUSIVELY for AI attribution.
   Never signal state with color alone: pair with icon + label.        */
:root{
  /* base — ink */
  --ink-950:#0B0F11;--ink-900:#101618;--ink-800:#1B2326;--ink-700:#2B3438;--ink-600:#47545A;
  --ink-500:#6B7A80;--ink-400:#93A1A6;--ink-300:#BCC7CA;--ink-200:#DCE3E4;--ink-100:#ECF0F0;--ink-50:#F5F7F7;
  /* base — paper */
  --paper-0:#FFFDFA;--paper-50:#FBF8F3;--paper-100:#F4F0E8;--paper-200:#E8E2D6;
  /* base — seal (oxide red) */
  --seal-800:#6E2216;--seal-700:#8B2C1D;--seal-600:#A9382A;--seal-500:#C1543F;--seal-300:#E0A395;--seal-100:#F7E6E1;--seal-50:#FCF2EF;
  /* base — verify (green) */
  --verify-800:#124A37;--verify-700:#1A6349;--verify-600:#1F7455;--verify-400:#4E9E7C;--verify-100:#DBEDE3;--verify-50:#EFF7F2;
  /* base — hold (amber) */
  --hold-800:#6B440A;--hold-700:#8A590E;--hold-600:#A56C15;--hold-400:#D2A250;--hold-100:#F8EBD3;--hold-50:#FDF6E9;
  /* base — agent (slate blue, AI only) */
  --agent-800:#22384A;--agent-700:#2F4D64;--agent-600:#3E637E;--agent-400:#7796AC;--agent-100:#DEE7ED;--agent-50:#F0F4F7;
  /* base — danger (cool crimson, distinct from seal) */
  --danger-700:#7C1622;--danger-600:#98202F;--danger-100:#F6E0E3;--danger-50:#FBF1F2;

  /* semantic — surfaces */
  --surface-page:var(--paper-50);
  --surface-card:var(--paper-0);
  --surface-sunken:var(--paper-100);
  --surface-inverse:var(--ink-900);
  --surface-raised:#FFFFFF;
  --surface-ledger:var(--paper-0);
  --surface-ledger-alt:var(--paper-50);
  --surface-overlay:rgba(11,15,17,.44);
  /* semantic — text */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-600);
  --text-faint:var(--ink-500);
  --text-inverse:var(--paper-50);
  --text-inverse-muted:var(--ink-300);
  --text-link:var(--seal-700);
  --text-link-hover:var(--seal-800);
  /* semantic — lines */
  --border-hairline:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-ledger:#E4E0D6;
  --border-inverse:var(--ink-700);
  --focus-ring:var(--agent-600);
  /* semantic — actions */
  --action-primary-bg:var(--ink-900);
  --action-primary-bg-hover:var(--ink-800);
  --action-primary-bg-active:var(--ink-950);
  --action-primary-fg:var(--paper-50);
  --action-secondary-bg:transparent;
  --action-secondary-fg:var(--ink-800);
  --action-secondary-border:var(--ink-300);
  --action-secondary-bg-hover:var(--ink-50);
  --action-seal-bg:var(--seal-600);
  --action-seal-bg-hover:var(--seal-700);
  --action-seal-fg:#FFFFFF;
  --action-disabled-bg:var(--ink-100);
  --action-disabled-fg:var(--ink-400);
  /* semantic — status (always paired with an icon + word) */
  --status-active-fg:var(--verify-700);--status-active-bg:var(--verify-100);--status-active-border:var(--verify-400);
  --status-hold-fg:var(--hold-700);--status-hold-bg:var(--hold-100);--status-hold-border:var(--hold-400);
  --status-risk-fg:var(--hold-800);--status-risk-bg:var(--hold-50);--status-risk-border:var(--hold-600);
  --status-expired-fg:var(--ink-600);--status-expired-bg:var(--ink-100);--status-expired-border:var(--ink-300);
  --status-error-fg:var(--danger-600);--status-error-bg:var(--danger-100);--status-error-border:var(--danger-600);
  --status-vouched-fg:var(--seal-700);--status-vouched-bg:var(--seal-100);--status-vouched-border:var(--seal-500);
  /* semantic — provenance */
  --agent-fg:var(--agent-700);--agent-bg:var(--agent-50);--agent-border:var(--agent-100);
  --human-fg:var(--ink-800);--human-bg:var(--paper-100);--human-border:var(--ink-300);
  /* semantic — money */
  --money-in:var(--verify-700);--money-out:var(--ink-700);--money-held:var(--hold-700);--money-secondary:var(--text-faint);
  /* semantic — seal motif */
  --seal-mark:var(--seal-600);--seal-mark-quiet:var(--seal-300);
  --skeleton:var(--ink-100);--skeleton-sheen:var(--ink-50);
}
:root[data-theme="dark"]{
  --surface-page:#0C1113;
  --surface-card:#141B1E;
  --surface-sunken:#0F1517;
  --surface-inverse:var(--paper-50);
  --surface-raised:#1A2225;
  --surface-ledger:#121A1C;
  --surface-ledger-alt:#161F21;
  --surface-overlay:rgba(4,7,8,.62);
  --text-strong:#F2F5F4;
  --text-body:#E2E8E7;
  --text-muted:#A8B5B8;
  --text-faint:#849498;
  --text-inverse:var(--ink-900);
  --text-inverse-muted:var(--ink-700);
  --text-link:#E9917C;
  --text-link-hover:#F3AC99;
  --border-hairline:#25302F;
  --border-strong:#374442;
  --border-ledger:#26302F;
  --border-inverse:var(--ink-200);
  --focus-ring:#8FB4CD;
  --action-primary-bg:var(--paper-50);
  --action-primary-bg-hover:#FFFFFF;
  --action-primary-bg-active:var(--paper-200);
  --action-primary-fg:var(--ink-900);
  --action-secondary-fg:#E2E8E7;
  --action-secondary-border:#3A4746;
  --action-secondary-bg-hover:#1C2427;
  --action-seal-bg:#B94334;
  --action-seal-bg-hover:#CD5343;
  --action-disabled-bg:#1E2629;
  --action-disabled-fg:#5D6A6D;
  --status-active-fg:#79C9A3;--status-active-bg:#10241C;--status-active-border:#2E6D51;
  --status-hold-fg:#E3B463;--status-hold-bg:#251A08;--status-hold-border:#7A5312;
  --status-risk-fg:#EFC078;--status-risk-bg:#1F1707;--status-risk-border:#9A6A18;
  --status-expired-fg:#93A1A6;--status-expired-bg:#1A2225;--status-expired-border:#374442;
  --status-error-fg:#EE8E96;--status-error-bg:#2A0F14;--status-error-border:#A03744;
  --status-vouched-fg:#EDA593;--status-vouched-bg:#2A130E;--status-vouched-border:#B94334;
  --agent-fg:#9CC0D8;--agent-bg:#111C23;--agent-border:#28414F;
  --human-fg:#E2E8E7;--human-bg:#1C2427;--human-border:#3A4746;
  --money-in:#79C9A3;--money-out:#E2E8E7;--money-held:#E3B463;
  --seal-mark:#C9563F;--seal-mark-quiet:#8B4235;
  --skeleton:#1E2629;--skeleton-sheen:#262F32;
}

/* --- tokens/typography.css --- */
/* Type: Newsreader (marketing display + editorial serif) · IBM Plex Sans (product UI)
   · IBM Plex Mono (money, IDs, timestamps, ledger). Contributor mobile PWA uses
   --font-ui-mobile so no webfont bytes are paid for on metered data.        */
:root{
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-ui-mobile:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* display — marketing only */
  --text-display-1:clamp(44px,6.2vw,78px);
  --text-display-2:clamp(34px,4.4vw,54px);
  --text-display-3:28px;
  --lh-display:1.04; /* @kind other */
  --ls-display:-0.018em; /* @kind other */
  /* product headings */
  --text-h1:30px;--text-h2:23px;--text-h3:19px;--text-h4:16px;
  --lh-heading:1.24; /* @kind other */ --ls-heading:-0.008em; /* @kind other */
  /* body */
  --text-lg:18px;--text-md:15px;--text-sm:13.5px;--text-xs:12px;--text-2xs:11px;
  --lh-body:1.55; /* @kind other */ --lh-tight:1.35; /* @kind other */
  /* numeric / record */
  --text-num-hero:34px;--text-num:15px;--text-num-sm:12.5px;
  --ls-record:0.02em; /* @kind other */   /* IDs, timestamps */
  --ls-eyebrow:0.14em; /* @kind other */  /* small caps eyebrows */
  /* weights */
  --fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-semibold:600; /* @kind other */ --fw-bold:700; /* @kind other */
}

/* --- tokens/spacing.css --- */
/* 4px rhythm with deliberate half-steps at small sizes (dense ledger rows). */
:root{
  --sp-0:0; /* @kind spacing */--sp-half:2px;--sp-1:4px;--sp-1h:6px;--sp-2:8px;--sp-2h:10px;--sp-3:12px;--sp-4:16px;
  --sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;--sp-13:128px;
  --gutter-mobile:16px;--gutter-desktop:32px;
  --page-max:1200px;--prose-max:68ch;
  --row-h-ledger:38px;--row-h-list:56px;
  --tap-min:44px;         /* contributor thumb target floor */
  --tabbar-h:58px;--topbar-h:56px;--sidenav-w:236px;
}

/* --- tokens/radii.css --- */
/* Documents, not pills. Small radii; the only fully round things are seals and avatars. */
:root{
  --r-xs:3px;--r-sm:5px;--r-md:8px;--r-lg:12px;--r-xl:18px;--r-round:999px;
  --r-card:10px;--r-field:6px;--r-button:6px;--r-sheet:16px;--r-badge-card:14px;
  --border-w:1px; /* @kind other */ --border-w-strong:1.5px; /* @kind other */ --rule-w:2px; /* @kind other */
}

/* --- tokens/elevation.css --- */
/* Paper-flat. Hairlines do the work; shadows only lift things that truly float. */
:root{
  --shadow-0:none;
  --shadow-1:0 1px 1px rgba(16,22,24,.05);
  --shadow-2:0 1px 2px rgba(16,22,24,.06),0 2px 6px -2px rgba(16,22,24,.07);
  --shadow-3:0 2px 4px rgba(16,22,24,.06),0 12px 24px -8px rgba(16,22,24,.14);
  --shadow-sheet:0 -2px 12px rgba(16,22,24,.10);
  --shadow-inset-field:inset 0 1px 0 rgba(16,22,24,.04);
  --shadow-seal:0 1px 0 rgba(110,34,22,.18);
  --ring-focus:0 0 0 2px var(--surface-card),0 0 0 4px var(--focus-ring);
}
:root[data-theme="dark"]{
  --shadow-1:0 1px 1px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-3:0 2px 4px rgba(0,0,0,.5),0 14px 28px -10px rgba(0,0,0,.65);
  --shadow-sheet:0 -2px 14px rgba(0,0,0,.55);
  --shadow-inset-field:inset 0 1px 0 rgba(255,255,255,.03);
}

/* --- tokens/motion.css --- */
/* Motion is clerical: things appear, stamp, or tick. Nothing bounces, nothing celebrates
   except the Badge stamp (one 240ms settle). Respect reduced-motion everywhere. */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:280ms; /* @kind other */
  --dur-stamp:240ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,.6,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,1,.6); /* @kind other */
  --ease-stamp:cubic-bezier(.2,1.1,.3,1); /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
  --dur-instant:0ms; /* @kind other */
  --dur-fast:0ms; /* @kind other */
  --dur-base:0ms; /* @kind other */
  --dur-slow:0ms; /* @kind other */
  --dur-stamp:0ms; /* @kind other */
}}
@keyframes spondea-stamp{0%{transform:scale(1.16) rotate(-3deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes spondea-sheen{0%{background-position:-160px 0}100%{background-position:220px 0}}
@keyframes spondea-tick{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes spondea-thinking{0%,80%,100%{opacity:.25}40%{opacity:1}}