/* ============================================================
   Knoty Network — Design Tokens
   The single source of truth. Change values here, not in components.
   ============================================================ */

:root {
  /* ---------- Colour: ground ---------- */
  --sand:        #f3ecdd;   /* page background */
  --sand-2:      #ece2cf;   /* raised band / sidebar */
  --cream:       #faf6ec;   /* card + panel surface */
  --paper:       #fdfcf8;   /* documents, receipts */

  /* ---------- Colour: ink ---------- */
  --ink:         #12303f;   /* primary text, dark fills */
  --ink-70:      rgba(18, 48, 63, 0.74);
  --ink-45:      rgba(18, 48, 63, 0.48);
  --ink-30:      rgba(18, 48, 63, 0.32);

  /* ---------- Colour: line ---------- */
  --line:        rgba(18, 48, 63, 0.15);
  --line-2:      rgba(18, 48, 63, 0.26);

  /* ---------- Colour: accent ---------- */
  --papaya:      #d9603a;   /* attention, in-progress, the human mark */
  --papaya-deep: #c14f2d;
  --sea:         #2a7f9e;   /* positive, links, data */
  --sea-deep:    #1c6180;
  --lagoon:      #2c757c;   /* brand mark — logo, figures, tags. Sea with green in it */
  --lagoon-deep: #1d5a61;
  --moss:        #4f6b4a;   /* conditional only: healthy / resolved / paid marks.
                               Never a button, band, background, heading or body text */
  --sky:         #d7e9ef;   /* tint for selected + user bubbles */

  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-brush:   "Kalam", cursive;

  --text-xs:   0.625rem;   /* 10px — mono labels */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md:   1.0625rem;  /* 17px — lede */
  --text-lg:   1.35rem;    /* 22px — card titles */
  --text-xl:   clamp(1.6rem, 3vw, 2.2rem);
  --text-2xl:  clamp(2rem, 4vw, 2.9rem);
  --text-3xl:  clamp(2.6rem, 5.6vw, 4.7rem);   /* hero */

  --tracking-tight: -0.03em;
  --tracking-mono:   0.16em;

  /* ---------- Space (4px scale) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---------- Radius ---------- */
  --r-chip:  8px;    /* tags, citations, small chips */
  --r-btn:   10px;   /* buttons, inputs, toggles */
  --r-card:  16px;   /* cards, menus, panels */
  --r-pill:  999px;  /* pills, meters — use sparingly */

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 2px 8px -4px rgba(18, 48, 63, 0.25);
  --shadow-md: 0 18px 36px -30px rgba(18, 48, 63, 0.5);
  --shadow-lg: 0 28px 54px -30px rgba(18, 48, 63, 0.6);

  /* ---------- Motion ---------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* the house curve */
  --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.18s;
  --dur-base:  0.28s;
  --dur-slow:  0.55s;
  --stagger:   16ms;   /* per-item delay in list reveals */

  /* ---------- Layout ---------- */
  --pad:  clamp(1rem, 3vw, 2.4rem);
  --max:  1180px;
  --sidebar: 232px;
  --header-h: 60px;

  /* ---------- Z-index ---------- */
  --z-header: 55;
  --z-menu:   60;
  --z-toast:  80;
  --z-pop:    90;
  --z-modal:  95;
}

/* Dark surfaces (rare — only where the photo is the ground) */
.on-photo {
  --ink:    #f6f2e9;
  --ink-70: rgba(246, 242, 233, 0.78);
  --ink-45: rgba(246, 242, 233, 0.55);
  --ink-30: rgba(246, 242, 233, 0.35);
  --line:   rgba(246, 242, 233, 0.18);
  --line-2: rgba(246, 242, 233, 0.32);
}