/* ===========================================================
   Токены дизайн-системы «альбом»
   Единственное место, где живут цвета, шрифты и фактуры.
   =========================================================== */

:root {
  /* — бумага и чернила — */
  --paper:       #F7F1E3;
  --paper-deep:  #F1E8D4;
  --kraft:       #E9DCC3;
  --card:        #FFFDF6;
  --ink:         #2E3226;
  --ink-soft:    #5A5F4E;

  /* — акценты — */
  --green:       #43573E;
  --orange:      #D96E34;  /* заливки и линии; для текста слишком светлый */
  --marker:      #B04E1B;  /* текстовый оранжевый, AA на светлой бумаге */
  --marker-lite: #F2B48A;  /* тот же голос на зелёном листе */
  --navy:        #1E2A4A;  /* только Plango */

  /* — шрифты — */
  --serif: 'Vollkorn', Georgia, serif;
  --hand:  'Caveat', 'Segoe Script', cursive;
  --mono:  'JetBrains Mono', 'Consolas', monospace;

  /* — ритм — */
  --gap-xs: 10px;
  --gap-s:  clamp(18px, 2.5vw, 26px);
  --gap-m:  clamp(26px, 4vw, 44px);
  --gap-l:  clamp(36px, 5vw, 72px);
  --pad-section: clamp(56px, 8vw, 110px);
  --wrap: 1160px;
  --hero-photo: 420px;

  /* — материя: тени наклеенных вещей — */
  --lift-card:  0 10px 22px rgba(46, 50, 38, .16), 0 2px 5px rgba(46, 50, 38, .10);
  --lift-photo: 0 14px 28px rgba(46, 50, 38, .22), 0 3px 8px rgba(46, 50, 38, .14);
  --lift-hero:  0 18px 40px rgba(46, 50, 38, .18), 0 4px 10px rgba(46, 50, 38, .10);
  --lift-sheet: 0 -16px 38px rgba(46, 50, 38, .16), 0 -2px 8px rgba(46, 50, 38, .08);

  /* — фактуры — */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(46, 50, 38, .07) 1px, transparent 1.1px);
  --paper-texture: var(--grain), var(--dots);
  --paper-texture-size: 240px 240px, 26px 26px;
}

/* Full HD и шире: на 1160px контент тонет посреди экрана, поэтому
   разворот, кадры и вертикальные отбивки растут вместе с окном. */
@media (min-width: 1600px) {
  :root {
    --wrap: 1400px;
    --hero-photo: 500px;
    --about-photo: 400px;
    --plango-word: 290px;
    --pad-section: clamp(96px, 7vw, 150px);
  }
}