/* Custom styling for DxMessaging documentation */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
  /* ----------------------------------------------------------
     Mermaid Theme Colors (Reference Only)
     ----------------------------------------------------------
     These CSS variables are NOT used by Mermaid.js directly.
     Mermaid initialization is handled by mermaid-config.js,
     which defines its own inline color values.

     These variables are retained for:
     - Documentation of the intended color scheme
     - Potential use in custom CSS targeting SVG elements
     - Consistency reference when updating mermaid-config.js
     ---------------------------------------------------------- */

  /* Light theme Mermaid colors */
  --mermaid-primary-bg: #e3f2fd;
  --mermaid-primary-text: #1565c0;
  --mermaid-primary-border: #1976d2;

  --mermaid-success-bg: #e8f5e9;
  --mermaid-success-text: #2e7d32;
  --mermaid-success-border: #388e3c;

  --mermaid-warning-bg: #fff3e0;
  --mermaid-warning-text: #c43e00;
  --mermaid-warning-border: #f57c00;

  --mermaid-danger-bg: #ffebee;
  --mermaid-danger-text: #c62828;
  --mermaid-danger-border: #d32f2f;

  --mermaid-neutral-bg: #eceff1;
  --mermaid-neutral-text: #37474f;
  --mermaid-neutral-border: #607d8b;

  --mermaid-accent-bg: #f3e5f5;
  --mermaid-accent-text: #6a1b9a;
  --mermaid-accent-border: #8e24aa;

  /* ----------------------------------------------------------
     Syntax Highlighting Color Palette (Light Theme)
     ----------------------------------------------------------
     Pygments token classes for C#:
     - .k   = Keywords (public, class, void, return, if, etc.)
     - .kt  = Built-in types (int, string, bool, float, var)
     - .nf  = Function/method definitions
     - .nc  = Class/struct definitions
     - .na  = Attributes ([Serializable], [Test])
     - .nn  = Namespaces
     - .n   = Generic names (method calls, variables, type refs - mixed)
     - .s   = Strings
     - .mi/.mf = Numbers (integer/float)
     - .c1/.cm = Comments (single-line/multi-line)
     - .o   = Operators
     - .p   = Punctuation

     Color Strategy:
     - Keywords: Blue (control flow, modifiers)
     - Types (.kt, .nc): Teal/Cyan (type-related tokens)
     - Functions (.nf): Purple/Magenta (callable things)
     - Attributes: Orange (metadata/decorators)
     - Namespaces: Slate gray (organizational)
     - Generic names (.n): Dark gray (neutral, since mixed content)
     - Strings: Green (literal values)
     - Numbers: Brown/Sienna (numeric literals)
     - Comments: Gray italic (de-emphasized)
     ---------------------------------------------------------- */

  /* Keywords: vibrant blue - stands out for control flow */
  --md-code-hl-keyword-color: #0550ae;

  /* Built-in types: teal - distinct "type" feel
     NOTE: Material theme does NOT map .kt tokens to this variable.
     Material maps .kt (built-in types like int, string, bool) to
     --md-code-hl-keyword-color instead. We define this for reference
     only; actual .kt styling uses direct selectors below. */
  --md-code-hl-builtin-color: #0f766e;

  /* Function definitions: purple/magenta - callable emphasis */
  --md-code-hl-function-color: #8250df;

  /* Strings: green - literal value indication */
  --md-code-hl-string-color: #116329;

  /* Numbers: brown/sienna - numeric literals */
  --md-code-hl-number-color: #953800;

  /* Comments: gray - de-emphasized (darkened for WCAG AA 4.5:1+ contrast) */
  --md-code-hl-comment-color: #5c6570;

  /* Operators: dark slate - structural but not distracting */
  --md-code-hl-operator-color: #24292f;

  /* Punctuation: dark gray - structural */
  --md-code-hl-punctuation-color: #24292f;

  /* Generic names (.n): neutral color (JavaScript adds semantic classes)
     Pygments classifies many tokens as generic .n (Name) tokens.
     The csharp-highlight.js script post-processes code blocks to add
     semantic classes (.n-type, .n-method, .n-param, .n-var) which are
     then styled with distinct colors via direct selectors below. */
  --md-code-hl-name-color: #24292f;

  /* Special tokens (defined via direct selectors below):
     - Attributes (.na): #bc4c00 (orange - metadata)
     - Class defs (.nc): #0f766e (teal - type color, matches .kt)
     - Namespaces (.nn): #57606a (slate - organizational)
     - Semantic .n tokens: see .n-type, .n-method, .n-param, .n-var
  */
}

