// ngx-t-forms — JSON Editor Syntax Highlighting (consumer-opt-in)
//
// The <app-json-editor> component renders its syntax highlights via
// [innerHTML], which Angular's emulated view encapsulation cannot scope.
// To keep the component itself on `ViewEncapsulation.Emulated` (per
// CLAUDE.md §3 and DECISIONS.md D-012), the five `.json-*` classes that
// colour keys, strings, numbers, booleans, and null tokens live here as
// a global partial.
//
// Usage — from the consumer's GLOBAL SCSS entry (e.g. `styles.scss`):
//
//     @use 'ngx-t-forms/styles/json-editor-syntax';
//
// If you do not render <app-json-editor> visually, you can skip this
// import — the editor will still function, but the highlighted text will
// render with the default text colour (no syntax colouring).
//
// Colour palette: VS Code Dark inspired, now driven by the `--lib-forms-code-*`
// tokens defined in `styles/tokens` (Phase 6). The hex fallbacks keep this
// partial self-contained if the consumer loads it without the token sheet.

.json-key     { color: var(--lib-forms-code-key, #9cdcfe); }     // Light Blue (VS Code key)
.json-string  { color: var(--lib-forms-code-string, #ce9178); }  // Orange/Red
.json-number  { color: var(--lib-forms-code-number, #b5cea8); }  // Light Green
.json-boolean { color: var(--lib-forms-code-boolean, #569cd6); } // Dark Blue
.json-null    { color: var(--lib-forms-code-null, #569cd6); }    // Dark Blue

// Field binding pill ({{…}}). Background + radius ONLY — no padding/margin/weight
// so the highlight backdrop stays width-aligned with the plain-text textarea.
.json-token {
  color: var(--lib-forms-code-key, #9cdcfe);
  background: color-mix(in srgb, var(--lib-forms-code-key, #9cdcfe) 20%, transparent);
  border-radius: 3px;
}

// A binding that maps to no real field — flagged so it never fails silently.
.json-token--unknown {
  color: var(--lib-forms-code-error, #f48771);
  background: color-mix(in srgb, var(--lib-forms-code-error, #f48771) 22%, transparent);
  text-decoration: underline wavy currentColor;
  text-underline-offset: 2px;
}