/* REDLOFT — styles.css (handoff: все токены инлайнированы из tokens/*) */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   REDLOFT — fonts.css
   Onest (variable grotesque) — display + body, one family.
   Loaded from Google Fonts CDN. NOTE: no local binaries shipped —
   see README "Font substitution" if you need self-hosted woff2.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   REDLOFT — colors.css · единый источник правды по цвету
   Правило: тёплая нейтральная база + красный ТОЧЕЧНО ≤10% +
   эвкалипт как вторичный голос. Light + dark (body.dark).
   ============================================================ */

:root{
  /* ── Нейтральная база (light) ── */
  --bg:#FAF8F5;          /* тёплый белый — основной фон */
  --pure:#FFFFFF;        /* чистая поверхность (карточки) */
  --cream:#F5F0E8;       /* кремовая секция */
  --sand:#E6E5E1;        /* десатурированный тёпло-серый — канвас-фон */
  --text:#1A1714;        /* warm-black — основной текст */
  --muted:#6B645C;       /* приглушённый текст */
  --line:#E4DED4;        /* линии / границы */
  --dark:#1A1512;        /* тёмные loft-секции */
  --dark-text:#F3EEE6;   /* текст на тёмном */

  /* ── Акцент: красный/терракота — ТОЧЕЧНО (CTA, 1–2 слова, финал) ── */
  --accent:#E2562E;      /* терракота */
  --warm:#F05633;        /* коралл (hover / градиенты) */
  --soft:#FBEDE9;        /* мягкая подложка акцента */

  /* ── Эвкалипт — спокойный вторичный голос (киккеры, бейджи, sage-полоса) ── */
  --sage:#4F7A66;
  --sage-soft:#E9F1EC;
  --sage-line:#D3E1D7;

  /* ── Fire-палитра (финал / CTA / огонь) — одинакова в обеих темах ── */
  --fire-amber:#FFC24B;
  --fire-orange:#F0833A;
  --fire-terra:#D9482A;
  --fire-red:#8B1A0A;
  --fire-ink:#140705;

  /* ── Семантика статусов ── */
  --success:#4C9E3F;
  --danger:#E45C45;

  /* ── Алиасы Tailwind-стиля (для будущего Next) ── */
  --color-accent:var(--accent);
  --color-bg:var(--bg);
  --color-text:var(--text);
}

/* ── Тёмная тема: глубокий графит (холодные нейтралы, без коричневого) ── */
body.dark{
  --bg:#15171A;          /* глубокий графит — основной фон */
  --pure:#1D2024;        /* поверхность карточек */
  --cream:#191C20;       /* секция-подложка */
  --sand:#24282D;        /* третий нейтрал / канвас */
  --text:#ECEEF1;        /* холодный почти-белый */
  --muted:#9BA1A8;       /* приглушённый холодный серый */
  --line:#2D3338;        /* линии / границы */
  --dark:#0C0E10;        /* самые тёмные секции */

  --accent:#F2704E;
  --warm:#F2855E;
  --soft:#22272C;

  --sage:#7FB39A;
  --sage-soft:#234C41;
  --sage-line:#2C3D3A;
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   REDLOFT — typography.css
   Шрифт: Onest (вариативный гротеск), один на дисплей и тело.
   Принцип «крупно» = контраст дисплей↔тело + воздух, НЕ раздувать всё.
   ============================================================ */

:root{
  /* ── Семейства ── */
  --display:'Onest', system-ui, sans-serif;  /* @kind font */
  --sans:'Onest', system-ui, sans-serif;     /* @kind font */

  /* ── Веса ── */
  --fw-regular:400;   /* @kind font */
  --fw-medium:500;    /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:700;      /* @kind font */
  --fw-black:800;     /* @kind font */

  /* ── Типошкала (clamp — fluid) ── */
  --fs-display:clamp(44px, 7.2vw, 108px);  /* @kind font */ /* фуллскрин hero */
  --fs-h1:clamp(40px, 5.5vw, 80px);        /* @kind font */ /* page-hero h1 */
  --fs-h2:clamp(30px, 3.9vw, 54px);        /* @kind font */ /* заголовок секции */
  --fs-h3:clamp(22px, 2.5vw, 32px);        /* @kind font */
  --fs-lead:20px;   /* @kind font */ /* подзаголовок / лид */
  --fs-body:16px;   /* @kind font */ /* тело — дальше НЕ растить */
  --fs-sm:13px;     /* @kind font */
  --fs-xs:11.5px;   /* @kind font */

  /* ── Высота строки ── */
  --lh-display:1.0;   /* @kind font */ /* крупные заголовки */
  --lh-tight:1.04;    /* @kind font */
  --lh-body:1.55;     /* @kind font */ /* тело, мера 60–72ch */

  /* ── Трекинг (оптика) ── */
  --tracking-display:-.03em;  /* @kind font */
  --tracking-h:-.025em;       /* @kind font */
  --tracking-kicker:.12em;    /* @kind font */ /* uppercase киккер */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   REDLOFT — spacing.css · база 8px + радиусы
   Принцип: меньше элементов в ряд — крупнее каждый, больше воздуха.
   ============================================================ */

:root{
  /* ── Spacing (база 8px) ── */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:80px;

  /* ── Ритм макета ── */
  --container:1280px;     /* .wrap max-width */
  --gutter:32px;          /* поля контейнера (моб 20px) */
  --section-y:88px;       /* вертикальный паддинг секции (моб 56px) */
  --card-pad:28px;        /* паддинг карточки */

  /* ── Радиусы (концентрическая гармония, не «пузырьки») ──
     Правило: радиус_внутри ≈ радиус_снаружи − паддинг.
     Мелочь (бейджи, текст-блоки) НЕ делать xl. */
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-xl:32px;
  --radius-pill:999px;
}


/* ===== tokens/elevation.css ===== */
/* ============================================================
   REDLOFT — elevation.css
   Премиальная мягкая глубина: 2 слоя, тёплый тон, negative-spread.
   Элевация ВЫБОРОЧНО — плавают карточки/оверлеи; плоские секции плоские.
   ============================================================ */

:root{
  --shadow-sm:0 1px 2px rgba(26,23,20,.05), 0 4px 10px -2px rgba(26,23,20,.05);
  --shadow-md:0 2px 6px rgba(26,23,20,.05), 0 16px 32px -12px rgba(26,23,20,.13);
  --shadow-lg:0 8px 20px -8px rgba(26,23,20,.12), 0 40px 70px -24px rgba(26,23,20,.20);
}

body.dark{
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 14px 34px rgba(0,0,0,.45);
  --shadow-lg:0 30px 60px rgba(0,0,0,.55);
}


/* ===== tokens/motion.css ===== */
/* ============================================================
   REDLOFT — motion.css · моушн по Emil Kowalski
   UI-анимации <300ms; вход = ease-out; :active scale(.97).
   БЕЗ скролл-джека / тяжёлых scroll-анимаций.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);       /* @kind other */ /* вход элементов */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* @kind other */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* @kind other */ /* drawer / панели */
  --ease:var(--ease-out);                     /* @kind other */ /* legacy-алиас */

  --dur-fast:160ms;     /* @kind other */
  --dur-base:200ms;     /* @kind other */
  --dur-slow:300ms;     /* @kind other */
  --dur-reveal:500ms;   /* @kind other */
}

/* ── Scroll-reveal + stagger (enter = ease-out, тонкий) ── */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
[data-stagger]>*.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important;transition:none}
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   REDLOFT — effects.css · «Запотевший лофт»
   Frosted-стекло (ТОЧЕЧНО, только НАД фактурой/фото) + fire-градиент.
   НЕ применять стекло к контентным секциям на креме.
   ============================================================ */