[data-md-color-scheme="slate"] {
  /* Dark theme Mermaid colors (see :root for usage notes) */
  --mermaid-primary-bg: #1e3a5f;
  --mermaid-primary-text: #90caf9;
  --mermaid-primary-border: #42a5f5;

  --mermaid-success-bg: #1b3d2e;
  --mermaid-success-text: #81c784;
  --mermaid-success-border: #66bb6a;

  --mermaid-warning-bg: #3d2e1a;
  --mermaid-warning-text: #ffb74d;
  --mermaid-warning-border: #ffa726;

  --mermaid-danger-bg: #3d1a1a;
  --mermaid-danger-text: #ef9a9a;
  --mermaid-danger-border: #ef5350;

  --mermaid-neutral-bg: #2d2d2d;
  --mermaid-neutral-text: #b0bec5;
  --mermaid-neutral-border: #546e7a;

  --mermaid-accent-bg: #2d1f3d;
  --mermaid-accent-text: #ce93d8;
  --mermaid-accent-border: #ab47bc;

  /* ----------------------------------------------------------
     Syntax Highlighting Color Palette (Dark/Slate Theme)
     ----------------------------------------------------------
     Same token mapping as light theme, with colors adjusted
     for dark background contrast and readability.
     ---------------------------------------------------------- */

  /* Keywords: bright blue */
  --md-code-hl-keyword-color: #79c0ff;

  /* Built-in types: cyan/teal
     NOTE: Not used by Material for .kt tokens (see :root comment).
     Actual .kt styling uses direct selectors below. */
  --md-code-hl-builtin-color: #5fd4d4;

  /* Function definitions: light purple/lavender */
  --md-code-hl-function-color: #d2a8ff;

  /* Strings: light green */
  --md-code-hl-string-color: #a5d6a7;

  /* Numbers: light orange/peach */
  --md-code-hl-number-color: #ffa657;

  /* Comments: muted gray */
  --md-code-hl-comment-color: #8b949e;

  /* Operators: light gray */
  --md-code-hl-operator-color: #c9d1d9;

  /* Punctuation: light gray */
  --md-code-hl-punctuation-color: #c9d1d9;

  /* Generic names (.n): neutral color (JavaScript adds semantic classes)
     Same as light theme - csharp-highlight.js adds semantic classes. */
  --md-code-hl-name-color: #c9d1d9;
}

/* ============================================
   Code block styling
   ============================================ */
.md-typeset code {
  font-size: 0.85em;
}

/* ============================================
   Pygments Token-Specific Syntax Highlighting
   ============================================
   These selectors target specific Pygments token classes
   that don't have corresponding Material theme CSS variables.
   This provides maximum differentiation for C# code blocks.
   ============================================ */

/* --- Light Theme Token Colors --- */

/* Keywords (.k, .kd, .kn, .kp, .kr) - blue for control flow & modifiers */
.md-typeset .highlight .k {
  color: #0550ae;
}
.md-typeset .highlight .kd {
  color: #0550ae;
}
.md-typeset .highlight .kn {
  color: #0550ae;
}
.md-typeset .highlight .kp {
  color: #0550ae;
}
.md-typeset .highlight .kr {
  color: #0550ae;
}

/* .kt = Built-in types (int, string, bool, float, var, etc.)
   Teal color - Material theme maps .kt to keyword-color, so we
   override with a direct selector to distinguish types from keywords */
