/* JSON Mill brand tokens. Load after bootstrap.css.
   Light is the default; dark follows [data-bs-theme="dark"] (Bootstrap 5.3). */

:root {
  /* brand constants (same in both themes) */
  --jm-ink: #111820;
  --jm-ink-2: #1A222C;
  --jm-amber: #F2B33D;          /* only on ink backgrounds */
  --jm-amber-deep: #C98A12; /* amber for light backgrounds */
  --jm-paper: #FBFAF7;

  /* fonts */
  --jm-font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jm-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* shape */
  --jm-radius: 6px;
  --jm-radius-lg: 10px;

  /* light theme semantic tokens */
  --jm-bg: #FBFAF7;
  --jm-bg-2: #F3F1EB;
  --jm-pane: #FFFFFF;
  --jm-line: #E4E1DA;
  --jm-text: #1D232B;
  --jm-muted: #5B6470;
  --jm-primary: #0B6E69;
  --jm-primary-hover: #085A56;
  --jm-primary-tint: #E3F3F1;
  --jm-on-primary: #ffffff;
  --jm-success: #1E7B4D;
  --jm-warning: #9A6A00;
  --jm-danger: #B42318;
  --jm-info: #1F5FB8;

  /* JSON syntax tokens */
  --jm-tok-key: #7A3E9D;
  --jm-tok-string: #0B6E3A;
  --jm-tok-number: #B4441B;
  --jm-tok-boolean: #1F5FB8;
  --jm-tok-null: #6B6F76;
  --jm-tok-error: #B42318;

  /* Bootstrap 5.3 mapping */
  --bs-body-font-family: var(--jm-font-sans);
  --bs-font-monospace: var(--jm-font-mono);
  --bs-body-bg: var(--jm-bg);
  --bs-body-color: var(--jm-text);
  --bs-secondary-color: var(--jm-muted);
  --bs-secondary-rgb: 91, 100, 112; /* --jm-muted, so .link-secondary passes AA (5.75:1) */
  --bs-tertiary-bg: var(--jm-bg-2);
  --bs-border-color: var(--jm-line);
  --bs-border-radius: var(--jm-radius);
  --bs-border-radius-lg: var(--jm-radius-lg);
  --bs-primary: var(--jm-primary);
  --bs-primary-rgb: 11, 110, 105;
  --bs-link-color: var(--jm-primary);
  --bs-link-color-rgb: 11, 110, 105;
  --bs-link-hover-color: var(--jm-primary-hover);
  --bs-link-hover-color-rgb: 8, 90, 86;
  --bs-success: var(--jm-success);
  --bs-warning: var(--jm-warning);
  --bs-danger: var(--jm-danger);
  --bs-info: var(--jm-info);
  --bs-focus-ring-color: rgba(11, 110, 105, .25);
}

[data-bs-theme="dark"] {
  --jm-bg: #14181F;
  --jm-bg-2: #1A222C;
  --jm-pane: #1A2029;
  --jm-line: #2A3340;
  --jm-text: #E6E9EE;
  --jm-muted: #9AA3AE;
  --jm-primary: #3CC2B4;
  --jm-primary-hover: #5ED3C6;
  --jm-primary-tint: rgba(60, 194, 180, .14);
  --jm-on-primary: #111820;
  --jm-success: #6CCB94;
  --jm-warning: #F2B33D;
  --jm-danger: #FF8A80;
  --jm-info: #82B4FF;

  --jm-tok-key: #C9A3F0;
  --jm-tok-string: #7FD49B;
  --jm-tok-number: #F5A472;
  --jm-tok-boolean: #82B4FF;
  --jm-tok-null: #9AA3AE;
  --jm-tok-error: #FF8A80;

  --bs-body-bg: var(--jm-bg);
  --bs-body-color: var(--jm-text);
  --bs-secondary-color: var(--jm-muted);
  --bs-secondary-rgb: 154, 163, 174; /* --jm-muted, 6.97:1 on --jm-bg */
  --bs-tertiary-bg: var(--jm-bg-2);
  --bs-border-color: var(--jm-line);
  --bs-primary: var(--jm-primary);
  --bs-primary-rgb: 60, 194, 180;
  --bs-link-color: var(--jm-primary);
  --bs-link-color-rgb: 60, 194, 180;
  --bs-link-hover-color: var(--jm-primary-hover);
  --bs-link-hover-color-rgb: 94, 211, 198;
  --bs-focus-ring-color: rgba(60, 194, 180, .3);
}

/* Primary button in both themes */
.btn-primary {
  --bs-btn-bg: var(--jm-primary);
  --bs-btn-border-color: var(--jm-primary);
  --bs-btn-color: var(--jm-on-primary);
  --bs-btn-hover-bg: var(--jm-primary-hover);
  --bs-btn-hover-border-color: var(--jm-primary-hover);
  --bs-btn-hover-color: var(--jm-on-primary);
  --bs-btn-active-bg: var(--jm-primary-hover);
  --bs-btn-active-border-color: var(--jm-primary-hover);
  --bs-btn-active-color: var(--jm-on-primary);
  --bs-btn-disabled-bg: var(--jm-primary);
  --bs-btn-disabled-border-color: var(--jm-primary);
  --bs-btn-disabled-color: var(--jm-on-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--jm-primary);
  --bs-btn-border-color: var(--jm-primary);
  --bs-btn-hover-bg: var(--jm-primary);
  --bs-btn-hover-border-color: var(--jm-primary);
  --bs-btn-hover-color: var(--jm-on-primary);
  --bs-btn-active-bg: var(--jm-primary);
  --bs-btn-active-color: var(--jm-on-primary);
}

/* App header: ink in both themes, amber accent */
.jm-header {
  background: var(--jm-ink);
  color: #fff;
  --bs-navbar-color: rgba(255, 255, 255, .85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}
.jm-header .jm-unsaved { color: var(--jm-amber); }

/* Mono accents: paths, counts, type chips, kbd */
.jm-mono, .jm-path, .jm-count, kbd { font-family: var(--jm-font-mono); }
kbd {
  font-size: .75em; padding: .1em .4em; border-radius: 4px;
  background: var(--jm-bg-2); color: var(--jm-text); border: 1px solid var(--jm-line); box-shadow: none;
}

/* Type glyph chips: {} [] abc 123 t/f null */
.jm-type {
  display: inline-block; font-family: var(--jm-font-mono); font-size: 10px; line-height: 1;
  padding: 3px 5px; border-radius: 4px; vertical-align: middle;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.jm-type-object, .jm-type-array { color: var(--jm-tok-key); }
.jm-type-string  { color: var(--jm-tok-string); }
.jm-type-number  { color: var(--jm-tok-number); }
.jm-type-boolean { color: var(--jm-tok-boolean); }
.jm-type-null    { color: var(--jm-tok-null); }

/* Syntax classes (use for tree/code views; CodeMirror theme can read the same vars) */
.tok-key { color: var(--jm-tok-key); }
.tok-string { color: var(--jm-tok-string); }
.tok-number { color: var(--jm-tok-number); }
.tok-boolean { color: var(--jm-tok-boolean); }
.tok-null { color: var(--jm-tok-null); }
.tok-error { color: var(--jm-tok-error); }