/* =============================================================
   IbogaineVault — design tokens
   Clinical archive. Warm-dark, lamplit vellum.
   ============================================================= */

/* -- Fonts (self-hosted brand files) ------------------------- */

/* Fraunces — variable: opsz 9..144, wght 300..500, SOFT 30..100 */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Sans — static weights */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* IBM Plex Mono — static weights */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* -- Base palette (warm-dark) ------------------------------- */
  --bg:            #1a1814;   /* near-black, warm undertone */
  --bg-deep:       #120f0c;   /* nested surface */
  --bg-raised:     #201d18;   /* subtle lift for hover / pane tab */
  --paper:         #e8e2d1;   /* primary text on dark */
  --paper-dim:     #b8b2a1;   /* secondary text */
  --paper-ghost:   #5a554a;   /* borders, dividers */
  --paper-faint:   #3a362e;   /* very subtle dividers */
  --brass:         #c9a96e;   /* accent, links, active, stats */
  --brass-dim:     #8a7548;   /* pressed, visited */

  /* -- Earth-green neutrals (lamplit botanical, not sage-retreat) --- */
  --moss-deep:     #2a2f22;   /* deep shadow, alt nested surface */
  --moss:          #3d4635;   /* raised alt, quiet card */
  --sage-dim:      #5b6a4a;   /* borders in verdant contexts */
  --sage:          #8a9670;   /* secondary accent, optional */

  /* -- Six co-equal category hues ----------------------------- */
  --red:    #DB3A3A;  /* Cardiac safety */
  --green:  #3AAE6A;  /* Clinical protocols */
  --orange: #EA8A2B;  /* Mechanisms, PK/PD */
  --blue:   #4081CC;  /* Outcomes, efficacy */
  --purple: #8A4AB5;  /* Phenomenology */
  --white:  #E8DFCF;  /* Historical, policy */

  /* Low-alpha tints for badge/fill surfaces */
  --red-tint:    rgba(219,58,58,0.14);
  --green-tint:  rgba(58,174,106,0.14);
  --orange-tint: rgba(234,138,43,0.14);
  --blue-tint:   rgba(64,129,204,0.16);
  --purple-tint: rgba(138,74,181,0.18);
  --white-tint:  rgba(232,223,207,0.10);

  /* -- Type stacks (brand-file-only; generic fallback for FOUT safety) */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Fraunces", Georgia, serif;
  --font-ui:      "IBM Plex Sans", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* -- Type scale (roles) ------------------------------------- */
  --fs-display:   clamp(44px, 6vw, 96px);   /* hero stat / slide title */
  --fs-h1:        clamp(32px, 3.8vw, 56px); /* page title */
  --fs-h2:        clamp(24px, 2.6vw, 36px); /* section */
  --fs-h3:        20px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-meta:      13px;
  --fs-micro:     10.88px;                  /* 0.68rem — mono labels */

  /* -- Line heights ------------------------------------------- */
  --lh-tight:   1.08;
  --lh-display: 1.05;
  --lh-body:    1.6;
  --lh-ui:      1.3;

  /* -- Tracking ----------------------------------------------- */
  --tr-display:   -0.015em;
  --tr-body:       0;
  --tr-ui:         0;
  --tr-caps:       0.08em;
  --tr-mono-caps:  0.14em;

  /* -- Measure ------------------------------------------------ */
  --measure-prose: 72ch;
  --measure-wide:  96ch;

  /* -- Spacing (4-pt base) ------------------------------------ */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   72px;
  --sp-9:   104px;
  --sp-10:  152px;

  /* -- Borders ------------------------------------------------ */
  --border-hair:   1px solid var(--paper-ghost);
  --border-faint:  1px solid var(--paper-faint);
  --border-brass:  1px solid var(--brass-dim);

  /* -- Radii (rectilinear archive) ---------------------------- */
  --radius-0:  0;
  --radius-1:  2px;     /* buttons, chips */
  --radius-pill: 9999px; /* category dots only */

  /* -- Transitions (sparse, slow) ----------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 140ms;
  --t:      240ms;
  --t-slow: 400ms;

  /* -- Elevation (almost none) -------------------------------- */
  --hair-below: 0 1px 0 0 rgba(0,0,0,0.4);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brass);

  /* -- Layout rails ------------------------------------------- */
  --sidebar-w:     280px;
  --metarail-w:    240px;
  --header-h:      56px;
}

