/* ==========================================================
   XY Convert  |  root tokens
   Variables and base reset only. No component styles here.
   ========================================================== */

:root {
  /* Blue primary */
  --xy-blue-050: #EEF3FF;
  --xy-blue-100: #DCE6FF;
  --xy-blue: #1B4DE4;
  --xy-blue-600: #1740C2;
  --xy-blue-700: #12339B;
  --xy-blue-900: #0A1F5C;

  /* Orange accent */
  --xy-orange-050: #FFF3EB;
  --xy-orange: #FF6B00;
  --xy-orange-600: #E85D00;

  /* Neutrals */
  --xy-ink: #0C1526;
  --xy-ink-2: #1E2A3F;
  --xy-ink-3: #4A5568;
  --xy-muted: #6B7689;
  --xy-line: #E2E8F2;
  --xy-line-soft: #EFF3F9;
  --xy-bg: #FFFFFF;
  --xy-bg-soft: #F6F8FC;
  --xy-bg-elev: #FFFFFF;

  /* Radius */
  --xy-r-sm: 8px;
  --xy-r-md: 12px;
  --xy-r-lg: 16px;
  --xy-r-xl: 22px;
  --xy-r-pill: 999px;

  /* Shadow */
  --xy-sh-1: 0 1px 2px rgba(12, 21, 38, .06);
  --xy-sh-2: 0 4px 16px rgba(12, 21, 38, .09);
  --xy-sh-3: 0 18px 46px rgba(12, 21, 38, .16);

  /* Layout */
  --xy-container: 1240px;
  --xy-header-h: 72px;
  --xy-pad-x: 20px;

  /* Type */
  --xy-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --xy-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --xy-ease: cubic-bezier(.22, .61, .36, 1);
  --xy-fast: 140ms;
  --xy-mid: 240ms;
  --xy-slow: 380ms;

  /* Layers */
  --xy-z-header: 900;
  --xy-z-drawer: 950;

  color-scheme: light;
}

[data-theme="dark"] {
  --xy-blue-050: #16224A;
  --xy-blue-100: #1C2C5E;
  --xy-blue: #6E92FF;
  --xy-blue-600: #89A6FF;
  --xy-blue-700: #A3BAFF;

  --xy-orange-050: #33200F;
  --xy-orange: #FF8534;
  --xy-orange-600: #FF9B57;

  --xy-ink: #EDF1F8;
  --xy-ink-2: #D3DBE8;
  --xy-ink-3: #A4AEC1;
  --xy-muted: #8792A6;
  --xy-line: #232E42;
  --xy-line-soft: #1A2334;
  --xy-bg: #0C1526;
  --xy-bg-soft: #121C30;
  --xy-bg-elev: #142035;

  --xy-sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --xy-sh-2: 0 4px 18px rgba(0, 0, 0, .52);
  --xy-sh-3: 0 18px 50px rgba(0, 0, 0, .64);

  color-scheme: dark;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-v15-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-v15-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--xy-header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--xy-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--xy-ink-2);
  background: var(--xy-bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  color: var(--xy-ink);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.018em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .6vw, 1.55rem); }

p { margin: 0 0 16px; }

a { color: var(--xy-blue); text-decoration: none; transition: color var(--xy-fast) var(--xy-ease); }
a:hover { color: var(--xy-blue-600); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--xy-blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- Shared ---------- */

.xy-container {
  width: 100%;
  max-width: var(--xy-container);
  margin-inline: auto;
  padding-inline: var(--xy-pad-x);
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}