/* Shared design tokens. Loaded before every page stylesheet. */
:root {
    color-scheme: dark;
    --bg: #0b0f14;
    --bg-soft: #121820;
    --panel: rgba(17, 22, 30, 0.94);
    --panel-strong: rgba(24, 31, 41, 0.98);
    --border: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(255, 255, 255, 0.12);
    --text: #e9edf3;
    --dim: #9aa5b5;
    --accent: #f4b942;
    --accent-2: #4fd1c5;
    --green: #7bd88f;
    --red: #f47174;
    --red-soft: #f7a3a5;
    --on-accent: #1a1305;
    --scrollbar-thumb: #75849a;
    --scrollbar-thumb-hover: #9aa5b5;
    --mermaid-node-fill: #1b2330;
    --mermaid-edge: #7f8ca0;
    --mermaid-edge-label-bg: #121820;
    --mermaid-current-border: #ffd98a;

    /* RGB channels for translucent variants: rgba(var(--accent-rgb), 0.5) */
    --accent-rgb: 244, 185, 66;
    --accent-2-rgb: 79, 209, 197;
    --red-rgb: 244, 113, 116;
    --ink-rgb: 6, 9, 13;

    --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

input::placeholder,
textarea::placeholder {
    color: var(--dim);
    opacity: 1;
}

/* Keep Mermaid maps readable under the production CSP, which blocks inline SVG styles. */
.mermaid svg {
    font-family: var(--mono) !important;
    font-size: 16px !important;
}

.mermaid svg .nodeLabel,
.mermaid svg .edgeLabel {
    white-space: nowrap !important;
}

.mermaid svg .node text,
.mermaid svg .node tspan {
    text-anchor: middle !important;
}

.mermaid svg .node:not(.current) rect,
.mermaid svg .node:not(.current) polygon,
.mermaid svg .node:not(.current) circle,
.mermaid svg .node:not(.current) ellipse,
.mermaid svg .node:not(.current) path {
    fill: var(--mermaid-node-fill) !important;
    stroke: var(--accent-2) !important;
    stroke-width: 1.5px !important;
}

.mermaid svg .node:not(.current) .nodeLabel,
.mermaid svg .node:not(.current) .nodeLabel p,
.mermaid svg .node:not(.current) text {
    color: var(--text) !important;
    fill: var(--text) !important;
}

.mermaid svg .node.current rect,
.mermaid svg .node.current polygon,
.mermaid svg .node.current circle,
.mermaid svg .node.current ellipse,
.mermaid svg .node.current path {
    fill: var(--accent) !important;
    stroke: var(--mermaid-current-border) !important;
    stroke-width: 3px !important;
}

.mermaid svg .node.current .nodeLabel,
.mermaid svg .node.current .nodeLabel p,
.mermaid svg .node.current text {
    color: var(--on-accent) !important;
    fill: var(--on-accent) !important;
}

.mermaid svg .edgePath path,
.mermaid svg .flowchart-link {
    stroke: var(--mermaid-edge) !important;
    fill: none !important;
}

.mermaid svg .marker path {
    fill: var(--mermaid-edge) !important;
    stroke: var(--mermaid-edge) !important;
}

.mermaid svg .edgeLabel .background,
.mermaid svg .edgeLabel .labelBkg {
    fill: var(--mermaid-edge-label-bg) !important;
    stroke: none !important;
}

.mermaid svg .edgeLabel text {
    fill: var(--text) !important;
    paint-order: stroke;
    stroke: var(--mermaid-edge-label-bg);
    stroke-linejoin: round;
    stroke-width: 4px;
}

.mermaid svg .edgeLabel,
.mermaid svg .edgeLabel .label,
.mermaid svg .edgeLabel .label p,
.mermaid svg .edgeLabel text {
    color: var(--text) !important;
    fill: var(--text) !important;
}