:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --primary: #2196c4;
  --primary-strong: #1a7da4;
  --primary-soft: #dff3fb;
  --secondary: #f4f7fa;
  --muted: #eef2f4;
  --muted-foreground: #667085;
  --border: #dde4ea;
  --input-background: #f8fafb;
  --warning-bg: #fff7dd;
  --warning-border: #f3cc62;
  --warning-text: #7a5d11;
  --success-bg: #e8f7ec;
  --success-border: #8dd1a1;
  --success-text: #256c3f;
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.16);
  --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
  --radius: 22px;
  --radius-sm: 14px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--foreground);
  background:
    radial-gradient(circle at top left, rgba(33, 150, 196, 0.18), transparent 28%),
    linear-gradient(135deg, #f2f7fa 0%, #f7fbfd 50%, #edf5f8 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.svg-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
  vertical-align: middle;
}