:root {
  color-scheme: light;

  --font-ui: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 140ms;
  --duration-mid: 220ms;
  --duration-slow: 320ms;

  --shadow-sm: 0 4px 12px rgba(16, 39, 72, 0.08);
  --shadow-md: 0 14px 32px rgba(16, 39, 72, 0.14);
  --shadow-lg: 0 24px 56px rgba(16, 39, 72, 0.17);

  --color-bg: #f5f8ff;
  --color-surface: #ffffff;
  --color-surface-2: #f1f6ff;
  --color-surface-3: #e7eefb;
  --color-text: #11284a;
  --color-muted: #5a7398;
  --color-border: #cfdbef;
  --color-border-strong: #b8c9e6;
  --color-primary: #1664e9;
  --color-primary-hover: #0f53b7;
  --color-primary-soft: #e8f0ff;
  --color-primary-soft-strong: rgba(22, 100, 233, 0.2);
  --color-ring: rgba(22, 100, 233, 0.34);
  --color-success: #17884f;
  --color-warning: #c77700;
  --color-danger: #be123c;
  --color-danger-soft: #ffe5ec;

  --control-height: 42px;
  --control-height-sm: 34px;
  --control-height-lg: 48px;

  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-2);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --brand: var(--color-primary);
  --brand-700: var(--color-primary-hover);
  --brand-soft: var(--color-primary-soft);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --shadow-sm: 0 6px 18px rgba(3, 10, 22, 0.34);
  --shadow-md: 0 18px 38px rgba(3, 10, 22, 0.45);
  --shadow-lg: 0 26px 62px rgba(3, 10, 22, 0.55);

  --color-bg: #0a1324;
  --color-surface: #101c31;
  --color-surface-2: #162640;
  --color-surface-3: #1a2d4a;
  --color-text: #e8f1ff;
  --color-muted: #98afd2;
  --color-border: #263955;
  --color-border-strong: #37527a;
  --color-primary: #64a6ff;
  --color-primary-hover: #4f91ea;
  --color-primary-soft: rgba(100, 166, 255, 0.16);
  --color-primary-soft-strong: rgba(100, 166, 255, 0.28);
  --color-ring: rgba(100, 166, 255, 0.46);
  --color-success: #39cb84;
  --color-warning: #f0b24d;
  --color-danger: #ff6a8f;
  --color-danger-soft: rgba(255, 106, 143, 0.16);
}

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, input, select, textarea, a) {
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

:where(button, [role="button"], a[href]) {
  cursor: pointer;
}

:where(button[disabled], input[disabled], select[disabled], textarea[disabled]) {
  cursor: not-allowed;
  opacity: 0.6;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}

:where(svg.icon-line, .icon-line svg, [data-icon-style="line"] svg) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
}

.ui-btn:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.ui-btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.ui-btn-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  box-shadow: 0 10px 20px var(--color-primary-soft-strong);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0 12px;
}

.ui-textarea {
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
}

.ui-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.ui-tabs > button {
  min-height: 34px;
  min-width: 90px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-weight: 700;
}

.ui-tabs > button.is-active {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}