/* Sber Brand Kit — CSS-токены (неофициально, по мотивам стиля Сбера)
   Подключение: <link rel="stylesheet" href="tokens.css"> или скопируйте :root */
:root {
  /* Палитра */
  --green:    #21A038;
  --green-dk: #17812C;
  --yellow:   #F2E913;
  --lime:     #A3CD39;
  --sky:      #0FA8E0;
  --blue:     #0291EB;
  --graphite: #333F48;
  --paper:    #F5F4F0;
  --black:    #101314;
  --white:    #FFFFFF;

  /* Градиент бренда: всегда жёлтый → зелёный → синий */
  --grad: linear-gradient(115deg, var(--yellow) 0%, var(--lime) 24%, var(--green) 50%, var(--sky) 76%, var(--blue) 100%);

  /* Типографика */
  --font: "SB Sans Text", "Onest", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-display: clamp(56px, 11vw, 160px);
  --fs-h1:      clamp(40px, 6vw, 76px);
  --fs-h2:      clamp(28px, 3.4vw, 44px);
  --fs-lead:    clamp(18px, 1.8vw, 24px);
  --fs-body:    17px;
  --fs-caption: 13px;

  /* Сетка и скругления */
  --gutter:    clamp(20px, 4vw, 64px);
  --section-y: clamp(56px, 9vh, 120px);
  --grid-gap:  14px;
  --r-tile:    24px;
  --r-pill:    999px;
  --r-control: 12px;

  /* Движение */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-micro:   .2s;
  --dur-reveal:  .8s;
}

/* Семантика панелей: плоские заливки — основа стиля */
.panel-green    { background: var(--green);    color: var(--white); }
.panel-blue     { background: var(--blue);     color: var(--white); }
.panel-graphite { background: var(--graphite); color: var(--white); }
.panel-black    { background: var(--black);    color: var(--white); }
.panel-yellow   { background: var(--yellow);   color: var(--black); }
.panel-paper    { background: var(--paper);    color: var(--black); }
.panel-gradient { background: var(--grad); background-size: 240% 100%; color: var(--white); }

/* Reduced motion — обязательен для любых анимаций на этих токенах */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}