/* Parleybox — shared design tokens (style A · Interrogation room, BRIEF §11)
   v1 by LANDING. Pages add their own classes in their own CSS; keep this file small.
   Fonts (load in each page <head>):
   https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Unbounded:wght@400;700&display=swap */

:root {
  /* palette */
  --ink: #08080b;          /* near-black page */
  --ink-2: #0f0f14;        /* raised surface */
  --ink-3: #17171f;        /* inputs, hover */
  --line: #26252e;         /* hairlines */
  --line-2: #3a3844;       /* stronger borders */
  --bone: #ece6d8;         /* main text */
  --bone-2: #b9b3a6;       /* secondary text */
  --bone-3: #7f7a70;       /* muted / meta (AA on --ink for ≥14px) */
  --violet: #9d7bff;       /* lamp, links, OPENED */
  --violet-2: #c4b0ff;     /* link hover */
  --violet-glow: rgba(157, 123, 255, .28);
  --red: #c2343a;          /* refused (the only red) */
  --red-ink: #ff6b6f;      /* red as text on dark */
  --ok: #9d7bff;           /* verified = violet, no green in this style */

  /* type */
  --f-display: "Unbounded", system-ui, sans-serif;   /* 400 + 700 only */
  --f-mono: "Courier Prime", ui-monospace, "Courier New", monospace;
  --fs-xs: .75rem;    /* 12 evidence tags */
  --fs-s: .875rem;    /* 14 meta */
  --fs-m: 1rem;       /* 16 body */
  --fs-l: 1.25rem;    /* 20 */
  --fs-xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-xxl: clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem);
  --lh: 1.5;
  --track-tag: .08em;

  /* spacing (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;

  /* shape + motion */
  --r1: 2px; --r2: 4px;    /* square-ish: evidence tags, not pills */
  --tap: 44px;             /* min target size */
  --t-fast: 150ms; --t: 180ms; --t-slow: 220ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font: var(--fs-m)/var(--lh) var(--f-mono);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--violet); text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--violet-2); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--violet); color: var(--ink); }

/* shared primitives */
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--bone-3); }
.tag {                    /* "evidence tag": small mono label */
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 700 var(--fs-xs)/1 var(--f-mono); letter-spacing: var(--track-tag); text-transform: uppercase;
  color: var(--bone-2); border: 1px solid var(--line-2); border-radius: var(--r1); padding: 5px 8px;
}
.tag--refused { color: var(--red-ink); border-color: var(--red); }
.tag--opened { color: var(--ink); background: var(--violet); border-color: var(--violet); }
.hash { font-family: var(--f-mono); word-break: break-all; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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