:root {
  --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bg-app: #f3f5f8;
  --bg-surface: rgba(255, 255, 255, 0.88);
  --bg-surface-strong: #ffffff;
  --bg-highlight: linear-gradient(160deg, #0f2842 0%, #1a5d76 100%);
  --text-primary: #142235;
  --text-secondary: #5a6b7f;
  --text-on-dark: #f7fbff;
  --border-soft: rgba(19, 34, 53, 0.08);
  --shadow-soft: 0 14px 32px rgba(16, 32, 52, 0.12);
  --brand: #0f6b84;
  --brand-strong: #0d5164;
  --danger: #b93b32;
  --danger-soft: #fbe1de;
  --success: #17795f;
  --success-soft: #dff7ef;
  --warning: #b67812;
  --warning-soft: #fff0cf;
  --info: #2c6ae0;
  --info-soft: #deebff;
  --slate: #6d7b8a;
  --slate-soft: #e7edf4;
}

:root[data-theme="dark"] {
  --bg-app: #07111d;
  --bg-surface: rgba(14, 24, 37, 0.88);
  --bg-surface-strong: #101c2a;
  --bg-highlight: linear-gradient(160deg, #10263d 0%, #0f5d74 100%);
  --text-primary: #edf6ff;
  --text-secondary: #9eb0c4;
  --text-on-dark: #f7fbff;
  --border-soft: rgba(159, 187, 216, 0.12);
  --shadow-soft: 0 18px 42px rgba(1, 8, 15, 0.4);
  --brand: #53c3dc;
  --brand-strong: #8adbf0;
  --danger: #f07c72;
  --danger-soft: rgba(240, 124, 114, 0.16);
  --success: #5fd1ac;
  --success-soft: rgba(95, 209, 172, 0.18);
  --warning: #f4c766;
  --warning-soft: rgba(244, 199, 102, 0.14);
  --info: #7db6ff;
  --info-soft: rgba(125, 182, 255, 0.16);
  --slate: #a3b2c3;
  --slate-soft: rgba(163, 178, 195, 0.16);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top right, rgba(15, 107, 132, 0.22), transparent 32%),
    radial-gradient(circle at bottom left, rgba(44, 106, 224, 0.14), transparent 28%),
    var(--bg-app);
  color: var(--text-primary);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}