/* ── Glass-коллекция (утилиты, над фактурой) ── */
.glass--v1{background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.32)}
.glass--v2{background:rgba(250,248,245,.22);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4)}
.glass--v5{background:rgba(255,255,255,.14);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);box-shadow:inset 1px 1px 1px rgba(255,255,255,.6),inset -1px -1px 2px rgba(0,0,0,.15)}

/* ── Fire-градиент (поверхность финального CTA / featured tier) ── */
.fire{position:relative;overflow:hidden;color:#FFF4EC;
  background:radial-gradient(120% 130% at 72% 78%,var(--fire-terra) 0%,transparent 50%),
            radial-gradient(120% 120% at 22% 96%,var(--fire-red) 0%,transparent 55%),
            linear-gradient(135deg,#2A0E07,var(--fire-ink))}
.fire::before{content:"";position:absolute;inset:-30%;z-index:0;
  background:radial-gradient(closest-side at 28% 28%,rgba(255,194,75,.95),transparent 70%),
            radial-gradient(closest-side at 78% 22%,rgba(240,131,58,.9),transparent 70%),
            radial-gradient(closest-side at 62% 82%,rgba(217,72,42,.92),transparent 72%),
            radial-gradient(closest-side at 18% 74%,rgba(139,20,10,.9),transparent 72%);
  filter:blur(46px) saturate(1.15);animation:firemove 16s var(--ease-in-out) infinite alternate}
.fire::after{content:"";position:absolute;inset:-35%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side at 40% 88%,rgba(255,150,40,.85),transparent 66%),
            radial-gradient(closest-side at 70% 70%,rgba(214,58,28,.8),transparent 70%),
            radial-gradient(closest-side at 20% 40%,rgba(255,206,92,.7),transparent 64%),
            radial-gradient(closest-side at 88% 50%,rgba(150,24,12,.85),transparent 72%);
  filter:blur(54px) saturate(1.25);mix-blend-mode:screen;
  animation:lavaflow 13s var(--ease-in-out) infinite alternate, emberpulse 6.5s ease-in-out infinite}
.fire>*{position:relative;z-index:3}
@keyframes firemove{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.13) rotate(4deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.06) rotate(-3deg)}
}
@keyframes lavaflow{
  0%{transform:translate3d(4%,5%,0) scale(1.08) rotate(0deg)}
  50%{transform:translate3d(-5%,-3%,0) scale(1.2) rotate(-5deg)}
  100%{transform:translate3d(3%,-5%,0) scale(1.1) rotate(4deg)}
}
@keyframes emberpulse{0%,100%{opacity:.6}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fire::before,.fire::after{animation:none}
}


/* ===== tokens/base.css ===== */
/* ============================================================
   REDLOFT — base.css · сброс + базовые элементы + хелперы
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .3s,color .3s;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.star{color:var(--accent)}

/* Контейнер */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:600px){.wrap{padding:0 20px}}

/* Focus-ring (a11y, обе темы) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Visually-hidden (для нативных checkbox/radio/switch) */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}