.md-typeset .highlight .kt {
  color: #0f766e;
}

/* .na = Attributes (e.g., [Serializable], [Test], [DxTargetedMessage])
   Orange color to make metadata/decorators stand out */
.md-typeset .highlight .na {
  color: #bc4c00;
}

/* .nc = Class/struct definitions at declaration site
   Teal to match built-in types (.kt) - both are "type" concepts */
.md-typeset .highlight .nc {
  color: #0f766e;
}

/* .nn = Namespace names
   Slate gray - organizational/structural, not as prominent */
.md-typeset .highlight .nn {
  color: #57606a;
}

/* Generic names (.n) - base color (will be overridden by semantic classes)
   Pygments classifies many tokens as .n. JavaScript post-processing
   adds semantic classes (.n-type, .n-method, .n-param, .n-var) for
   better differentiation. Fallback to neutral for unclassified tokens. */
.md-typeset .highlight .n {
  color: #24292f;
}

/* Semantic Name Token Colors (added by csharp-highlight.js)
   These classes are dynamically added based on contextual analysis:
   - .n-type: Type names (PascalCase, after keywords, in generic params)
   - .n-method: Method names (followed by ( or <...>()
   - .n-param: Parameter names (after type, before , or = or ))
   - .n-var: Variable names (camelCase, other contexts) */

/* Types: teal - matches .kt (built-in types) and .nc (class definitions) */
.md-typeset .highlight .n.n-type {
  color: #0f766e;
}

/* Methods: purple - matches .nf (function definitions) */
.md-typeset .highlight .n.n-method {
  color: #8250df;
}

/* Parameters: coral/orange - distinct from types, methods, and keywords */
.md-typeset .highlight .n.n-param {
  color: #cf5c36;
}

/* Variables: slate gray - de-emphasized but readable */
.md-typeset .highlight .n.n-var {
  color: #57606a;
}

/* Strings (.s, .s1, .s2) - green for literal values */
.md-typeset .highlight .s {
  color: #116329;
}
.md-typeset .highlight .s1 {
  color: #116329;
}
.md-typeset .highlight .s2 {
  color: #116329;
}

/* Comments (.c, .c1, .cm) - gray italic, de-emphasized */
.md-typeset .highlight .c {
  color: #5c6570;
}
.md-typeset .highlight .c1 {
  color: #5c6570;
}
.md-typeset .highlight .cm {
  color: #5c6570;
}

/* Numbers (.m, .mi, .mf) - brown/sienna for numeric literals */
.md-typeset .highlight .m {
  color: #953800;
}
.md-typeset .highlight .mi {
  color: #953800;
}
.md-typeset .highlight .mf {
  color: #953800;
}

/* Operators (.o) - dark slate, structural */
.md-typeset .highlight .o {
  color: #24292f;
}

/* Punctuation (.p) - dark gray, structural */
.md-typeset .highlight .p {
  color: #24292f;
}

/* --- Dark Theme Token Colors --- */

/* Keywords: bright blue */
[data-md-color-scheme="slate"] .md-typeset .highlight .k {
  color: #79c0ff;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kd {
  color: #79c0ff;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kn {
  color: #79c0ff;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kp {
  color: #79c0ff;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .kr {
  color: #79c0ff;
}

/* Built-in types: cyan/teal - distinct from keywords */
[data-md-color-scheme="slate"] .md-typeset .highlight .kt {
  color: #5fd4d4;
}

/* Attributes: light orange */
[data-md-color-scheme="slate"] .md-typeset .highlight .na {
  color: #f0883e;
}

/* Class definitions: light cyan/teal */
[data-md-color-scheme="slate"] .md-typeset .highlight .nc {
  color: #5fd4d4;
}

/* Namespaces: light blue-gray (distinct from comments which use #8b949e) */
[data-md-color-scheme="slate"] .md-typeset .highlight .nn {
  color: #a8b1ba;
}

