/* ==========================================================================
   Токени — знято з Figma «01 · Design System» (node 33:2)
   Не редагувати вручну без звірки з макетом.
   ========================================================================== */

:root {
  /* --- Brand / green ------------------------------------------------- */
  --c-green-950: #0A1F14;
  --c-green-900: #10291B;
  --c-green-800: #17402B;
  --c-green-700: #1F5637;
  --c-green-600: #2A7A4B;
  --c-green-500: #3A9A61;
  --c-green-300: #7CC496;
  --c-green-100: #DCEEE2;

  /* --- Sand ----------------------------------------------------------- */
  --c-sand-50:  #FCFAF5;
  --c-sand-100: #F4EFE4;
  --c-sand-200: #EAE2D2;
  --c-sand-300: #D9CEB8;
  --c-sand-400: #BFB299;

  /* --- Accent / amber -------------------------------------------------- */
  --c-amber-500: #D99A2B;
  --c-amber-400: #E8B44C;
  --c-amber-100: #F7E9C9;

  /* --- Surface --------------------------------------------------------- */
  --s-light:         #FCFAF5;
  --s-light-alt:     #F4EFE4;
  --s-card:          #FFFFFF;
  --s-card-alt:      #F8F4EA;
  --s-dark:          #10291B;
  --s-dark-alt:      #0A1F14;
  --s-dark-elevated: #1A3A27;

  /* --- Text ------------------------------------------------------------ */
  --t-primary:           #12241A;
  --t-secondary:         #4E5F54;
  --t-muted:             #7C8A80;
  --t-on-dark:           #F5F1E8;
  --t-on-dark-secondary: #C3D2C7;
  --t-on-dark-muted:     #8FA396;
  --t-accent:            #E8B44C;
  --t-link:              #2A7A4B;

  /* --- Border ---------------------------------------------------------- */
  --b-light:        #E4DBC9;
  --b-light-strong: #CFC3AC;
  --b-dark:         #26452F;
  --b-dark-strong:  #3C6A4C;
  --b-focus:        #3A9A61;

  /* --- Semantic -------------------------------------------------------- */
  --sem-success:       #2A7A4B;
  --sem-warning:       #D99A2B;
  --sem-error:         #C0453B;
  --sem-error-bg:      #FBEAE8;
  --sem-info:          #2E6F8E;
  --sem-disabled-bg:   #E7E3DA;
  --sem-disabled-text: #A6ADA5;

  /* --- Typography families --------------------------------------------- */
  --f-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Type ramp (Figma «Type ramp» 33:255) -----------------------------
     Кегль / інтерліньяж / трекінг — 1:1 із застосованих стилів макета.
     Гарнітура — за колонкою spec: Manrope (заголовки), Inter (текст). */
  --ty-display: 800 76px/0.98 var(--f-display);   --tr-display: -2.736px;
  --ty-h1:      800 62px/1.02 var(--f-display);   --tr-h1:      -1.86px;
  --ty-h2:      800 46px/1.08 var(--f-display);   --tr-h2:      -1.104px;
  --ty-h3:      700 32px/1.16 var(--f-display);   --tr-h3:      -0.512px;
  --ty-h4:      700 24px/1.26 var(--f-display);   --tr-h4:      -0.264px;
  --ty-h5:      600 20px/1.32 var(--f-display);   --tr-h5:      -0.12px;
  --ty-stat:    800 48px/0.96 var(--f-display);   --tr-stat:    -1.44px;
  --ty-lead:    400 20px/1.66 var(--f-body);      --tr-lead:    -0.1px;
  --ty-body-l:  400 18px/1.68 var(--f-body);      --tr-body-l:  -0.072px;
  --ty-body-m:  400 16.5px/1.68 var(--f-body);    --tr-body-m:  -0.066px;
  --ty-body-s:  400 16px/1.66 var(--f-body);      --tr-body-s:  -0.032px;
  --ty-caption: 400 14px/1.54 var(--f-body);      --tr-caption: 0;
  --ty-label:   600 14px/1.4 var(--f-body);       --tr-label:   0;
  --ty-thead:   600 13px/1.32 var(--f-body);      --tr-thead:   0.26px;
  --ty-btn:     600 16px/1.2 var(--f-body);       --tr-btn:     -0.032px;
  --ty-btn-l:   600 17px/1.2 var(--f-body);       --tr-btn-l:   -0.034px;
  --ty-eyebrow: 600 12.5px/1.2 var(--f-body);     --tr-eyebrow: 1.125px;
  --ty-badge:   600 12px/1.2 var(--f-body);       --tr-badge:   0.48px;

  /* --- Spacing scale (Figma «Spacing scale» 34:38) ---------------------- */
  --sp-2: 2px;   --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;
  --sp-96: 96px; --sp-120: 120px;

  /* --- Radius (Figma 34:85) -------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* --- Elevation (Figma 34:107) ---------------------------------------- */
  --e-01: 0 1px 2px 0 rgba(18, 36, 26, .04), 0 8px 24px -4px rgba(18, 36, 26, .07);
  --e-02: 0 2px 4px 0 rgba(18, 36, 26, .05), 0 18px 42px -8px rgba(18, 36, 26, .13);
  --e-03: 0 12px 36px -6px rgba(10, 31, 20, .18);
  --e-04: 0 6px 24px -6px rgba(10, 31, 20, .14);

  /* --- Grid (Figma «Grid spec» 34:5) ------------------------------------ */
  --grid-max: 1200px;      /* контейнер */
  --grid-gutter: 24px;     /* міжколонник */
  --grid-margin: 120px;    /* поля на 1440 */
  --grid-cols: 12;

  /* --- Header ------------------------------------------------------------ */
  --header-h: 88px;        /* over-hero */
  --header-h-solid: 76px;  /* на внутрішніх сторінках */

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .16s;
  --dur: .24s;
  --dur-slow: .4s;
}

/* Адаптивні поля контейнера. Планшет/мобільний макетів у Figma немає —
   борди «04 · Tablet 768» і «05 · Mobile 390» порожні (позначені «наступний етап»),
   тож брейкпойнти нижче — авторська адаптація за узгодженням із замовником. */
@media (max-width: 1279px) { :root { --grid-margin: 48px; } }
@media (max-width: 1023px) { :root { --grid-margin: 32px; --header-h: 72px; --header-h-solid: 68px; } }
@media (max-width: 767px)  { :root { --grid-margin: 20px; --header-h: 64px; --header-h-solid: 64px; } }