/* =============================================================
   Base + semantic roles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "ss02", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Prose + headings */
.h-display, h1.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 400;
  color: var(--paper);
}

h1, .h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 50, "wght" 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 var(--sp-5) 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 50, "wght" 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--paper);
  margin: 0 0 var(--sp-4) 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36, "SOFT" 60, "wght" 500;
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 var(--sp-3) 0;
}

em, .emphasis {
  font-style: italic;
  color: var(--paper);
}
strong { font-weight: 500; }

p, .p {
  max-width: var(--measure-prose);
  margin: 0 0 var(--sp-4) 0;
  color: var(--paper);
  text-wrap: pretty;
}

.p-dim { color: var(--paper-dim); }

/* Links */
a, .a {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t) var(--ease-out);
}
a:hover, .a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--brass-dim); }

/* UI labels — mono, uppercase, letter-spaced */
.label-mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono-caps);
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 400;
}
.label-ui {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--paper-dim);
}
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.03em;
  color: var(--paper-dim);
}

/* Pull quote */
.pullquote {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 80, "wght" 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  font-style: italic;
  color: var(--paper);
  max-width: 48ch;
  margin: 0;
}
.pullquote-attr {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  margin-top: var(--sp-4);
}
.pullquote-attr::before {
  content: "— ";
  color: var(--brass);
}

/* Code / mono */
code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--paper);
  background: var(--bg-deep);
  padding: 1px 5px;
  border-radius: var(--radius-1);
  border: 1px solid var(--paper-faint);
}

/* Selection */
::selection {
  background: var(--brass);
  color: var(--bg);
}

/* =============================================================
   Category helpers
   ============================================================= */

.cat-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.cat-red    { background: var(--red); }
.cat-green  { background: var(--green); }
.cat-orange { background: var(--orange); }
.cat-blue   { background: var(--blue); }
.cat-purple { background: var(--purple); }
.cat-white  { background: var(--white); }

.cat-border-red    { border-top: 2px solid var(--red); }
.cat-border-green  { border-top: 2px solid var(--green); }
.cat-border-orange { border-top: 2px solid var(--orange); }
.cat-border-blue   { border-top: 2px solid var(--blue); }
.cat-border-purple { border-top: 2px solid var(--purple); }
.cat-border-white  { border-top: 2px solid var(--white); }

.cite {
  font-family: var(--font-mono);
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 1px;
}
.cite-red    { color: var(--red); }
.cite-green  { color: var(--green); }
.cite-orange { color: var(--orange); }
.cite-blue   { color: var(--blue); }
.cite-purple { color: var(--purple); }
.cite-white  { color: var(--white); }

/* =============================================================
   Components
   ============================================================= */

.card {
  background: var(--bg);
  border: 1px solid var(--paper-ghost);
  border-top-width: 2px;
  padding: var(--sp-5);
  border-radius: 0;
  transition: background var(--t) var(--ease-out);
}
.card:hover { background: var(--bg-raised); }

.btn {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--brass-dim);
  padding: 10px 18px;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: background var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.btn:hover { background: var(--brass); color: var(--bg); border-color: var(--brass); }
.btn:active { background: var(--brass-dim); transform: translateY(1px); }

.btn-ghost {
  border-color: var(--paper-ghost);
  color: var(--paper-dim);
}
.btn-ghost:hover { color: var(--paper); background: var(--bg-raised); border-color: var(--paper-dim); }

.input {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--paper);
  background: var(--bg-deep);
  border: 1px solid var(--paper-ghost);
  padding: 10px 14px;
  border-radius: var(--radius-1);
  width: 100%;
}
.input::placeholder { color: var(--paper-ghost); }
.input:focus { outline: none; border-color: var(--brass); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Obsidian-style pane */
.pane {
  background: var(--bg);
  border: 1px solid var(--paper-ghost);
  border-radius: 0;
  position: relative;
}
.pane-tab {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--bg-raised);
  border: 1px solid var(--paper-ghost);
  border-bottom: 1px solid var(--bg-raised);
  padding: 6px 12px 6px 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  color: var(--paper-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-100%);
}

/* Grain overlay (opt-in) */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("assets/grain.svg");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}