/* Sweet Apple — файл значений оформления, редакция 2 (18.08 вечер).
   После слова владельца «красота 1/10, смотри наши шаблоны»: язык взят от
   концептов obsidian/pixel — тёмный обсидиан, мятный неон нашего логотипа,
   гигантская типографика, хромовый градиент, моно-подписи. Кадры товара
   живут на белых «островах» — они белофонные и должны сиять.
   ЕДИНСТВЕННОЕ место с цифрами цветов; страницы берут только имена. */

:root {
  /* — сцена: тёмный обсидиан с зелёным дыханием — */
  --c-bg:        #070B09;   /* фон страницы */
  --c-bg-2:      #0B120E;   /* чуть светлее: полосы, шапка */
  --c-card:      #101814;   /* тёмная карточка */
  --c-card-2:    #0C1310;   /* низ градиента карточки */
  --c-line:      #1D2A23;   /* линии */
  --c-line-2:    #2C3E33;   /* линии заметнее / ховер */

  /* — свет: белые острова для кадров товара — */
  --c-ostrov:    #FFFFFF;   /* подложка фото — кадры белофонные */
  --c-ostrov-2:  #F4F7F5;   /* ступень острова */

  /* — текст — */
  --c-ink:       #EDF6F1;   /* основной на тёмном */
  --c-ink-2:     #9FB3A9;   /* второй план */
  --c-ink-3:     #5F7A6D;   /* моно-подписи, даты */
  --c-na-ostrove:#101814;   /* текст на белом острове */

  /* — мята логотипа: неон-акцент — */
  --c-mint:      #6FE8B7;   /* акцент, цены, наличие */
  --c-mint-2:    #35B583;   /* приглушённая мята, рамки */
  --c-mint-glow: rgba(111, 232, 183, .38);  /* свечение */
  --c-mint-wash: rgba(111, 232, 183, .10);  /* мятая подложка */

  /* — хром для гигантских букв — */
  --grad-chrome: linear-gradient(115deg, #3A3A42 0%, #D9D9E4 22%, #787882 38%,
                 #F4F4FA 50%, #6E6E78 62%, #CFCFDA 80%, #404048 100%);
  --grad-card:   linear-gradient(165deg, var(--c-card), var(--c-card-2));

  /* — служебные — */
  --c-danger:    #E24B4A;
  --c-focus:     #6FE8B7;

  /* — буквы — */
  --font: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-gigant: "Unbounded", "Golos Text", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;
  --fs-17: 17px;  --fs-20: 20px;  --fs-26: 26px;  --fs-34: 34px;  --fs-44: 44px;
  --fs-gigant:   clamp(44px, 9vw, 132px);   /* гиганты разделов */
  /* ⛔ НИЖНИЙ УПОР — 28px, А НЕ 40. На 40 самое длинное слово заголовка («Премиальная») выходит
     402,47 точки при экране 375, то есть срезается на 43,47 — а `overflow: hidden` у героя
     прячет обрез молча (замер 26.08 живьём, 375×812). Средний член включается только с 431 px,
     значит на телефонах работает ровно этот упор. */
  --fs-hero:     clamp(28px, 6.5vw, 92px);  /* главный заголовок */
  --lh-tight: .92; --lh-text: 1.55;
  --w-reg: 400; --w-mid: 500; --w-strong: 600; --w-black: 800;
  --track-tight: -0.04em; --track-mono: .16em;

  /* — отступы — */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 84px;

  /* — скругления — */
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;

  /* — тени и свечения — */
  --shadow-soft:  0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
  --shadow-press: inset 0 0 0 1.5px var(--c-mint);
  --glow-mint:    0 0 22px var(--c-mint-glow);

  /* — рамка страницы и решётка — */
  --w-page: 1220px;
  --gap-grid: 14px;

  /* — движение — */
  --t-fast: 150ms ease;
  --t-soft: 380ms cubic-bezier(.2, .7, .2, 1);

  /* — телефон: закреплённая полоса покупки — */
  --buybar-h: 64px;
}

/* Светлое полотно: каталожные страницы и светлые секции. Кадры товара белофонные —
   на полотне они бесшовны, без подложек и границ. Включается классом на body или секции. */
.svetlo {
  --c-bg:        #F5F7F6;
  --c-bg-2:      #EDF1EF;
  --c-card:      #FFFFFF;
  --c-card-2:    #FAFCFB;
  --c-line:      #E2E8E4;
  --c-line-2:    #C7D3CC;
  --c-ink:       #0B100E;
  --c-ink-2:     #4E5D56;
  --c-ink-3:     #7E8C85;
  --c-na-ostrove:#FFFFFF;
  --c-mint:      #0E8A5F;
  --c-mint-2:    #35B583;
  --c-mint-glow: rgba(14, 138, 95, .22);
  --c-mint-wash: rgba(14, 138, 95, .07);
  --c-ostrov:    #FFFFFF;
  --c-ostrov-2:  #F1F4F2;
  --grad-chrome: linear-gradient(115deg, #101315 0%, #5A5F66 24%, #23262B 42%,
                 #7F858E 55%, #1A1D21 70%, #4A4F57 86%, #101315 100%);
  --grad-card:   linear-gradient(165deg, var(--c-card), var(--c-card-2));
  --shadow-soft: 0 1px 2px rgba(11, 16, 14, .05), 0 16px 40px rgba(11, 16, 14, .08);
  background: var(--c-bg);
  color: var(--c-ink);
}