/* ============================================================
   Crypto Trace design tokens · v1.1 (Spoorlight palette, docs/design/brand)
   Fonts: Source Sans 3 (400, 600, 700) · IBM Plex Mono (400, 500)
   ============================================================ */

.cx {
  /* — Type families — */
  --cx-font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --cx-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cx-mono-group-gap: 0.32em;   /* visual gap between 4-char groups; never a real space */

  /* — Neutrals — */
  --cx-paper:          #FFFFFF;  /* page and printed sheet */
  --cx-surface:        #F5F7F7;  /* panels, table header, code wells */
  --cx-surface-2:      #E6EBEC;  /* hover fill, skeletons */
  --cx-text:           #16222A;  /* 16.2:1 on paper */
  --cx-text-muted:     #4A5860;  /*  7.4:1 */
  --cx-text-subtle:    #5A666D;  /*  5.9:1 — lightest text allowed */
  --cx-border:         #C3CCD0;
  --cx-border-strong:  #7D898F;  /* inputs, header rules — 3.6:1 */

  /* — Action (brand petrol, docs/design/brand) — */
  --cx-primary:        #1F4B5E;  /* 9.4:1 on paper */
  --cx-primary-hover:  #173A49;
  --cx-on-primary:     #FFFFFF;
  --cx-link:           #1F4B5E;
  --cx-focus:          #2860C8;  /* 2px outline, 2px offset — 5.8:1 */
  --cx-scrim:          rgba(20, 22, 26, .48);

  /* — Brand accent: the lit node of the logo. Graphics only (4.1:1); --cx-accent-text when amber is text. — */
  --cx-accent:         #B26F12;
  --cx-accent-text:    #8A5208;  /* 6.4:1 on paper, 5.7:1 on accent-bg */
  --cx-accent-bg:      #FBF1E0;

  /* — Node roles (pair: colour + icon + border style) — */
  --cx-role-source:       #23466B;  --cx-role-source-bg:   #E7EDF5;  /* ● filled circle · 1px solid  */
  --cx-role-hop:          #545B65;  --cx-role-hop-bg:      #F2F3F4;  /* ○ hollow circle · 1px dashed */
  --cx-role-deposit:      #1B5C52;  --cx-role-deposit-bg:  #E2EFEB;  /* ■ filled square · 2px solid  */
  --cx-role-endpoint:     #6B3812;  --cx-role-endpoint-bg: #F6ECE2;  /* ◆ diamond       · 3px double */

  /* — Confidence (pair: colour + bar meter + border style) — */
  --cx-conf-high:         #1C5634;  --cx-conf-high-bg:     #E3F0E7;  /* 3 bars · solid  */
  --cx-conf-medium:       #764E00;  --cx-conf-medium-bg:   #FAF0D8;  /* 2 bars · dashed */
  --cx-conf-low:          #545B65;  --cx-conf-low-bg:      #F2F3F4;  /* 1 bar  · dotted */

  /* — Run status (pair: colour + icon + border style) — */
  --cx-status-queued:     #545B65;  --cx-status-queued-bg:     #F2F3F4;  /* clock · 1px dotted */
  --cx-status-running:    #1F4F8A;  --cx-status-running-bg:    #E5EDF7;  /* play  · 1px dashed */
  --cx-status-done:       #1C5634;  --cx-status-done-bg:       #E3F0E7;  /* check · 1px solid  */
  --cx-status-incomplete: #764E00;  --cx-status-incomplete-bg: #FAF0D8;  /* half  · 3px double */
  --cx-status-failed:     #982020;  --cx-status-failed-bg:     #FBE8E6;  /* cross · 2px solid  */

  /* — Callouts — */
  --cx-info:     #1F4F8A;  --cx-info-bg:    #EEF3FA;  /* circle-i  · 1px solid  */
  --cx-warning:  #764E00;  --cx-warning-bg: #FCF5E3;  /* triangle  · 1px dashed */
  --cx-error:    #982020;  --cx-error-bg:   #FCEEEC;  /* octagon-x · 2px solid  */

  /* — Shape — */
  --cx-radius-sm:   3px;    /* badges */
  --cx-radius:      4px;    /* inputs, buttons, callouts */
  --cx-radius-lg:   6px;    /* panels, modal */
  --cx-radius-pill: 999px;  /* role chips */
  --cx-shadow-overlay: 0 8px 28px rgba(20, 22, 26, .18), 0 1px 3px rgba(20, 22, 26, .12);

  /* — Spacing scale — */
  --cx-space-1: 4px;   --cx-space-2: 8px;   --cx-space-3: 12px;  --cx-space-4: 16px;
  --cx-space-5: 24px;  --cx-space-6: 32px;  --cx-space-7: 48px;  --cx-space-8: 64px;

  /* — Density: comfortable (web cabinet, default) — */
  --cx-text-h1:    30px;   /* line-height 38 */
  --cx-text-h2:    21px;   /* 28 */
  --cx-text-h3:    17px;   /* 24 */
  --cx-text-body:  16px;   /* 24 */
  --cx-text-small: 14px;   /* 20 */
  --cx-text-meta:  13px;   /* 18 */
  --cx-text-data:  14px;   /* mono */
  --cx-line:       1.5;
  --cx-control-h:  44px;   /* buttons, inputs, selects — touch target */
  --cx-row-h:      48px;   /* table rows */
  --cx-cell-px:    14px;
  --cx-gap:        16px;
  --cx-chip-h:     26px;

  font-family: var(--cx-font-sans);
  font-size: var(--cx-text-body);
  line-height: var(--cx-line);
  color: var(--cx-text);
  background: var(--cx-paper);
}