/* Generic names: neutral light gray (will be overridden by semantic classes) */
[data-md-color-scheme="slate"] .md-typeset .highlight .n {
  color: #c9d1d9;
}

/* Semantic Name Token Colors for Dark Theme (added by csharp-highlight.js) */

/* Types: light cyan/teal - matches .kt and .nc */
[data-md-color-scheme="slate"] .md-typeset .highlight .n.n-type {
  color: #5fd4d4;
}

/* Methods: lavender - matches .nf (function definitions) */
[data-md-color-scheme="slate"] .md-typeset .highlight .n.n-method {
  color: #d2a8ff;
}

/* Parameters: peach/salmon - distinct from types, methods, and keywords */
[data-md-color-scheme="slate"] .md-typeset .highlight .n.n-param {
  color: #ffb088;
}

/* Variables: light gray - de-emphasized but readable */
[data-md-color-scheme="slate"] .md-typeset .highlight .n.n-var {
  color: #a8b1ba;
}

/* Strings: light green */
[data-md-color-scheme="slate"] .md-typeset .highlight .s {
  color: #a5d6a7;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .s1 {
  color: #a5d6a7;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .s2 {
  color: #a5d6a7;
}

/* Comments: muted gray */
[data-md-color-scheme="slate"] .md-typeset .highlight .c {
  color: #8b949e;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .c1 {
  color: #8b949e;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .cm {
  color: #8b949e;
}

/* Numbers: light orange/peach */
[data-md-color-scheme="slate"] .md-typeset .highlight .m {
  color: #ffa657;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .mi {
  color: #ffa657;
}
[data-md-color-scheme="slate"] .md-typeset .highlight .mf {
  color: #ffa657;
}

/* Operators: light gray */
[data-md-color-scheme="slate"] .md-typeset .highlight .o {
  color: #c9d1d9;
}

/* Punctuation: light gray */
[data-md-color-scheme="slate"] .md-typeset .highlight .p {
  color: #c9d1d9;
}

/* ============================================
   Mermaid diagram container
   ============================================ */
.mermaid {
  text-align: center;
  margin: 1em 0;
}

/* Ensure diagrams are visible in dark mode */
[data-md-color-scheme="slate"] .mermaid {
  background-color: transparent;
}

/* SVG text readability in dark mode */
[data-md-color-scheme="slate"] .mermaid svg {
  max-width: 100%;
}

/* Ensure proper text contrast in dark mode for inline diagram text.
   Using html selector for higher specificity to avoid !important. */
html[data-md-color-scheme="slate"] body .mermaid svg .node text,
html[data-md-color-scheme="slate"] body .mermaid svg .cluster-label text,
html[data-md-color-scheme="slate"] body .mermaid svg .edgeLabel text,
[data-md-color-scheme="slate"] .md-content .mermaid .node text,
[data-md-color-scheme="slate"] .md-content .mermaid .cluster-label text,
[data-md-color-scheme="slate"] .md-content .mermaid .edgeLabel text {
  fill: var(--mermaid-neutral-text);
}

/* ============================================
   Unity-specific admonition
   ============================================ */
.md-typeset .admonition.unity,
.md-typeset details.unity {
  border-color: #222c37;
}

.md-typeset .unity > .admonition-title,
.md-typeset .unity > summary {
  background-color: rgba(34, 44, 55, 0.1);
}

.md-typeset .unity > .admonition-title::before,
.md-typeset .unity > summary::before {
  background-color: #222c37;
  /* Unity cube icon using mask */
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l6.9 3.45L12 11.09 5.1 7.63 12 4.18zM4 8.82l7 3.5v7.86l-7-3.5V8.82zm9 11.36v-7.86l7-3.5v7.86l-7 3.5z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18l6.9 3.45L12 11.09 5.1 7.63 12 4.18zM4 8.82l7 3.5v7.86l-7-3.5V8.82zm9 11.36v-7.86l7-3.5v7.86l-7 3.5z"/></svg>');
}

/* ============================================
   Feature grid for homepage
   ============================================ */
.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}