/* ============================================================================
   MIRA × Discourse Graphs — Design Tokens
   ----------------------------------------------------------------------------
   The shared visual language for the inter-lab exchange mockups.
   Derived from:
     • the canonical Discourse Graph node palette (Roam plugin colour map)
     • the MIRA schema diagram (Question·Claim·Evidence·Study·Protocol·Request)
     • a warm "lab-notebook / editorial" treatment (paper + ink)
   Every mockup imports this file first, then components.css.
   ============================================================================ */

/* ---- Fonts: distinctive, non-generic (per frontend-design guidance) -------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand / chrome ---------------------------------------------------- */
  --ink:          #1c2024;   /* near-black, faintly warm — primary text     */
  --ink-2:        #3a3f47;
  --muted:        #6b7280;   /* secondary text                              */
  --faint:        #6b6f77;   /* tertiary / metadata — Jun 11: AA contrast    */
  --paper:        #faf8f4;   /* warm paper page background                  */
  --surface:      #ffffff;   /* cards / panels                              */
  --surface-2:    #f4f2ec;   /* inset surfaces, code wells                  */
  --line:         #e7e3d8;   /* hairlines on paper                          */
  --line-2:       #ece9e0;
  --shadow-color: 28 32 36;  /* rgb for layered shadows                     */

  /* MIRA brand accent — a deep, confident indigo-ink for primary actions    */
  --brand:        #2f3a8c;
  --brand-press:  #232c6e;
  --brand-tint:   #eceefb;

  /* ---- MIRA / DG node-type palette --------------------------------------- */
  /* each type: --x-ink (solid label/badge/border-strong)                     */
  /*            --x-wash (soft card fill)                                      */
  /*            --x-edge (card border)                                         */
  --question-ink:  #8f6210;  --question-wash: #fbf0d4;  --question-edge: #e7cd8f;
  --claim-ink:     #2c9a61;  --claim-wash:    #ddf2e5;  --claim-edge:    #a6dcbd;
  --evidence-ink:  #d9573f;  --evidence-wash: #fbe0da;  --evidence-edge: #f0b1a3;
  --study-ink:     #3877cf;  --study-wash:    #dbe9fb;  --study-edge:    #a6c6ef;
  --protocol-ink:  #8460c5;  --protocol-wash: #ece2f8;  --protocol-edge: #c9b3ea;
  --request-ink:   #4854bf;  --request-wash:  #e2e3f7;  --request-edge:  #aeb4eb;
  --source-ink:    #137068;  --source-wash:   #d7f0ee;  --source-edge:   #98d9d3;

  /* ---- Status / signal --------------------------------------------------- */
  --ok:      #2c9a61;
  --warn:    #8f6210;
  --danger:  #d9573f;
  --private: #8a8f98;   /* greyed "not shared" nodes                          */

  /* ---- Radii / spacing / motion ------------------------------------------ */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;
  --gap:  16px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* layered, soft shadows (no flat drop shadows) */
  --shadow-1: 0 1px 2px rgba(var(--shadow-color)/.06), 0 2px 6px rgba(var(--shadow-color)/.05);
  --shadow-2: 0 2px 4px rgba(var(--shadow-color)/.06), 0 8px 24px rgba(var(--shadow-color)/.09);
  --shadow-3: 0 8px 16px rgba(var(--shadow-color)/.10), 0 24px 60px rgba(var(--shadow-color)/.14);

  /* fonts */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* ---- Dark surface for in-Obsidian chrome (used by some mockups) ---------- */
.theme-obsidian {
  --paper:     #1e1e22;
  --surface:   #26262b;
  --surface-2: #2d2d33;
  --ink:       #e6e6ea;
  --ink-2:     #c6c6cc;
  --muted:     #9a9aa3;
  --faint:     #6f6f78;
  --line:      #34343b;
  --line-2:    #3c3c44;
  --shadow-color: 0 0 0;
  --brand-tint: #2a2e52;
}

/* ============================================================================
   Base
   ============================================================================ */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 15px;
  /* faint lab-notebook dotted grid */
  background-image: radial-gradient(rgba(var(--shadow-color)/.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0; color: var(--ink); }
h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 600; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 .8em; color: var(--ink-2); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: 12.5px; color: var(--muted); }
code, kbd, .mono { font-family: var(--font-mono); font-size: .86em; }

::selection { background: var(--question-wash); }

/* utility */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
}