:root {
  color-scheme: light;
  --ink: #111318;
  --sand: #f3e8d5;
  --blue: #1f4fa3;
  --blue-dark: #12306a;
  --coral: #ff5b3f;
  --white: #fefcf9;
  --shadow: 0 24px 60px rgba(12, 17, 28, 0.2);
  --radius: 24px;
  --header-height: 134px;
  --bg-radial: radial-gradient(circle at top, rgba(255, 255, 255, 0.8), transparent 55%);
  --bg-linear: linear-gradient(140deg, #f8efe0 10%, #dbe6f9 55%, #f5d6c2 100%);
}

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

html,
body {
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  color: var(--ink);
  background: var(--bg-radial), var(--bg-linear);
  min-height: 100vh;
  overflow-x: hidden;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f4f6fb;
  --sand: #0c0f14;
  --blue: #5d86db;
  --blue-dark: #3a5ea8;
  --white: #161b26;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --bg-radial: radial-gradient(circle at top, rgba(27, 32, 46, 0.8), transparent 55%);
  --bg-linear: linear-gradient(140deg, #0b0f16 10%, #141c2a 55%, #1f2434 100%);
}

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

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

*:focus-visible {
  outline: 3px solid rgba(31, 79, 163, 0.5);
  outline-offset: 3px;
}