/* ============================================================
   DUTCHIFIED — DESIGN TOKENS  (source-of-truth)
   Значения взяты из реального index.html сайта.
   Подключайте этот файл первым.
   ============================================================ */

:root {
  /* ---------- COLOR — Brand ---------- */
  --color-primary:           #ff4500;  /* PRIMARY, она же surface-tint */
  --color-primary-hover:     #e63d00;
  --color-primary-fixed-dim: #ffb5a0;  /* подсветка ссылок на тёмном фоне */
  --color-outline-variant:   #e7bdb2;  /* тёплая «персиковая» обводка    */

  --color-tertiary:          #005daa;  /* Telegram-синий / акцент-2     */
  --color-tertiary-2:        #2AABEE;  /* Telegram light                */
  --color-tertiary-3:        #229ED9;  /* Telegram darker — для grad'ов */

  /* ---------- COLOR — Surfaces (тёплая нейтральная шкала) ---------- */
  --color-surface:                 #fbf9f8;  /* = background              */
  --color-surface-bright:          #fbf9f8;
  --color-surface-container-lowest:#ffffff;
  --color-surface-container-low:   #f6f3f2;
  --color-surface-container:       #f0eded;
  --color-surface-container-high:  #eae7e7;
  --color-surface-variant:         #e4e2e1;
  --color-surface-dim:             #dcd9d9;

  /* ---------- COLOR — Ink / Text ---------- */
  --color-text:        #1b1c1c;   /* on-background, on-surface         */
  --color-muted:       #5d4038;   /* on-surface-variant — тёплый       */
  --color-outline:     #926f66;   /* hairline на сером                  */
  --color-inverse:     #303030;   /* inverse-surface                    */
  --color-on-primary:  #ffffff;

  /* ---------- COLOR — Glass ---------- */
  --color-glass-bg:     rgba(255,255,255,0.70);
  --color-glass-bg-60:  rgba(255,255,255,0.60);
  --color-glass-bg-40:  rgba(255,255,255,0.40);
  --color-glass-border: rgba(255,255,255,1);
  --color-glass-inset:  rgba(255,255,255,0.5);

  /* ---------- COLOR — Atmospheric blobs ---------- */
  --color-blob-orange: rgba(255, 69, 0, 0.20);
  --color-blob-cyan:   rgba(0, 229, 255, 0.15);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Space Grotesk", sans-serif;
  --font-body:    "Hanken Grotesk", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Из tailwind.config.fontSize — точные значения */
  /* size / line-height / letter-spacing / weight */
  --text-headline-xl:        64px;  /* 1.1 / -0.04em / 700 */
  --text-headline-xl-hero:   72px;  /* как в hero h1, mobile -> 4xl */
  --text-headline-lg:        48px;  /* 1.2 / -0.02em / 600 */
  --text-headline-lg-mobile: 32px;  /* 1.2 / -0.01em / 600 */
  --text-headline-md:        24px;  /* 1.3 / 500           */
  --text-body-lg:            18px;  /* 1.6 / 400           */
  --text-body-md:            16px;  /* 1.5 / 400           */
  --text-label-md:           14px;  /* 1.4 / 0.05em / 600  */
  --text-xs:                 12px;

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.3;
  --leading-base:    1.5;
  --leading-relaxed: 1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --tracking-tightest: -0.05em;  /* hero h1                         */
  --tracking-tighter:  -0.04em;  /* headline-xl                     */
  --tracking-tight:    -0.02em;  /* headline-lg                     */
  --tracking-tight-1:  -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;   /* label-md                        */
  --tracking-caps:     0.10em;   /* eyebrow                         */
  --tracking-caps-2:   0.20em;   /* method summary                  */

  /* ---------- SPACING (из tailwind config) ---------- */
  --space-unit:     8px;    /* базовая единица                       */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;   /* = gutter                              */
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;   /* = container-padding-desktop           */
  --space-24:       96px;
  --space-30:      120px;   /* = section-gap                         */

  --gutter:                 32px;
  --section-gap:           120px;
  --container-pad-desktop:  80px;
  --container-pad-mobile:   24px;

  /* ---------- RADIUS ---------- */
  --radius-sm:         4px;   /* tailwind DEFAULT 0.25rem            */
  --radius-md:         8px;   /* tailwind lg     0.5rem              */
  --radius-lg:         12px;  /* tailwind xl     0.75rem             */
  --radius-xl:         24px;  /* glass-card-sm                       */
  --radius-2xl:        32px;
  --radius-3xl:        40px;  /* glass-card                          */
  --radius-pill:       9999px;

  /* ---------- SHADOW ---------- */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 8px 24px rgba(0,0,0,0.05);
  --shadow-lg:     0 24px 48px -12px rgba(0,0,0,0.05);
  --shadow-xl:     0 32px 80px rgba(42,171,238,0.15);
  --shadow-glass-inset: inset 0 0 0 1px rgba(255,255,255,0.5);
  --shadow-glass:  inset 0 0 0 1px rgba(255,255,255,0.5),
                   0 24px 48px -12px rgba(0,0,0,0.05);
  --shadow-primary:       0 8px 24px rgba(255, 69, 0, 0.30);
  --shadow-primary-hover: 0 12px 32px rgba(255, 69, 0, 0.50);
  --shadow-tg:            0 0 20px rgba(42,171,238,0.40);
  --shadow-tg-hover:      0 0 30px rgba(42,171,238,0.60);
  --shadow-focus:         0 0 0 3px rgba(255, 69, 0, 0.30);

  /* ---------- LAYOUT ---------- */
  --container-max: 80rem;  /* tailwind max-w-7xl = 1280px            */

  /* ---------- MOTION ---------- */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* stagger-enter */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 800ms;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

p     { margin: 0; }
a     { color: inherit; text-decoration: none; }
img   { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }

::selection { background: var(--color-primary); color: #fff; }

/* ============================================================
   ATMOSPHERIC BACKGROUND BLOBS — фон страницы
   .ds-blobs                    — базовый вариант (cyan + orange)
   .ds-blobs.ds-blobs--warm     — «тёплый»: 3 оранжевых blob'а разных оттенков.
                                   Использовать на статьях/лэндингах без cyan-акцента.
   ============================================================ */
.ds-blobs {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ds-blob {
  position: absolute;
  filter: blur(120px);
}
.ds-blob--cyan {
  top: -10%; left: -10%;
  width: 1000px; height: 1000px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  background: radial-gradient(circle, var(--color-blob-cyan) 0%, rgba(0,229,255,0) 70%);
  opacity: 0.4;
  animation: ds-float 20s infinite ease-in-out alternate;
}
.ds-blob--orange {
  bottom: -10%; right: -10%;
  width: 1200px; height: 1200px;
  border-radius: 60% 40% 30% 70% / 50% 60% 50% 40%;
  background: radial-gradient(circle, var(--color-blob-orange) 0%, rgba(255,69,0,0) 70%);
  filter: blur(140px);
  opacity: 0.5;
  animation: ds-float 25s infinite ease-in-out alternate-reverse;
}

/* Warm-вариант: добавляет два дополнительных оранжевых blob'а */
.ds-blob--orange-2 {
  top: 10%; left: -8%;
  width: 700px; height: 700px;
  border-radius: 50% 60% 40% 70% / 60% 40% 50% 50%;
  background: radial-gradient(circle, rgba(255,140,80,0.22) 0%, rgba(255,140,80,0) 70%);
  filter: blur(130px);
  opacity: 0.55;
  animation: ds-float 32s infinite ease-in-out alternate;
}
.ds-blob--orange-3 {
  top: 45%; right: -5%;
  width: 500px; height: 500px;
  border-radius: 70% 30% 60% 40% / 40% 70% 30% 60%;
  background: radial-gradient(circle, rgba(255,90,40,0.18) 0%, rgba(255,90,40,0) 70%);
  filter: blur(110px);
  opacity: 0.5;
  animation: ds-float-2 28s infinite ease-in-out alternate-reverse;
}
@keyframes ds-float {
  0%   { transform: translate(0, 0)      scale(1)   rotate(0deg);   }
  50%  { transform: translate(50px,25px) scale(1.1) rotate(90deg);  }
  100% { transform: translate(-25px,-50px) scale(1) rotate(180deg); }
}
@keyframes ds-float-2 {
  0%   { transform: translate(0, 0)        scale(1)    rotate(0deg);    }
  50%  { transform: translate(-40px, 60px) scale(1.15) rotate(-120deg); }
  100% { transform: translate(60px, -30px) scale(0.95) rotate(-240deg); }
}

/* ============================================================
   STAGGER ENTER (появление секций при скролле)
   Используется вместе с IntersectionObserver:
     .stagger-enter.is-visible { ... }
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .stagger-enter {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out-soft),
                transform var(--duration-slow) var(--ease-out-soft);
  }
  .stagger-enter.is-visible { opacity: 1; transform: translateY(0); }
  .delay-100 { transition-delay: 100ms; }
  .delay-200 { transition-delay: 200ms; }
  .delay-300 { transition-delay: 300ms; }
  .delay-400 { transition-delay: 400ms; }
}