/* Swarm design tokens — the Evidence Bundle world. OKLCH only.
   Light is default (the 9am office); dark is the 8pm lift lobby.
   Materials, not greys: manila board, paper, blue-black ink, pink tape, gold seal.
   Do not add a value here that DESIGN.md does not document. */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* --- brand: gold is the exhibit seal and the primary action, nothing else --- */
  --gold: oklch(78% 0.15 78);
  --gold-ink: oklch(50% 0.13 78);        /* gold as text on paper */
  --gold-hover: oklch(83% 0.15 78);      /* seal under the hand */
  --gold-quiet: oklch(78% 0.15 78 / 0.14);
  --on-gold: oklch(22% 0.015 265);
  --focus: oklch(50% 0.13 78);

  /* --- tape: the barrister's tie. Structural marker, never decoration --- */
  --tape: oklch(66% 0.16 15);
  --tape-quiet: oklch(66% 0.16 15 / 0.12);

  /* --- annotation ink --- */
  --ink-blue: oklch(45% 0.15 265);

  /* --- ground and ink: LIGHT (default) --- */
  --canvas: oklch(91% 0.024 85);         /* manila folder board */
  --surface: oklch(98.5% 0.005 85);      /* the page, sitting on the board */
  --sunken: oklch(86% 0.030 85);         /* divider / tab stock */
  --text: oklch(22% 0.015 265);          /* blue-black ink, never neutral black */
  --body: oklch(30% 0.012 265);
  --muted: oklch(46% 0.010 265);
  --faint: oklch(45% 0.010 265);
  --hairline: oklch(78% 0.020 85);
  --solid-cta: oklch(22% 0.015 265);
  --solid-cta-ink: oklch(98.5% 0.005 85);

  /* --- status: colour is the third signal, after label and mark --- */
  --ok: oklch(45% 0.13 150);
  --attention: oklch(50% 0.13 70);
  --risk: oklch(48% 0.19 25);
  --neutral: var(--muted);

  /* --- depth: paper offset, not blur. Shadow only for what truly floats --- */
  --shadow-panel: 0 18px 44px oklch(22% 0.015 265 / 0.16);
  --shadow-cta: none;

  /* --- type: two faces. Public Sans is civic-document; Courier is the
         transcript. Courier carries evidence because court records are set
         in it — world-native, not a decorative mono. --- */
  --font-ui: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'Courier Prime', Courier, monospace;

  --t-11: 0.6875rem; --t-12: 0.75rem;  --t-13: 0.8125rem; --t-14: 0.875rem;
  --t-16: 1rem;      --t-18: 1.125rem; --t-20: 1.25rem;   --t-24: 1.5rem;
  --t-28: 1.75rem;   --t-32: 2rem;     --t-40: 2.5rem;    --t-48: 3rem;

  /* --- space: 4 8 16 24 32 48 72. Document margins are regular --- */
  --s-0: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px;
  --s-4: 32px; --s-5: 48px; --s-6: 72px;

  /* --- shape: documents have square corners. 2px is the whole vocabulary;
         tabs round their top corners only --- */
  --r-xs: 1px; --r-sm: 2px; --r-md: 3px; --r-tab: 3px 3px 0 0;

  --e: cubic-bezier(0.2, 0, 0, 1);
  --d-state: 100ms; --d-move: 180ms; --d-panel: 280ms;
}

:root[data-theme="dark"] {
  --gold: oklch(82% 0.16 78);
  --gold-ink: oklch(82% 0.16 78);
  --gold-hover: oklch(87% 0.15 78);
  --focus: oklch(82% 0.16 78);
  --tape: oklch(72% 0.15 15);
  --ink-blue: oklch(72% 0.12 265);

  --canvas: oklch(19% 0.020 265);
  --surface: oklch(24% 0.018 265);
  --sunken: oklch(15% 0.020 265);
  --text: oklch(94% 0.008 85);
  --body: oklch(87% 0.008 85);
  --muted: oklch(70% 0.008 265);
  --faint: oklch(68% 0.008 265);
  --hairline: oklch(34% 0.018 265);
  --solid-cta: oklch(94% 0.008 85);
  --solid-cta-ink: oklch(19% 0.020 265);

  --ok: oklch(74% 0.13 150);
  --attention: oklch(79% 0.13 70);
  --risk: oklch(68% 0.17 25);

  --shadow-panel: 0 18px 44px oklch(8% 0.02 265 / 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: var(--t-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; }
h1 { font-size: var(--t-40); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--t-24); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--t-18); font-weight: 700; line-height: 1.3; }
h4 { font-family: var(--font-ui); font-size: var(--t-16); font-weight: 700; color: var(--text); margin: 0; }

/* The bundle's marginal annotation: Courier, uppercase, tracked. */
.sw-label {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sw-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- components --- */

.sw-button {
  font-family: var(--font-ui);
  font-size: var(--t-14);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 var(--s-2);
  min-height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-state) var(--e), border-color var(--d-state) var(--e);
}
.sw-button--primary { background: var(--gold); color: var(--on-gold); }
.sw-button--primary:hover { background: var(--gold-hover); }
.sw-button--solid { background: var(--solid-cta); color: var(--solid-cta-ink); }
.sw-button--secondary { background: transparent; color: var(--text); border-color: var(--hairline); }
.sw-button--secondary:hover { background: var(--sunken); }
.sw-button--ghost { background: transparent; color: var(--muted); font-weight: 400; }
.sw-button--ghost:hover { color: var(--text); }
.sw-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Paper on board: a page is lighter than its folder and carries a hairline.
   No shadow — the tonal step is the depth. */
.sw-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}

/* A panel is the other thing that truly floats — a modal, a command palette. Shadow,
   no border: one edge signal, not two. A hairline plus a 44px blur is the generated-UI
   tell Impeccable flags, and this system already separates surfaces by tone. */
.sw-panel {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
}

/* The exhibit sticker. Small, square, and it carries a reference, never a mood. */
.sw-sticker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--gold);
  color: var(--on-gold);
}
.sw-sticker--tape { background: var(--tape); color: oklch(99% 0 0); }

.sw-chip {
  display: inline-flex; align-items: center; gap: var(--s-0);
  font-size: var(--t-12); font-weight: 600;
  padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--sunken); color: var(--body);
  border: 1px solid var(--hairline);
}
.sw-chip--selected { background: var(--gold-quiet); border-color: var(--gold-ink); color: var(--text); }

/* Status carries a mark and a label; colour is the third channel. */
.sw-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 600; }
.sw-status__mark { font-family: var(--font-mono); font-size: var(--t-12); font-weight: 700; }
.sw-status--ok { color: var(--ok); }
.sw-status--attention { color: var(--attention); }
.sw-status--risk { color: var(--risk); }
.sw-status--neutral { color: var(--muted); }

/* THE SIGNATURE COMPONENT.
   The sentence from the source that caused a work item, set in Courier because
   that is what a transcript is set in, on divider stock, with its exhibit
   reference. It appears wherever an inference is shown. It is how the product
   proves it did not invent anything. No side rule: the tonal step is the edge. */
.sw-exhibit {
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  margin: var(--s-2) 0;
}
.sw-exhibit__quote {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  line-height: 1.75;
  color: var(--text);
  margin: var(--s-1) 0 0;
}
.sw-exhibit__ref {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.sw-empty { text-align: center; padding: var(--s-5) var(--s-3); color: var(--muted); }

.sw-skeleton {
  background: var(--sunken);
  border-radius: var(--r-xs);
  animation: sw-pulse 1.4s ease-in-out infinite;
}
@keyframes sw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

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