/* Symmetry Labs: canonical web brand; import once at application root */
@font-face { font-family: 'Poppins'; src: url('./fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('./fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('./fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --color-ink: #14212E;
  --color-cobalt: #345CFF;
  --color-ivory: #F6F5F0;
  --color-white: #FFFFFF;
  --color-slate: #66727D;
  --color-mist: #DCE1E5;
  --color-tint: #E9EEFF;
  --color-success: #16745A;
  --color-warning: #966014;
  --color-error: #B33F46;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-data: 'IBM Plex Mono', monospace;
}
body { background: var(--color-ivory); color: var(--color-ink); font: 400 16px/1.625 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
.numeric { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
/* Use outlined supplied SVG logos; do not recreate logos with live CSS text. */

html { font-synthesis: none; }
button, input, select, textarea { font: inherit; }
h4, h5, h6 { font-family: var(--font-display); font-weight: 600; }
code, pre, kbd, samp, .technical-label { font-family: var(--font-data); font-weight: 400; }
.brand-tagline { font-family: var(--font-body); font-weight: 400; }
.brand-logo { display: block; height: auto; }

:root { --color-shadow: #14212E10; --cluster-company: var(--color-cobalt); --cluster-operations: var(--color-warning); --cluster-research: var(--color-success); --cluster-platform: var(--color-ink); --cluster-evidence: var(--color-error); --cluster-execution: var(--color-slate); --cluster-roadmap: var(--color-cobalt); }