/* Metatility interface tokens · META-BRAND-002 · v2.0 · September 2026.
   Shared byte-for-byte by the OS and Marketplace. Product labels are text,
   not a reconstruction of the custom wordmark; approved artwork is pending. */
@font-face {
  font-family: Inter;
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --brand-black: #000000;
  --brand-graphite: #1A1A1A;
  --brand-steel: #6B6B6B;
  --brand-system: #D9D9D9;
  --brand-off-white: #F5F5F3;
  --brand-white: #FFFFFF;
  --brand-signal: #0066FF;
  --brand-signal-subtle: #EEF4FF;
  --canvas: var(--brand-black);
  --panel: var(--brand-graphite);
  --surface-raised: #242424;
  --text: var(--brand-white);
  --text-secondary: #B8B8B8;
  --muted: #A3A3A3;
  --border: #3D3D3D;
  --control-border: #767676;
  --selected: #11264A;
  --link: #8FB9FF;
  --signal-hover: #005CE6;
  --focus: var(--brand-white);
  --success: #93DBB7;
  --success-surface: #12251C;
  --warning: #FFCB70;
  --warning-surface: #2D2311;
  --critical: #FFA4AD;
  --critical-surface: #30191D;
  --radius: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --font-ui: Inter, Arial, Helvetica, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;
  --font-data: 'IBM Plex Mono', 'Courier New', monospace;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  background: var(--canvas);
  font-synthesis: none;
}
body { -webkit-font-smoothing: antialiased; }
code, pre, time { font-family: var(--font-data); }
input, select, textarea { color-scheme: dark; }
::selection { background: var(--brand-signal); color: var(--brand-white); }
/* Plain product navigation labels, pending the supplied custom logo asset. */
.product-identity { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 600 18px/1.4 var(--font-ui); white-space: nowrap; }
.product-descriptor { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.product-footer { color: var(--text); font-size: 14px; font-weight: 600; }