/* =============================================
   DESIGN TOKENS — единый источник правды
   Палитра, градиенты, шрифты, normalize.
   Перенесено из дизайн-системы salo.fun
   (ds-tokens.css / site-ds.css).
   Подключается ПЕРВЫМ и в index.css, и в app.css.
   ============================================= */

:root {
  /* Colors */
  --color-1: #fea036;
  --color-2: #ea842a;
  --color-3: #fa4010;
  --color-4: #5610e6;
  --color-5: #4609C3;
  --color-6: #1f0644;
  --color-7: #26094f;
  --color-8: #cfcffd;
  --color-9: #2c0e58;
  --color-10: #11132A;

  /* Gradients */
  --gradient-1: linear-gradient(340deg, var(--color-3) 0%, var(--color-2) 100%);
  --gradient-2: linear-gradient(340deg, var(--color-5) 0%, var(--color-4) 100%);
  --gradient-3: linear-gradient(94.97deg, #4E00A9 1.93%, #F1008E 96.93%);
  --gradient-success: linear-gradient(340deg, #266f09, #5bdd41);
  --gradient-luck: linear-gradient(340deg, #ea7613, #fcc310);

  /* Text shadows (glow) */
  --shadow-text-1: 0px -3px 2px rgba(12, 19, 55, 0.004), 0 -1px 4px #1b7ae2, 0 -2px 10px #1b7ae2, 0 -10px 20px #1b7ae2, 0 -18px 40px #1b7ae2;
  --shadow-text-2: 0px -3px 2px rgba(12, 19, 55, 0.004), 0 -1px 4px #ea842a, 0 -2px 10px #ea842a, 0 -10px 20px #ea842a, 0 -18px 40px #ea842a;
  --shadow-text-3: 0px -3px 2px rgba(12, 19, 55, 0.004), 0 -1px 4px #fa009f, 0 -2px 10px #fa009f, 0 -10px 20px #fa009f, 0 -18px 40px #fa009f;

  /* Glow box-shadow */
  --shadow-glow: 0 0 30px rgba(116, 66, 200, 1);
  --shadow-glow-soft: 0 0 30px rgba(116, 66, 200, 0.5);

  --vh: 1vh;
}

/* Шрифты — локальные, без запросов к Google Fonts:
   проект обязан работать без интернета. */
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Regular.woff2') format('woff2'),
       url('/fonts/Gilroy-Regular.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Medium.woff2') format('woff2'),
       url('/fonts/Gilroy-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Semibold.woff2') format('woff2'),
       url('/fonts/Gilroy-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Bold.woff2') format('woff2'),
       url('/fonts/Gilroy-Bold.woff') format('woff');
  font-weight: bold; font-style: normal; font-display: swap;
}

/* Normalize (minimal) */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; padding: 0; }
img { border-style: none; display: block; }
main { display: block; }
a { color: inherit; background-color: transparent; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button { cursor: pointer; text-transform: none; }
[hidden] { display: none; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--color-8) transparent; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-8); }
::-webkit-scrollbar-track { background: transparent; }

body {
  font-family: 'Gilroy', 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Logo — общий для сайта и игры */
.logo {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}
.logo__salo { color: var(--color-3); }
.logo__dot  { color: var(--color-8); }
.logo__fun  { color: var(--color-1); }

/* Button — pill с градиентной рамкой (актуальный стиль salo.fun) */
.button {
  position: relative;
  border-radius: 50px;
  background: var(--gradient-3);
  z-index: 0;
  display: inline-block;
  padding: 18px 30px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: box-shadow 0.3s;
  outline: none;
  white-space: nowrap;
}
.button::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50px;
  background: var(--button-hole, var(--color-10));
  z-index: -1;
  transition: opacity 0.3s;
}
.button.accent::before { display: none; }
.button:hover, .button:focus { box-shadow: var(--shadow-glow); }
.button.disable { pointer-events: none; filter: grayscale(1); opacity: 0.5; }