/* The Knowledge Engineers — design tokens
   Light theme is default; dark variant via [data-theme="dark"] or prefers-color-scheme. */

:root {
  /* Colour — surfaces */
  --tke-paper:        #FBFAF7;
  --tke-paper-2:      #F3F1EB;
  --tke-paper-3:      #ECE9E1;
  /* Colour — ink */
  --tke-ink:          #16191E;
  --tke-ink-2:        #3B4048;
  --tke-ink-3:        #6B7079;
  /* Colour — rules */
  --tke-rule:         #D8D4CB;
  --tke-rule-2:       #E8E5DE;
  /* Colour — accent (links, active states, marks) */
  --tke-accent:       #1F4E79;
  --tke-accent-ink:   #163A5B;
  --tke-accent-tint:  #E6EDF4;
  /* Colour — confidence states (fg / bg) */
  --tke-verified:         #2E6B4E;
  --tke-verified-bg:      #E4EFE8;
  --tke-directional:      #8A5A0B;
  --tke-directional-bg:   #F5ECD6;
  --tke-single:           #4C5566;
  --tke-single-bg:        #E7E9EE;

  /* Type — families */
  --tke-font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --tke-font-sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --tke-font-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  /* Type — scale (px) */
  --tke-text-display: 56px;
  --tke-text-h1:      40px;
  --tke-text-h2:      28px;
  --tke-text-h3:      22px;
  --tke-text-h4:      18px;
  --tke-text-lead:    20px;
  --tke-text-body:    17px;
  --tke-text-data:    16px;
  --tke-text-small:   14px;
  --tke-text-meta:    13px;
  --tke-text-mono:    13.5px;
  /* Type — leading */
  --tke-leading-tight: 1.1;
  --tke-leading-head:  1.2;
  --tke-leading-body:  1.6;
  --tke-leading-data:  1.55;
  /* Type — features */
  --tke-tnum: "tnum" 1, "lnum" 1;   /* apply in every data context */

  /* Spacing (4px base) */
  --tke-space-1:  4px;
  --tke-space-2:  8px;
  --tke-space-3:  12px;
  --tke-space-4:  16px;
  --tke-space-5:  24px;
  --tke-space-6:  32px;
  --tke-space-7:  48px;
  --tke-space-8:  64px;
  --tke-space-9:  96px;

  /* Measure */
  --tke-measure-body: 68ch;
  --tke-measure-data: 74ch;

  /* Radius — deliberately small; print-adjacent */
  --tke-radius-0: 0px;
  --tke-radius-1: 2px;
  --tke-radius-2: 4px;

  /* Shadow — used only for sticky/overlay surfaces */
  --tke-shadow-1: 0 1px 0 rgba(22,25,30,0.08);
  --tke-shadow-2: 0 2px 8px rgba(22,25,30,0.10), 0 1px 0 rgba(22,25,30,0.06);

  /* Rules */
  --tke-hairline: 1px solid var(--tke-rule);
  --tke-double:   3px double var(--tke-ink);
}

[data-theme="dark"] {
  --tke-paper:        #15171B;
  --tke-paper-2:      #1D2026;
  --tke-paper-3:      #262A31;
  --tke-ink:          #ECE9E2;
  --tke-ink-2:        #C4C1BA;
  --tke-ink-3:        #8D8A84;
  --tke-rule:         #33373F;
  --tke-rule-2:       #262A31;
  --tke-accent:       #8FB4D9;
  --tke-accent-ink:   #B7D1EA;
  --tke-accent-tint:  #1C2A3A;
  --tke-verified:         #8BC7A6;
  --tke-verified-bg:      #1E3A2C;
  --tke-directional:      #E0B45C;
  --tke-directional-bg:   #3E2F12;
  --tke-single:           #A7B0C2;
  --tke-single-bg:        #2A2F3A;
  --tke-shadow-1: 0 1px 0 rgba(0,0,0,0.5);
  --tke-shadow-2: 0 2px 8px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}