/* ============================================================================
   Obsidian Gold — design tokens
   Единственный источник палитры, типографики, теней и анимаций для темы `gold`.
   Значения взяты из дизайн-хендоффа (design_handoff_zapret_vpn/README.md).
   Файлы поверхностей (landing.css, auth.css, cabinet.css, admin.css) должны
   использовать только эти переменные и не объявлять свои цвета.
   ============================================================================ */

:root {
  /* --- Поверхности и текст --- */
  --zp-bg: #050505;
  --zp-ink: #f6f0e4;
  --zp-ink-2: #aaa69d;
  --zp-ink-3: #8f8a7e;          /* мелкий моно; ниже по контрасту не опускаться */
  --zp-hairline: rgba(246, 240, 228, 0.09);

  /* --- Золото --- */
  --zp-gold: #ffb800;
  --zp-gold-light: #ffd75a;
  --zp-gold-lighter: #ffe38a;
  --zp-amber: #ff8300;
  --zp-amber-dark: #c25b00;
  --zp-on-gold: #1a1000;
  --zp-on-gold-soft: rgba(40, 20, 0, 0.75);

  /* --- Статусы --- */
  --zp-ok: #58b878;
  --zp-ok-ink: #83d59d;
  --zp-ok-bg: rgba(88, 184, 120, 0.12);
  --zp-ok-line: rgba(88, 184, 120, 0.38);

  --zp-err: #ff625d;
  --zp-err-ink: #ff918d;
  --zp-err-bg: rgba(255, 98, 93, 0.12);
  --zp-err-line: rgba(255, 98, 93, 0.38);

  --zp-warn: #ffd052;
  --zp-warn-bg: rgba(255, 184, 0, 0.12);
  --zp-warn-line: rgba(255, 184, 0, 0.34);

  --zp-tg: linear-gradient(140deg, #3fb6f2, #1e8fd6 60%, #1477b8);
  --zp-tg-ink: #f6fbff;

  /* --- Градиенты --- */
  --zp-grad-gold: linear-gradient(140deg, #ffe38a, #ffb800 48%, #ff8300);
  --zp-grad-gold-text: linear-gradient(92deg, #ffd75a, #ff9a00);
  --zp-grad-gold-card: radial-gradient(130% 150% at 0% 0%, #ffe38a 0%, #ffb800 36%, #ff8300 72%, #c25b00 100%);
  --zp-grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  --zp-grad-glass-line: linear-gradient(160deg, rgba(255, 184, 0, 0.5), rgba(255, 184, 0, 0.06) 40%, rgba(246, 240, 228, 0.08));
  --zp-grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  --zp-halo: radial-gradient(circle, rgba(255, 150, 0, 0.22), rgba(255, 120, 0, 0.06) 45%, transparent 70%);

  /* --- Тени --- */
  --zp-shadow-card: 0 30px 80px rgba(0, 0, 0, 0.5);
  --zp-shadow-card-hover: 0 30px 70px rgba(0, 0, 0, 0.55);
  --zp-shadow-gold: 0 16px 40px rgba(255, 140, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --zp-shadow-gold-hover: 0 24px 54px rgba(255, 140, 0, 0.5);
  --zp-shadow-gold-card: 0 34px 80px rgba(255, 140, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Радиусы --- */
  --zp-r-section: 32px;
  --zp-r-card: 24px;
  --zp-r-tile: 20px;
  --zp-r-tile-sm: 18px;
  --zp-r-btn: 16px;
  --zp-r-btn-sm: 12px;
  --zp-r-input: 14px;
  --zp-r-pill: 999px;

  /* --- Типографика --- */
  --zp-font-display: "Geologica", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zp-font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Раскладка --- */
  --zp-container: 1240px;
  --zp-gutter: clamp(18px, 4vw, 56px);
  --zp-section-gap: clamp(40px, 6vw, 90px);
  --zp-card-pad: clamp(20px, 2.6vw, 32px);

  /* --- Движение --- */
  --zp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --zp-ease-toggle: cubic-bezier(0.4, 0, 0.2, 1);
  --zp-t-fast: 220ms;
  --zp-t-mid: 280ms;
  --zp-t-rise: 760ms;
}

/* ============================================================================
   Базовые примитивы
   ============================================================================ */

.zp-container {
  width: 100%;
  max-width: var(--zp-container);
  margin-inline: auto;
  padding-inline: var(--zp-gutter);
}

.zp-card {
  background: var(--zp-grad-card);
  border: 1px solid var(--zp-hairline);
  border-radius: var(--zp-r-card);
  box-shadow: var(--zp-shadow-card);
  padding: var(--zp-card-pad);
}

/* Стеклянная карточка: градиентная рамка через padding-box/border-box */
.zp-glass {
  background:
    var(--zp-grad-glass) padding-box,
    var(--zp-grad-glass-line) border-box;
  border: 1px solid transparent;
  border-radius: var(--zp-r-card);
  box-shadow: var(--zp-shadow-card);
  padding: var(--zp-card-pad);
}

.zp-card:hover,
.zp-glass:hover {
  box-shadow: var(--zp-shadow-card-hover);
}

.zp-gold-text {
  background: var(--zp-grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zp-mono {
  font-family: var(--zp-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
}

/* --- Кнопки --- */
.zp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--zp-r-btn);
  padding: 13px 22px;
  font-family: var(--zp-font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--zp-t-fast) var(--zp-ease),
    box-shadow var(--zp-t-fast) var(--zp-ease),
    border-color var(--zp-t-fast) var(--zp-ease),
    background-color var(--zp-t-fast) var(--zp-ease);
}

.zp-btn:disabled,
.zp-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.zp-btn--gold {
  position: relative;
  overflow: hidden;
  background: var(--zp-grad-gold);
  color: var(--zp-on-gold);
  box-shadow: var(--zp-shadow-gold);
}

.zp-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--zp-shadow-gold-hover);
}

/* Блик по золотой кнопке */
.zp-btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: zp-shimmer 3.4s var(--zp-ease) 1.4s infinite;
  pointer-events: none;
}

.zp-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--zp-hairline);
  color: var(--zp-ink);
}

.zp-btn--ghost:hover {
  border-color: rgba(255, 184, 0, 0.45);
  transform: translateY(-2px);
}

.zp-btn--tg {
  background: var(--zp-tg);
  color: var(--zp-tg-ink);
}

/* --- Поля ввода --- */
.zp-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--zp-hairline);
  border-radius: var(--zp-r-input);
  padding: 13px 16px;
  color: var(--zp-ink);
  font-family: var(--zp-font-text);
  font-size: 15px;
  transition: border-color var(--zp-t-fast) var(--zp-ease),
    box-shadow var(--zp-t-fast) var(--zp-ease);
}

.zp-input::placeholder { color: var(--zp-ink-3); }

.zp-input:focus {
  outline: none;
  border-color: rgba(255, 184, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.14);
}

/* --- Чипы и бейджи --- */
.zp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--zp-r-pill);
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--zp-hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--zp-ink-2);
}

.zp-chip--ok { background: var(--zp-ok-bg); border-color: var(--zp-ok-line); color: var(--zp-ok-ink); }
.zp-chip--err { background: var(--zp-err-bg); border-color: var(--zp-err-line); color: var(--zp-err-ink); }
.zp-chip--warn { background: var(--zp-warn-bg); border-color: var(--zp-warn-line); color: var(--zp-warn); }
.zp-chip--gold { background: rgba(255, 184, 0, 0.12); border-color: rgba(255, 184, 0, 0.4); color: var(--zp-gold-light); }

/* ============================================================================
   Анимации
   ============================================================================ */

@keyframes zp-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes zp-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}

@keyframes zp-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

@keyframes zp-shimmer {
  0%        { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(280%) skewX(-18deg); }
}

@keyframes zp-glow {
  0%   { box-shadow: 0 0 0 0 rgba(88, 184, 120, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(88, 184, 120, 0); }
}

@keyframes zp-orbit {
  to { transform: rotate(360deg); }
}

.zp-rise { animation: zp-rise var(--zp-t-rise) var(--zp-ease) both; }
.zp-rise-2 { animation-delay: 80ms; }
.zp-rise-3 { animation-delay: 160ms; }
.zp-rise-4 { animation-delay: 240ms; }
.zp-rise-5 { animation-delay: 320ms; }
.zp-rise-6 { animation-delay: 400ms; }

.zp-halo {
  position: absolute;
  border-radius: 50%;
  background: var(--zp-halo);
  filter: blur(36px);
  animation: zp-breathe 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Уважать системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}