/* Design tokens and base reset, mirroring src/app/globals.css.
   Keep the custom property values in sync with the app. */

:root {
  --navy-950: #07172c;
  --navy-900: #0b1f3a;
  --navy-700: #24405f;
  --slate-500: #687789;
  --slate-300: #cfd8df;
  --slate-200: #e4e9ed;
  --slate-100: #f1f4f5;
  --surface: #ffffff;
  --canvas: #f6f9f8;
  --mint-100: #e4f6ef;
  --mint-200: #c9eedf;
  --green-600: #15945f;
  --green-700: #0b7548;
  --gold-500: #d5aa3d;
  --gold-600: #bd9130;
  --danger: #bb3131;
  --shadow-card: 0 8px 24px rgba(7, 23, 44, 0.08);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--navy-900);
  background: var(--canvas);
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-weight: 900;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

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

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- icons ---------- */

/* The sprite itself must never take up layout space. */
.iconSprite {
  display: none;
}

/* Stroke and fill live here rather than on the <symbol> elements, so the
   iconFilled modifier can override them through inheritance. */
.icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon12 {
  width: 12px;
  height: 12px;
}

.icon13 {
  width: 13px;
  height: 13px;
}

.icon14 {
  width: 14px;
  height: 14px;
}

.icon15 {
  width: 15px;
  height: 15px;
}

.icon16 {
  width: 16px;
  height: 16px;
}

.icon17 {
  width: 17px;
  height: 17px;
}

.icon18 {
  width: 18px;
  height: 18px;
}

.icon19 {
  width: 19px;
  height: 19px;
}

.icon20 {
  width: 20px;
  height: 20px;
}

.icon26 {
  width: 26px;
  height: 26px;
}

.iconBold {
  stroke-width: 2.4;
}

.iconBolder {
  stroke-width: 3;
}

.iconFilled {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}