/**
 * Дизайн-токены Paytool.
 * Извлечены из Figma "Paytool | Для Claude" (файл MDrbipIH9VuHf1QElulOGT):
 * страницы Buttons, Inputs, Cards, Controls, Other elements.
 */

:root {
  /* ---- Цвет: фон и поверхности ---- */
  --bg: #111318;                    /* main colors/deep night */
  --surface: rgba(57, 61, 68, 0.18);      /* tonal/payne's grey 18% */
  --surface-hover: rgba(57, 61, 68, 0.44); /* payne's grey 44% */
  --surface-strong: rgba(57, 61, 68, 0.56); /* payne's grey 56% */
  --border: rgba(57, 61, 68, 0.18);
  --border-strong: rgba(57, 61, 68, 0.44);

  /* ---- Цвет: текст ---- */
  --text: #fcfcfc;                  /* main colors/white */
  --text-72: rgba(252, 252, 252, 0.72);
  --text-60: rgba(252, 252, 252, 0.6);
  --text-45: rgba(252, 252, 252, 0.45);
  --text-24: rgba(252, 252, 252, 0.24);

  /* ---- Цвет: акцент ---- */
  --accent: #00cd9b;                /* main colors/accent */
  --accent-bright: #00ffc1;
  --accent-gradient: linear-gradient(-53deg, var(--accent) 2%, var(--accent-bright) 120%);
  --accent-8: rgba(0, 205, 155, 0.08);
  --accent-18: rgba(0, 205, 155, 0.18);
  --accent-24: rgba(0, 205, 155, 0.24);
  --on-accent: #111318;             /* тёмный текст на ярких кнопках */

  /* ---- Цвет: статусы ---- */
  --warning: #f5bb2b;
  --warning-8: rgba(245, 187, 43, 0.08);
  --warning-18: rgba(245, 187, 43, 0.18);
  --error: rgba(255, 59, 52, 0.75);

  /* ---- Типографика ---- */
  --font: 'Mariupol', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Радиусы ---- */
  --radius-pill: 100px;
  --radius-lg: 24px;
  --radius-md: 10px;
  --radius-sm: 6px;

  /* ---- Тени ---- */
  --shadow-card: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
  --shadow-mockup: 0 32px 64px -28px rgba(0, 0, 0, 0.65);

  /* ---- Отступы страницы ---- */
  --page-gutter: 20px;
  --container-max: 1080px;

  /* ---- Длительности анимаций (только функциональные) ---- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 640px) {
  :root {
    --page-gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 48px;
  }
}