/* ── Theme: CSS custom properties, fonts, base, animations ──────────────── */

:root {
  --color-surface: #020c29;
  --color-surface-container: #08183b;
  --color-surface-container-low: #041131;
  --color-surface-container-high: #08183b;
  --color-surface-container-highest: #13244d;
  --color-surface-bright: #182a56;
  --color-primary: #4dc9f1;
  --color-secondary: #00fd87;
  --color-tertiary: #feb700;
  --color-error: #ff6e84;
  --color-on-surface: #dfe4ff;
  --color-outline: #6a7596;
  --color-outline-variant: #3c4766;
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-hebrew: 'Assistant', sans-serif;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

/* Base font is set in fonts.css (loaded first) */

/* Font size minimums */
.text-\[9px\] { font-size: 10px !important; }
.text-\[10px\] { font-size: 11px !important; }

/* Material icons base config (font-family in fonts.css) */

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Global rounded corners */
button, input, select, textarea, dialog { border-radius: var(--radius-md) !important; }
.severity-badge { border-radius: var(--radius-sm) !important; }

/* Mermaid diagram dark theme overrides */
.mermaid {
    font-family: 'Inter', sans-serif !important;
}
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
    fill: #13244d !important;
    stroke: #4dc9f1 !important;
}
.mermaid .edgePath .path {
    stroke: #4dc9f1 !important;
}
.mermaid .edgeLabel {
    background-color: #041131 !important;
    color: #a0aace !important;
}
.mermaid .cluster rect {
    fill: #041131 !important;
    stroke: #3c4766 !important;
}
.mermaid text {
    fill: #dfe4ff !important;
}
.mermaid .note {
    fill: #13244d !important;
    stroke: #feb700 !important;
}
.mermaid .noteText {
    fill: #dfe4ff !important;
}