/* ============================================================
   ATD 2026 — токены и базовые стили
   Источник: «Руководство по фирменному стилю АТОМДАТА» v1.0
   ============================================================ */
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --atd-ocean-blue: #0033FF;
  --atd-pool-blue: #06B2FE;
  --atd-blue-600: #0151FF;
  --atd-blue-700: #0372FF;
  --atd-blue-800: #0490FF;
  --atd-blue-active: #0026BF;
  --atd-blue-deep: #00197E;
  --atd-blue-soft: #BFE5FB;
  --atd-blue-pale: #DCEEFD;
  --atd-blue-mist: #D6EBFD;

  --atd-grey-200: #212122;
  --atd-grey-300: #38383A;
  --atd-grey-400: #545557;
  --atd-grey-500: #727376;
  --atd-grey-600: #909195;
  --atd-grey-700: #B0B1B6;
  --atd-grey-800: #D0D1D7;
  --atd-grey-900: #E4E4EA;

  --atd-bg-page: #F3F4FB;
  --atd-bg-surface: #FFFFFF;
  --atd-bg-subtle: #F7F8FD;

  --atd-alert-bg: rgba(224, 58, 58, .10);
  --atd-alert-border: rgba(224, 58, 58, .55);

  --atd-font: 'Onest', Arial, Helvetica, sans-serif;
  --atd-ease: cubic-bezier(.2, .7, .2, 1);
  --atd-shadow-card: 0 2px 12px rgba(0, 25, 126, .05);
  --atd-shadow-btn: 0 6px 18px rgba(0, 25, 126, .18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--atd-bg-page);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--atd-font);
  color: #000;
}

button, input, select, textarea { font-family: var(--atd-font); }
input::placeholder { color: var(--atd-grey-700); }
a { color: var(--atd-ocean-blue); text-decoration: none; }
a:hover { color: var(--atd-blue-600); }

.atd-hidden { display: none !important; }

.atd-btn {
  width: 100%;
  min-height: 70px;
  border: none;
  border-radius: 12px;
  background: var(--atd-ocean-blue);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--atd-shadow-btn);
  transition: background 220ms var(--atd-ease), opacity 220ms var(--atd-ease);
}
.atd-btn:hover { background: var(--atd-blue-600); }
.atd-btn:active { background: var(--atd-blue-active); }
.atd-btn[disabled], .atd-btn.is-off { opacity: .45; cursor: not-allowed; }

.atd-btn-ghost {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--atd-ocean-blue);
  border-radius: 12px;
  background: transparent;
  color: var(--atd-ocean-blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--atd-ease);
}
.atd-btn-ghost:hover { background: var(--atd-blue-soft); }

.atd-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--atd-grey-600);
}

.atd-icon {
  display: block;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}