:root {
  --mp-bg-dark: #15171c;
  --mp-bg-card: #20232a;
  --mp-bg-soft: #f4f6f8;
  --mp-bg-white: #ffffff;
  --mp-text-dark: #16181d;
  --mp-text-body: #4f5661;
  --mp-text-light: #ffffff;
  --mp-text-muted: #aeb5be;
  --mp-blue: #22a7e0;
  --mp-blue-dark: #087cab;
  --mp-red: #f23e3e;
  --mp-red-dark: #c92f2f;
  --mp-border: #dde2e7;
  --mp-success: #16865c;
  --mp-warning: #b66c00;
  --mp-danger: #bd3131;
  --mp-radius-sm: 10px;
  --mp-radius-md: 18px;
  --mp-radius-lg: 28px;
  --mp-shadow-sm: 0 8px 24px rgba(18, 24, 32, 0.08);
  --mp-shadow-lg: 0 24px 60px rgba(18, 24, 32, 0.16);
  --mp-container: 1240px;

  --color-bg: var(--mp-bg-dark);
  --color-surface: var(--mp-bg-card);
  --color-surface-raised: #282c34;
  --color-border: #363b45;
  --color-text: var(--mp-text-light);
  --color-muted: var(--mp-text-muted);
  --color-blue: var(--mp-blue);
  --color-blue-dark: var(--mp-blue-dark);
  --color-red: var(--mp-red);
  --color-green: #2eb67d;
  --color-warning: #e5a738;
  --radius-sm: var(--mp-radius-sm);
  --radius-md: var(--mp-radius-md);
  --radius-lg: 22px;
  --radius-xl: var(--mp-radius-lg);
  --container: var(--mp-container);
  --content-readable: 800px;
  --font-ui: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-raised: var(--mp-shadow-lg);
  --section-space: clamp(72px, 8vw, 112px);
  --focus: 0 0 0 3px rgba(34, 167, 224, .38);
}