/* ============================================================
   NextGen Academy — Design Tokens
   Source: Figma "Презентация Мария Султанова"
   Canvas: Запуск "тест-драйв профессии ОНЛАЙН-АССИСТЕНТ"
   Format: 1080×1080px (Instagram square)
   Extracted: 2026-06-21 via Figma REST API

   Статус токенов:
   ✅ подтверждено из API    🔲 заполнить вручную из Figma
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     ЦВЕТА
  ---------------------------------------------------------- */

  /* Основная палитра */
  --color-bg:          #0D0D0D;   /* ✅ фон всех слайдов (r=0.05 g=0.05 b=0.05) */
  --color-text:        #FFFFFF;   /* ✅ весь текст — белый */
  --color-text-muted:  rgba(255, 255, 255, 0.60); /* ✅ overlay opacity 0.6 */
  --color-overlay:     rgba(13, 13, 13, 0.60);    /* ✅ фон-оверлей поверх фото */

  /* Акцентный градиент на заголовках (Unbounded) ✅ подтверждён из Figma */
  --color-accent-1: #F2A24D;  /* ✅ gradient stop 3%  — светлый янтарь */
  --color-accent-2: #FE8A10;  /* ✅ gradient stop 35% — оранжевый */
  --color-accent-3: #CB6F0E;  /* ✅ gradient stop 97% — тёмный янтарь */

  --gradient-heading: linear-gradient(
    to right,
    #F2A24D 3%,
    #FE8A10 35%,
    #CB6F0E 97%
  );

  /* Нейтральная шкала */
  --color-900: #0D0D0D;  /* ✅ */
  --color-800: #1A1A1A;
  --color-700: #262626;
  --color-600: #333333;
  --color-100: #FFFFFF;  /* ✅ */
  --color-050: rgba(255, 255, 255, 0.08);


  /* ----------------------------------------------------------
     ТИПОГРАФИКА
  ---------------------------------------------------------- */

  /* Два шрифта — оба подтверждены из API */
  --font-display: 'Unbounded', sans-serif;     /* ✅ заголовки слайдов */
  --font-body:    'SF Pro Display', system-ui, -apple-system, sans-serif; /* ✅ описания */

  /* ---- Heading (Unbounded) ✅ все параметры подтверждены ---- */
  --heading-font-family:    var(--font-display);
  --heading-font-size:      64px;        /* ✅ "ЗА 4 УРОКА ВЫ", "ПРОГРАММА ПРАКТИКУМА" */
  --heading-font-weight:    700;         /* ✅ Bold */
  --heading-line-height:    1.2;         /* ✅ 76.8px / 64px = 1.2 */
  --heading-letter-spacing: -0.01em;     /* ✅ -0.64px / 64px */
  --heading-text-transform: uppercase;   /* ✅ все заголовки — UPPERCASE */
  --heading-text-align:     left;        /* ✅ */

  /* ---- Body (SF Pro Display) ✅ подтверждено ---- */
  --body-font-family:    var(--font-body);
  --body-font-size:      40px;           /* ✅ "Я поработала почти во всех ролях..." */
  --body-font-weight-md: 500;            /* ✅ Medium */
  --body-font-weight-sb: 600;            /* ✅ SemiBold */
  --body-line-height:    1.1;            /* ✅ 44px / 40px = 1.1 */
  --body-letter-spacing: 0;              /* ✅ */
  --body-text-align:     left;           /* ✅ */

  /* ---- Типографическая шкала (от подтверждённых значений) ---- */
  --text-xs:   18px;
  --text-sm:   24px;
  --text-md:   32px;
  --text-body: 40px;   /* ✅ SF Pro Display body */
  --text-lg:   48px;
  --text-xl:   64px;   /* ✅ Unbounded heading */
  --text-2xl:  80px;


  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */

  /* Базовый шаг — 8px, подтверждённый токен — 30px (auto-layout gap) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  30px;   /* ✅ itemSpacing Frame 1 auto-layout */
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 120px;

  /* Алиасы */
  --gap:         var(--space-7);  /* ✅ 30px — основной gap */
  --gap-section: var(--space-11); /* между секциями */


  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-image: 20px;  /* ✅ image cards (image 99/100/101) cornerRadius=20 */
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* Apple-style corner smoothing = 0.6 применяется на image-картах.
     В CSS нет прямого аналога, но можно использовать squircle-полифил
     или border-radius: var(--radius-image) / 1.1 для приближения. */


  /* ----------------------------------------------------------
     SHADOWS
     Не обнаружены в Figma-файле на исследованных узлах.
     Добавь вручную если есть на компонентах.
  ---------------------------------------------------------- */

  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.60);


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --canvas:    1080px;  /* ✅ формат Instagram-слайдов */
  --direction: column;  /* ✅ auto-layout direction: VERTICAL */

}


/* ----------------------------------------------------------
   Google Fonts import — добавь в <head>:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@700&display=swap" rel="stylesheet">

   SF Pro Display — системный шрифт Apple.
   Для cross-platform используй: 'SF Pro Display', system-ui, -apple-system, sans-serif
   Или замени на Inter / Manrope для веба.
---------------------------------------------------------- */