/* ============================================================
   azgorator — дизайн-токены
   Все цвета сняты с настоящих работ художницы.
   Меняешь значение здесь — меняется на всём сайте.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- База --- */
  --black: #000000;
  --void: #05060b;
  --deep: #0a0a14;

  /* --- Неон из работ --- */
  --lime: #d8f02a;
  --cyan: #2fe8d5;
  --magenta: #e838d8;
  --violet: #7b2cbf;
  --orange: #ff7a18;

  /* --- Глубина космоса (из лунных пейзажей) --- */
  --night: #0b1e5b;
  --night-2: #1a237e;

  /* --- Текст --- */
  --ink: #f2f0ff;
  --ink-2: rgba(242, 240, 255, 0.68);
  --ink-3: rgba(242, 240, 255, 0.40);
  --line: rgba(242, 240, 255, 0.14);
  --line-2: rgba(242, 240, 255, 0.07);

  /* --- Акценты карточки. Перекрываются из content.json для каждой работы --- */
  --accent: var(--lime);
  --accent-2: var(--cyan);

  /* --- Шрифты --- */
  --font-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-sign: 'Caveat', 'Segoe Script', cursive;

  /* --- Размеры текста: сами подстраиваются под ширину экрана --- */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.22vw, 1.06rem);
  --step-1: clamp(1.12rem, 1.02rem + 0.5vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.15rem + 1.3vw, 2.3rem);
  --step-3: clamp(2rem, 1.4rem + 2.9vw, 4.2rem);

  /* --- Ритм --- */
  --gap: clamp(1rem, 0.6rem + 1.7vw, 2.2rem);
  --pad: clamp(1.1rem, 0.4rem + 2.8vw, 3.6rem);
  --radius: 24px;
  --radius-sm: 14px;
  --header-h: 68px;
  --maxw: 1560px;

  /* --- Движение --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.35, 0.64, 1);
  --t-fast: 0.2s;
  --t: 0.45s;
  --t-slow: 0.9s;

  /* --- Свечения --- */
  --glow-soft: 0 0 60px -10px color-mix(in oklab, var(--accent) 55%, transparent);
  --glow-hard: 0 0 22px -4px color-mix(in oklab, var(--accent) 80%, transparent);
}

@media (max-width: 720px) {
  :root {
    --header-h: 56px;
    --radius: 18px;
  }
}