/* ============================================================
   ПАПЕРКА — дизайн-токены
   Синий #006399 · Графит #1E2937 · Белый #FFFFFF
   (синий — подтверждённый цвет интерфейса Паперки; см. CONTENT_SOURCES.md)
   ============================================================ */
:root {
  /* --- бренд --- */
  --brand:         #006399;
  --brand-600:     #005380;
  --brand-700:     #00405F;
  --brand-400:     #4093BF;   /* средний тон интерфейса Паперки */
  --brand-200:     #99DBFF;   /* светлый акцент */
  --brand-100:     #E1F1FA;
  --brand-50:      #F3F9FD;

  --ink:           #1E2937;
  --ink-700:       #33404F;
  --ink-500:       #5A6675;
  --ink-400:       #667283;   /* 4.94:1 на белом — годится для мелкого текста */
  --ink-300:       #A6AEB9;

  /* --- поверхности (тёплые нейтральные) --- */
  --bg:            #FFFFFF;
  --surface:       #FAF8F6;
  --surface-2:     #F3F0EC;
  --line:          #E7E2DC;
  --line-strong:   #D6CFC6;

  /* --- многоуровневые поверхности (ТЗ §4: убрать «всё белое») ---
     Пять ступеней светлых фонов + две тёмные. Секции на главной
     чередуются по этой шкале, поэтому страница читается как
     набор разных по тону блоков, а не как один белый лист.      */
  --surface-cool:  #F4F6F9;   /* холодный blue-gray  */
  --surface-cool-2:#EAEEF4;   /* он же, на ступень глубже */
  --surface-brand: #F3F9FD;   /* очень светлая брендовая (= brand-50) */
  --surface-brand-2:#E8F3FB;
  --dark:          #16202C;   /* почти чёрный с синим подтоном */
  --dark-2:        #0E2436;   /* тёмно-синий */
  --dark-line:     rgba(255,255,255,.12);
  --on-dark:       #EEF3F8;
  --on-dark-muted: #9FB2C4;   /* 4.9:1 на --dark */

  /* --- градиенты (только там, где уместно) --- */
  --grad-brand:    linear-gradient(135deg, #006399 0%, #0A4E79 55%, #0E2436 100%);
  --grad-brand-soft: linear-gradient(170deg, #F3F9FD 0%, #E8F3FB 100%);
  --grad-cool:     linear-gradient(180deg, #F4F6F9 0%, #FFFFFF 100%);

  /* --- затемнение фотографий (hero, плитки галереи) ---
     Фото заказчика светлое, поэтому для hero нужен не плоский
     фильтр, а боковой градиент: слева текст читается, справа
     фотография остаётся видимой.                               */
  --scrim-side: linear-gradient(90deg,
                  rgba(10,30,46,.94) 0%, rgba(10,30,46,.88) 34%,
                  rgba(10,30,46,.55) 58%, rgba(10,30,46,.18) 82%,
                  rgba(10,30,46,.06) 100%);
  --scrim-bottom: linear-gradient(180deg,
                  rgba(10,30,46,.10) 0%, rgba(10,30,46,.52) 46%,
                  rgba(10,30,46,.92) 100%);
  --scrim-tile: linear-gradient(180deg,
                  rgba(12,26,38,0) 38%, rgba(12,26,38,.72) 100%);

  /* --- статусы --- */
  --ok:            #1F9D6B;
  --ok-bg:         #E7F6EF;
  --warn:          #C98A12;
  --warn-bg:       #FDF4E0;
  --danger:        #D2383C;
  --danger-bg:     #FBEBEB;
  --info:          #2C6FB5;
  --info-bg:       #E9F1FA;

  /* --- типографика --- */
  --font: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* fluid-шкала: читаемо и на 360px, и на 1920px */
  --fs-xs:   0.8125rem;                                   /* 13 */
  --fs-sm:   0.9375rem;                                   /* 15 */
  --fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);    /* 16→17 */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17→19 */
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);     /* 20→24 */
  --fs-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);           /* 24→32 */
  --fs-2xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);    /* 30→44 */
  --fs-3xl:  clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);     /* 34→56 */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  /* --- ритм --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px; --sp-11: 96px;

  --section-y: clamp(44px, 6vw, 88px);
  /* Поле от края экрана: на узких 14px, на стандартных 20px, на десктопе до 32px */
  --gutter:    clamp(14px, 4.5vw, 32px);
  --maxw:      1240px;
  --maxw-narrow: 820px;

  /* --- форма --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(30,41,55,.06), 0 1px 3px rgba(30,41,55,.05);
  --sh-2: 0 2px 6px rgba(30,41,55,.06), 0 6px 18px rgba(30,41,55,.07);
  --sh-3: 0 8px 24px rgba(30,41,55,.10), 0 18px 48px rgba(30,41,55,.09);
  --sh-brand: 0 6px 20px rgba(0,99,153,.26);
  --sh-dark:  0 10px 30px rgba(4,12,20,.45);
  --sh-media: 0 2px 8px rgba(20,32,44,.08), 0 14px 34px rgba(20,32,44,.12);

  /* --- движение --- */
  --t-fast: 120ms cubic-bezier(.2,.6,.3,1);
  --t:      200ms cubic-bezier(.2,.6,.3,1);
  --t-slow: 340ms cubic-bezier(.2,.6,.3,1);

  /* --- зоны касания --- */
  --tap: 48px;

  /* --- слои --- */
  --z-header: 100;
  --z-bottomnav: 95;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}