/* ─────────────────────────────────────────────────────────────
   tokens.css - Progress One landing
   Джерело: Figma / Progress One - Website Drafts
            3fdqVM8T7lXJRT9TywyWwr · page 277:96

   --po-color-* повторюють імена змінних, оголошених у Figma.
   Решта - літеральні значення, зняті з нод; імена додані тут,
   бо у Figma вони живуть як raw hex.

   Figma - джерело правди. Розійшлись значення - правити у Figma
   і перегенерувати цей файл.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Figma variables ─────────────────────────────────────── */
  --po-color-bg-canvas:       #ffffff;
  --po-color-text-default:    #333333;
  --po-color-text-brand:      #1261de;
  --po-color-text-secondary:  rgba(51, 51, 51, 0.68);
  --po-color-border-default:  rgba(18, 97, 222, 0.16);
  --po-color-bg-brand:        #1261de;
  /* Кнопка в шапці - дія другорядна, тож м'яка заливка замість суцільної
     синьої: насичена плашка була єдиною повністю насиченою фігурою в
     композиції й перетягувала увагу з заголовка. Суцільний бренд
     лишається за головними кнопками всередині сторінок. */
  --po-color-bg-brand-soft:       rgba(18, 97, 222, 0.1);
  --po-color-bg-brand-soft-hover: rgba(18, 97, 222, 0.16);
  --po-color-bg-tint:         rgba(65, 204, 254, 0.0784);
  /* Єдиний червоний на сайті - тільки для помилок форми. Приглушений,
     щоб не сперечатися з брендовим синім у тій самій картці. */
  --po-color-text-error:      #c0293c;
  --po-color-border-error:    rgba(192, 41, 60, 0.55);
  --po-color-accent:          #41ccfe;

  /* Радіуси: по одному значенню на роль, замість дев'яти випадкових.
     Раніше картки мали 20/22/24/30, і різниця нічого не означала. */
  --po-radius-tile:      2.2rem;   /* дрібна плитка з іконкою */
  --po-radius-panel:     2rem;     /* інформаційна панель */
  --po-radius-card:      3rem;     /* картка форми */
  --po-radius-pill:      9999px;
  --po-radius-tile-sm:   1.4rem;
  --po-radius-panel-sm:  1.8rem;
  --po-radius-card-sm:   2.2rem;

  /* ── Ink ─────────────────────────────────────────────────── */
  --po-ink-900:      #212429;  /* 03/04 заголовки моментів */
  --po-ink-880:      #242426;  /* 03 заголовок секції */
  --po-ink-860:      #252629;  /* 06 заголовок і кроки */
  --po-ink-840:      #292929;  /* 02 заголовок і лід */
  --po-ink-800:      #292b30;  /* 03 підводка */
  --po-ink-600:      #4f545c;  /* 06 інтро */
  --po-ink-560:      #575c66;  /* 04 інтро */
  --po-ink-540:      #5c616b;  /* 04 нотатка галереї */
  --po-ink-520:      #5e636b;  /* 02 деталь */
  --po-ink-field:    rgba(41, 43, 48, 0.76);  /* лейбли форми */

  /* ── Blue ────────────────────────────────────────────────── */
  --po-blue-600:     #055ce5;  /* 03 акцент */
  --po-blue-580:     #075dec;  /* 06 індекси кроків */
  --po-blue-560:     #095deb;  /* 03/04 індекси й акценти */
  --po-blue-540:     #0e5de3;  /* 02 акцент */
  --po-blue-520:     #1261de;  /* бренд */
  --po-blue-500:     #1769e5;  /* 05 мікро-лінійка */

  /* ── Cyan / світле на темному ────────────────────────────── */
  --po-cyan-300:     #59e5ff;  /* 04 лейбли на темному */
  --po-cyan-320:     #52e5ff;  /* 04 метрики */
  --po-ice-200:      #d4edff;  /* 04 тіло «what we built» */
  --po-ice-300:      #c7e5ff;  /* 04 підписи метрик */

  /* ── Поверхні ────────────────────────────────────────────── */
  --po-surface-form:        #f9fcff;
  --po-surface-form-border: #d1e8fa;
  --po-surface-tile:        #f6fcff;
  --po-surface-tile-border: #b8e3ff;

  /* ── Градієнти ───────────────────────────────────────────── */
  /* Симетрично: білий на обох краях, найгустіше посередині. Раніше було
     білий → насичений зліва направо, і на повну ширину вікна це читалось
     як два різні краї однієї смуги. */
  --po-grad-trust:
    linear-gradient(90deg, #ffffff 0%, #f0faff 26%, #e5f5ff 50%, #f0faff 74%, #ffffff 100%);

  --po-grad-signal:
    linear-gradient(90deg, var(--po-blue-560) 0%,
                    rgba(5, 194, 224, 0.7) 62%,
                    rgba(191, 240, 255, 0) 100%);

  --po-grad-micro-rule:
    linear-gradient(90deg, var(--po-blue-500) 0%,
                    rgba(20, 191, 235, 0.84) 58%,
                    rgba(184, 242, 255, 0) 100%);

  --po-grad-sim-card:
    linear-gradient(104.259deg, #031226 0%, #052b4f 58%, #054f78 100%);

  --po-grad-video-card:
    linear-gradient(98.781deg, #051a30 0%, #054073 62%, #057aad 100%);

  --po-grad-footer:
    linear-gradient(180deg,
      #ffffff 0%,  #ffffff 14%, #f9fdff 26%, #edf8ff 38%,
      #d8ecff 49%, #bbd9fc 58%, #94bff4 65%, #6da4e8 71%,
      #4b86dc 76%, #326cd0 81%, #2358bb 86%, #153e93 92%, #061c6b 100%);

  /* Підвал внутрішніх сторінок. Окрема рампа, а не --po-grad-footer, бо
     геометрія інша: на лендингу поле згасання висить у порожній нижній
     частині секції, а тут воно обмежене самим підвалом, і текст стоїть
     вище над нижнім краєм. Та сама рампа дала б під логотипом #81b2ee
     замість лендингових #5891e0 - білий текст на такому фоні пливе.

     Зупинки прив'язані до виміряних позицій рядків усередині підвалу:
     логотип і меню починаються на 64.8% його висоти, пошта з телефоном
     на 78.4%, копірайт на 86%. У цих трьох точках стоять рівно ті
     кольори, що й під тими самими рядками на лендингу - #4984db,
     #2154b4, #13398d. Верх лишається білим, тож шва з білою сторінкою
     немає.

     Міняти висоту .doc-footer без перезаміру цих точок не можна:
     відсотки прив'язані до неї, і текст поїде на світліше. */
  --po-grad-footer-page:
    linear-gradient(180deg,
      #ffffff  0%, #ffffff 10%, #f2f9ff 22%, #d9eaff 34%,
      #b3d2f9 45%, #7fb0ec 55%, #5c93e1 62%, #4984db 66%,
      #3568c8 72%, #2154b4 78%, #13398d 86%, #061c6b 100%);

  --po-grad-footer-divider:
    linear-gradient(90deg,
      rgba(51, 209, 255, 0)    0%,
      rgba(51, 209, 255, 0.34) 12%,
      rgba(255, 255, 255, 0.82) 50%,
      rgba(51, 209, 255, 0.34) 88%,
      rgba(51, 209, 255, 0)    100%);

  /* ── Тіні ────────────────────────────────────────────────── */
  --po-shadow-form:       0 1.4rem 3.4rem 0 rgba(5, 51, 158, 0.08);
  --po-shadow-cta:        0 0.8rem 1.8rem 0 rgba(5, 51, 158, 0.14);
  --po-shadow-tile:       0 1rem 2.4rem 0 rgba(5, 92, 191, 0.08);
  /* Знімки й відео кейсу підіймаються однаково: раніше в однієї пари
     була рамка й одна тінь, у сусідньої - ні рамки й інша тінь. */
  /* Дві темні ілюстрації форматів - рівня пари, тож одна обводка й одна
     тінь на обох. Раніше різнились радіусом, альфою обводки і тінню,
     і жодна з різниць нічого не означала: усе це побічний ефект того,
     що внутрішні розміри карток задані в em. */
  --po-color-border-artwork: rgba(26, 197, 241, 0.52);
  --po-shadow-artwork:       0 2.4rem 4.6rem -0.8rem rgba(4, 46, 107, 0.26);
  --po-shadow-media:       0 1.6rem 3rem 0 rgba(5, 56, 140, 0.12);
  --po-shadow-media-hover: 0 2.5rem 4.4rem 0 rgba(5, 56, 140, 0.2);

  /* ── Типографіка ─────────────────────────────────────────── */
  /* SF Pro з макета не ліцензується для вебу. Замість нього - Geist:
     той самий гротеск-рід, що й SF Pro, з таким самим стриманим
     характером на великих кеглях, але вільний і покладений локально.
     Свідомо без -apple-system у стеку: шрифт має бути один для всіх,
     інакше переноси рядків розходяться між платформами. */
  --po-font: "Geist", "Segoe UI", system-ui, sans-serif;

  /* SF Pro: Regular 400 · Medium 510 · Semibold 590.
     Для замінників (Inter/Segoe UI) 510/590 лягають на 500/600. */
  --po-weight-regular:  400;
  --po-weight-medium:   510;
  --po-weight-semibold: 590;
}