:root {
  /* ─── Brand ─── */
  --accent: #2b1f99;
  --accent-light: #3ad4d8;
  --accent-soft: color-mix(in oklch, #2b1f99 10%, transparent);
  --accent-faint: color-mix(in oklch, #2b1f99 5%, transparent);

  /* ─── Surface ─── */
  --bg: #f7fbff;
  --surface: #ffffff;
  --soft-tint: #f4fdff;

  /* ─── Text ─── */
  --fg: #16133a;
  --muted: #69708a;

  /* ─── Border ─── */
  --border: #dfe7f7;

  /* ─── Status ─── */
  --warn: #f0a020;
  --warn-bg: #fff8e8;
  --warn-text: #735b14;
  --danger: #e05555;

  /* ─── Typography ─── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  /* ─── Spacing ─── */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 36px;

  /* ─── Radius ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ─── Layout ─── */
  --panel-left: 260px;
  --panel-right: 380px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body,
#app {
  width: 100%;
  min-width: 1280px;
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow: hidden;
  height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font: inherit;
}

p {
  margin: 0;
  text-wrap: pretty;
}