/* — Density: compact (A4 report) — 12px is the print floor (9pt) — */
.cx[data-density="compact"] {
  --cx-text-h1:    22px;
  --cx-text-h2:    16px;
  --cx-text-h3:    14px;
  --cx-text-body:  14px;
  --cx-text-small: 12.5px;
  --cx-text-meta:  12px;
  --cx-text-data:  12px;
  --cx-line:       1.4;
  --cx-control-h:  32px;
  --cx-row-h:      30px;
  --cx-cell-px:    8px;
  --cx-gap:        10px;
  --cx-chip-h:     20px;
}

/* — Dark theme: web cabinet only. Never applied in print. — */
.cx[data-theme="dark"] {
  --cx-paper:          #111A1F;
  --cx-surface:        #18242B;
  --cx-surface-2:      #22313A;
  --cx-text:           #E6ECEE;
  --cx-text-muted:     #A7B4BA;
  --cx-text-subtle:    #8E9CA3;
  --cx-border:         #34434B;
  --cx-border-strong:  #6C7A80;
  --cx-primary:        #8EC0D3;
  --cx-primary-hover:  #A9D0DE;
  --cx-on-primary:     #0E1A20;
  --cx-link:           #8EC0D3;
  --cx-focus:          #7FB2FF;
  --cx-scrim:          rgba(0, 0, 0, .6);

  --cx-accent:         #E6A94E;
  --cx-accent-text:    #F2C27A;
  --cx-accent-bg:      #2A2216;

  --cx-role-source:       #A3BEDD;  --cx-role-source-bg:   #1E2A38;
  --cx-role-hop:          #B4B9C0;  --cx-role-hop-bg:      #24282D;
  --cx-role-deposit:      #8BC8BA;  --cx-role-deposit-bg:  #182F2A;
  --cx-role-endpoint:     #E2B088;  --cx-role-endpoint-bg: #33251A;

  --cx-conf-high:         #94CFA8;  --cx-conf-high-bg:     #172E21;
  --cx-conf-medium:       #E4BF6E;  --cx-conf-medium-bg:   #33280E;
  --cx-conf-low:          #B4B9C0;  --cx-conf-low-bg:      #24282D;

  --cx-status-queued:     #B4B9C0;  --cx-status-queued-bg:     #24282D;
  --cx-status-running:    #A3BEDD;  --cx-status-running-bg:    #1E2A38;
  --cx-status-done:       #94CFA8;  --cx-status-done-bg:       #172E21;
  --cx-status-incomplete: #E4BF6E;  --cx-status-incomplete-bg: #33280E;
  --cx-status-failed:     #F0A39C;  --cx-status-failed-bg:     #3A1C1A;

  --cx-info:     #A3BEDD;  --cx-info-bg:    #1A2430;
  --cx-warning:  #E4BF6E;  --cx-warning-bg: #2C2410;
  --cx-error:    #F0A39C;  --cx-error-bg:   #331B19;

  --cx-shadow-overlay: 0 8px 28px rgba(0, 0, 0, .5);
}

/* — Shared rules — */
.cx .mono { font-family: var(--cx-font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; }
.cx .num  { font-variant-numeric: tabular-nums lining-nums; }
.cx :focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* The report template renders <div class="cx" data-density="compact"> and never sets data-theme. */
@media print { .cx { color-scheme: light; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }