:root {
  /* Base */
  --color-dark: #121211;
  --color-white: #FFFFFF;

  /* Orange (primary brand) */
  --color-orange-500: #C8502A;
  --color-orange-400: #D37355;
  --color-orange-300: #DA8A70;
  --color-orange-200: #E6AF9D;
  --color-orange-100: #EEC9BD;
  --color-orange-50:  #FAEEEA;
  --color-orange-10:  #F9F7F6;

  /* Blue */
  --color-blue-900: #124154;
  --color-blue-500: #2A9BC7;
  --color-blue-200: #9DD1E5;
  --color-blue-100: #BDE0EE;

  /* Grey */
  --color-grey-900: #3E3E3E;
  --color-grey-800: #515151;
  --color-grey-700: #696969;
  --color-grey-600: #878787;
  --color-grey-500: #949494;
  --color-grey-300: #B7B7B7;
  --color-grey-200: #CECECE;
  --color-grey-100: #DEDEDE;
  --color-grey-50:  #F4F4F4;

  /* Shadows */
  --shadow-100: 0 1px 4px 0 rgba(22, 12, 1, 0.05);
  --shadow-200: 0 2px 4px 0 rgba(48, 40, 31, 0.04), 0 2px 4px 0 rgba(22, 12, 1, 0.04);
  --shadow-300: 0 4px 8px 0 rgba(48, 40, 31, 0.02), 0 4px 4px 0 rgba(22, 12, 1, 0.04);

  /* Orange extras (mobile form bg) */
  --color-orange-20: #FBF4F2;

  /* Layout */
  --page-shell-width: 1440px;
  --container-width: 1320px;
  --container-padding: 60px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Section spacing (desktop defaults) */
  --section-px: 60px;
  --section-py-top: 80px;
  --section-py-bot: 100px;
  --section-gap: 60px;
  --card-gap: 24px;
  --card-pad: 24px;

  /* Typography (desktop defaults) */
  --font-h1-size: 56px;   --font-h1-lh: 64px;
  --font-h2-size: 48px;   --font-h2-lh: 56px;
  --font-h5-size: 24px;   --font-h5-lh: 32px;
  --font-h6-size: 24px;   --font-h6-lh: 32px;
  --font-body-size: 15px; --font-body-lh: 24px;
  --font-desc-size: 13px; --font-desc-lh: 18px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Semantic aliases (Stage 1 — pixel-perfect) */
  --color-text-body:    var(--color-grey-900); /* #3E3E3E */
  --color-text-heading: var(--color-dark);     /* #121211 */
  --color-text-muted:   var(--color-grey-800); /* #515151 */
  --color-text-subtle:  var(--color-grey-700); /* #696969 */
  --color-text-placeholder: var(--color-grey-500); /* #949494 */
  --color-text-copyright:   var(--color-grey-300); /* #B7B7B7 */
  --color-text-inverse: var(--color-white);
  --color-accent:       var(--color-orange-500); /* #C8502A */

  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ============================================================
     FLUID TOKENS (Phase 1 — адаптив 1024→1440)
     Лінійна інтерполяція через clamp(min, preferred, max).
     Min = значення на 1024 (і нижче), Max = значення на 1440 (і вище).
     ============================================================ */

  /* Fluid spacing */
  --section-px-fluid:  clamp(20px, 4vw, 60px);   /* 20 @ 500 → 60 @ 1500 */
  --section-py-fluid:  clamp(64px, 7vw, 120px);  /* 64 @ 915 → 120 @ 1714 */
  --card-gap-fluid:    clamp(16px, 1.7vw, 24px); /* 16 @ 941 → 24 @ 1412 */
  --card-pad-fluid:    clamp(16px, 1.7vw, 24px);
  --nav-gap-fluid:     clamp(8px, 1.7vw, 24px);
  --content-gap-fluid: clamp(24px, 3vw, 40px);

  /* Fluid typography */
  --font-h1-fluid:   clamp(36px, 4vw, 56px);    /* 36 @ 900 → 56 @ 1400 */
  --font-h2-fluid:   clamp(28px, 3.4vw, 48px);  /* 28 @ 823 → 48 @ 1411 */
  --font-h3-fluid:   clamp(28px, 2.8vw, 40px);  /* 28 @ 1000 → 40 @ 1428 */
  --font-h5-fluid:   clamp(20px, 1.8vw, 24px);
  --font-h6-fluid:   clamp(18px, 1.5vw, 24px);
  --font-desc-fluid: clamp(18px, 1.7vw, 24px);  /* для описів Montserrat 500 */

  /* Fluid container widths (для auto-fit grid колонок) */
  --col-min:       280px;  /* зручна мінімальна колонка */
  --col-min-wide:  360px;  /* для карточок більшого розміру */
  --col-min-card:  240px;  /* для дрібніших карточок */
}

/* Mobile tokens — tier 375..767 */
@media (max-width: 767px) {
  :root {
    --section-px: 16px;
    --section-py-top: 48px;
    --section-py-bot: 60px;
    --section-gap: 32px;
    --card-gap: 16px;
    --card-pad: 16px;

    --font-h1-size: 32px;  --font-h1-lh: 40px;
    --font-h2-size: 28px;  --font-h2-lh: 34px;
    --font-h5-size: 24px;  --font-h5-lh: 32px;
    --font-h6-size: 18px;  --font-h6-lh: 24px;
    /* body stays 15/24 */
    --font-desc-size: 12px; --font-desc-lh: 16px;
  }
}