/* ============================================================
   PROTOCOLICS — design tokens & base
   Warm-clinical: The Ordinary × Anthropic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- LIGHT (default) ---------- */
:root {
  /* warm paper / ink */
  --paper:      #F4F0E9;   /* page background — warm cream */
  --surface:    #FBF8F3;   /* cards / panels */
  --surface-2:  #EFEAE1;   /* sunken / table stripes */
  --ink:        #1E1A15;   /* primary text — warm near-black */
  --ink-2:      #5C5347;   /* secondary text */
  --ink-3:      #8C8275;   /* tertiary / captions */
  --hairline:   #E2DACB;   /* borders */
  --hairline-2: #D2C8B6;   /* stronger borders */

  /* accents (low chroma, shared tone) */
  --clay:       #8C4A6B;   /* primary — plum / berry */
  --clay-soft:  #E6CAD8;   /* plum tint fill */
  --clay-wash:  #F3E6ED;   /* faint plum wash */
  --sage:       #5E7A5A;   /* verified / confident */
  --sage-soft:  #D5DDCB;
  --ochre:      #B08431;   /* needs review / low confidence */
  --ochre-soft: #EBDDBE;

  --shadow:     0 1px 2px rgba(40,30,18,.04), 0 8px 24px -12px rgba(40,30,18,.16);
  --shadow-sm:  0 1px 2px rgba(40,30,18,.06);

  --r-xs: 4px; --r-sm: 7px; --r-md: 11px; --r-lg: 16px; --r-xl: 22px;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- DARK ---------- */
:root[data-theme="dark"] {
  --paper:      #15120E;
  --surface:    #1E1A15;
  --surface-2:  #272118;
  --ink:        #F1EADD;
  --ink-2:      #B3A998;
  --ink-3:      #847A6A;
  --hairline:   #322B22;
  --hairline-2: #443B2E;

  --clay:       #C98AA6;
  --clay-soft:  #4E2E3D;
  --clay-wash:  #2B1E25;
  --sage:       #8AA585;
  --sage-soft:  #2E3A2B;
  --ochre:      #CFA64A;
  --ochre-soft: #3A2F18;

  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- type primitives ---------- */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1, h2, h3 { font-weight: 500; letter-spacing: -.012em; margin: 0; }

::selection { background: var(--clay-soft); color: var(--ink); }

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

.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--clay); color: #fff; border-color: var(--clay); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}

/* confidence states */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-xs); white-space: nowrap;
}
.tag-ok    { color: var(--sage);  background: var(--sage-soft); }
.tag-review{ color: var(--ochre); background: var(--ochre-soft); }
.tag-clay  { color: var(--clay);  background: var(--clay-wash); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.field {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-wash);
}
.field::placeholder { color: var(--ink-3); }

.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* low-confidence underline for inline data */
.lowconf {
  text-decoration: underline wavy var(--ochre);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.scrollbar-thin::-webkit-scrollbar { width: 9px; height: 9px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 999px; border: 2px solid var(--paper); }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }