/* ═══════════════════════════════════════════════════════════════
   LaRiba BOOK — Дизайн-система
   Единые токены и компоненты для всего сайта (index.html, admin.html)
   Палитра, типографика, кнопки, карточки, формы, тени, радиусы,
   анимации и состояния. Подключать ПЕРЕД локальными стилями страниц.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Цвета: фоны ── */
  --ds-bg:#FFFFFF;            /* основной фон */
  --ds-bg2:#F7F9FC;           /* вторичный фон */
  --ds-surface:#FFFFFF;       /* поверхность карточек */

  /* ── Цвета: бренд ── */
  --ds-brand:#214E96;         /* основной фирменный */
  --ds-brand-dk:#183C77;
  --ds-brand-l:#EDF5FF;
  --ds-terra:#C75B3D;         /* терракотовый */
  --ds-terra-dk:#A8462C;
  --ds-terra-l:#FFF2F2;
  --ds-gold:#D6A52A;          /* золотой */
  --ds-gold-dk:#B08618;
  --ds-gold-l:#FFF8DF;
  --ds-em:#1F8A70;            /* изумрудный */
  --ds-em-dk:#166B57;
  --ds-em-l:#F2FFF7;
  /* пастельные подложки */
  --ds-p-blue:#EDF5FF;
  --ds-p-pink:#FFF2F2;
  --ds-p-yellow:#FFF8DF;
  --ds-p-green:#F2FFF7;
  --ds-p-violet:#F3F0FF;
  --ds-p-orange:#FFF3E8;
  --ds-p-teal:#EAFAF8;

  /* ── Цвета: текст ── */
  --ds-text:#182236;
  --ds-t2:#5B657A;
  --ds-t3:#939CAF;
  --ds-inv:#FFFFFF;

  /* ── Линии ── */
  --ds-border:#E7ECF3;
  --ds-border2:#F0F3F8;

  /* ── Тени ── */
  --ds-sh-sm:0 1px 3px rgba(24,34,54,.05),0 1px 2px rgba(24,34,54,.03);
  --ds-sh-md:0 6px 20px rgba(24,34,54,.07),0 2px 6px rgba(24,34,54,.04);
  --ds-sh-lg:0 16px 44px rgba(24,34,54,.11),0 4px 12px rgba(24,34,54,.05);
  --ds-sh-brand:0 8px 22px rgba(33,78,150,.28);
  --ds-sh-em:0 8px 22px rgba(31,138,112,.28);

  /* ── Радиусы ── */
  --ds-r-sm:10px;
  --ds-r:14px;
  --ds-r-lg:18px;
  --ds-r-xl:26px;
  --ds-r-pill:999px;

  /* ── Отступы (шкала) ── */
  --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px;
  --ds-s5:24px; --ds-s6:32px; --ds-s7:48px; --ds-s8:64px;

  /* ── Типографика ── */
  --ds-font:'Inter',system-ui,sans-serif;
  --ds-font-display:'Fraunces',Georgia,serif;

  /* ── Анимации ── */
  --ds-ease:cubic-bezier(.22,.61,.36,1);
  --ds-t-fast:.15s;
  --ds-t:.25s;
  --ds-t-slow:.45s;

  /* ── Стекло (glassmorphism) ── */
  --ds-glass:rgba(255,255,255,.72);
  --ds-glass-border:rgba(255,255,255,.65);
  --ds-glass-blur:saturate(1.6) blur(18px);
}

/* ═══ Кнопки ═══ */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ds-font);font-size:14px;font-weight:600;line-height:1;padding:13px 24px;border-radius:var(--ds-r);border:none;cursor:pointer;transition:transform var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease),background var(--ds-t-fast),color var(--ds-t-fast);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.ds-btn:active{transform:scale(.97)}
.ds-btn:disabled{background:var(--ds-border2)!important;color:var(--ds-t3)!important;box-shadow:none!important;cursor:not-allowed;transform:none!important}
.ds-btn-primary{background:var(--ds-brand);color:#fff;box-shadow:var(--ds-sh-brand)}
.ds-btn-primary:hover{background:var(--ds-brand-dk);transform:translateY(-1px)}
.ds-btn-em{background:var(--ds-em);color:#fff;box-shadow:var(--ds-sh-em)}
.ds-btn-em:hover{background:var(--ds-em-dk);transform:translateY(-1px)}
.ds-btn-secondary{background:var(--ds-brand-l);color:var(--ds-brand);box-shadow:none}
.ds-btn-secondary:hover{background:#DFEBFC;transform:translateY(-1px)}
.ds-btn-ghost{background:transparent;color:var(--ds-text);border:1.5px solid var(--ds-border)}
.ds-btn-ghost:hover{border-color:var(--ds-brand);color:var(--ds-brand);background:var(--ds-brand-l)}
.ds-btn-white{background:#fff;color:var(--ds-text);box-shadow:var(--ds-sh-md)}
.ds-btn-white:hover{transform:translateY(-1px);box-shadow:var(--ds-sh-lg)}
.ds-btn-lg{padding:16px 32px;font-size:15px;border-radius:var(--ds-r-lg)}
.ds-btn-sm{padding:9px 16px;font-size:13px;border-radius:var(--ds-r-sm)}

/* ═══ Карточки ═══ */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border2);border-radius:var(--ds-r-lg);box-shadow:var(--ds-sh-sm);transition:transform var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease)}
.ds-card-hover:hover{transform:translateY(-4px);box-shadow:var(--ds-sh-lg)}
.ds-card-flat{background:var(--ds-bg2);border:none;box-shadow:none;border-radius:var(--ds-r-lg)}

/* ═══ Поля ввода ═══ */
.ds-input{width:100%;font-family:var(--ds-font);font-size:14px;color:var(--ds-text);background:var(--ds-bg2);border:1.5px solid transparent;border-radius:var(--ds-r);padding:12px 16px;outline:none;transition:border-color var(--ds-t-fast),background var(--ds-t-fast),box-shadow var(--ds-t-fast)}
.ds-input::placeholder{color:var(--ds-t3)}
.ds-input:hover{background:#F1F5FA}
.ds-input:focus{background:#fff;border-color:var(--ds-brand);box-shadow:0 0 0 4px rgba(33,78,150,.10)}
.ds-input:disabled{background:var(--ds-border2);color:var(--ds-t3);cursor:not-allowed}
.ds-label{display:block;font-size:13px;font-weight:600;color:var(--ds-t2);margin-bottom:6px}

/* ═══ Бейджи ═══ */
.ds-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--ds-r-pill);line-height:1.2}
.ds-badge-brand{background:var(--ds-brand-l);color:var(--ds-brand)}
.ds-badge-terra{background:var(--ds-terra-l);color:var(--ds-terra)}
.ds-badge-gold{background:var(--ds-gold-l);color:var(--ds-gold-dk)}
.ds-badge-em{background:var(--ds-em-l);color:var(--ds-em)}

/* ═══ Анимации ═══ */
@keyframes ds-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ds-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes ds-slide-l{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes ds-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* плавное появление блоков при прокрутке: элементу ставится .ds-reveal,
   скрипт добавляет .in при входе в вьюпорт */
.ds-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ds-ease),transform .6s var(--ds-ease)}
.ds-reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .ds-reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}