:root {
  --sys-bg: #090c10;
  --sys-surface-lowest: #0e1218;
  --sys-surface-low: #141922;
  --sys-surface: #1a202c;
  --sys-surface-high: #222a3a;
  --sys-surface-highest: #2b3548;
  --sys-surface-hover: #333f56;

  --sys-primary: #a8c7fa;
  --sys-on-primary: #041e42;
  --sys-primary-container: #1b3860;
  --sys-on-primary-container: #d2e3fc;

  --sys-secondary: #c2e7ff;
  --sys-tertiary: #d0bcff;
  --sys-on-tertiary: #381e72;

  --sys-success: #7cd992;
  --sys-success-bg: #143520;
  --sys-danger: #f28b82;
  --sys-danger-bg: #3d1414;

  --sys-text: #e6ebf5;
  --sys-text-muted: #9aa5bc;
  --sys-text-subtle: #68738a;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --font-sans: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-spring: cubic-bezier(0.2, 0, 0, 1);
  --trans-fast: 160ms var(--ease-spring);
  --trans-normal: 280ms var(--ease-spring);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

body.m3-body {
  background-color: var(--sys-bg);
  color: var(--sys-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}