/* ============================================================
PFH27 · ТОКЕНЫ И БАЗОВЫЕ СТИЛИ (чистый CSS, без тегов )
В пару к этому файлу:  из конца этого файла.
  Опцию «Подключить jQuery» НЕ включать — MVP на vanilla JS.

  ЗАПАСНОЙ (одним куском): весь этот файл целиком в
  «HTML-код для вставки внутрь HEAD» (поле принимает style+script).

  Источник: docs/pet-food-horizons-design-system/project/tokens/*.css
  Собрано без fonts.css (Inter включается в Настройках сайта → Шрифты)
  и без глобальных резетов base.css (у Tilda свой reset).
============================================================ -->

/* PFH27 COLORS — two brand hues from the logo, everything else is quiet.
   Rule of thumb: 90% neutral surfaces, 8% teal, 2% magenta. */
:root{
/* --- Teal / Cyan (primary, from logo mark) --- */
--teal-50:#EFF9FA;--teal-100:#D6EFF1;--teal-200:#A8DDE2;--teal-300:#6FC5CD;--teal-400:#2FA5B1;--teal-500:#008C9A;--teal-600:#007682;--teal-700:#005E68;--teal-800:#04454C;--teal-900:#062F34;
/* --- Magenta / Pink (accent, from logo rule) --- */
--magenta-50:#FEF0F5;--magenta-100:#FBD9E5;--magenta-200:#F6AEC8;--magenta-300:#F07BA5;--magenta-400:#EB4B85;--magenta-500:#E42371;--magenta-600:#C4145D;--magenta-700:#9C0F4A;--magenta-800:#74113A;--magenta-900:#4C0E28;
/* --- Neutral slate (cool, borrowed a hint of teal) --- */
--slate-0:#FFFFFF;--slate-25:#FBFCFD;--slate-50:#F6F8F9;--slate-100:#EDF1F3;--slate-200:#DFE5E9;--slate-300:#C6CFD5;--slate-400:#9AA7AF;--slate-500:#71808A;--slate-600:#54626B;--slate-700:#3C4850;--slate-800:#263036;--slate-900:#131A1F;
/* --- Semantic status --- */
--green-500:#12805C;--green-50:#EAF6F1;--amber-500:#B7791F;--amber-50:#FDF6E7;--red-500:#C4145D;--red-50:#FDEFF4;
/* ================= SEMANTIC ALIASES — prefer these in components ================= */
/* Brand */
--brand:var(--teal-500);--brand-hover:var(--teal-600);--brand-active:var(--teal-700);--brand-soft:var(--teal-50);--brand-soft-2:var(--teal-100);--brand-deep:var(--teal-800);
--accent:var(--magenta-500);--accent-hover:var(--magenta-600);--accent-soft:var(--magenta-50);
/* Backgrounds & surfaces */
--bg-page:var(--slate-25);--bg-page-alt:var(--slate-50);--bg-tint:var(--teal-50);--bg-inverse:var(--teal-900);--bg-accent:var(--magenta-500);
--surface-card:var(--slate-0);--surface-card-alt:var(--slate-50);--surface-raised:var(--slate-0);--surface-sunken:var(--slate-100);--surface-overlay:var(--slate-0);
--scrim:rgba(19,26,31,.52);--glass:rgba(255,255,255,.72);
/* Text */
--text-heading:var(--slate-900);--text-body:var(--slate-700);--text-muted:var(--slate-500);--text-subtle:var(--slate-400);--text-on-brand:#FFFFFF;--text-on-accent:#FFFFFF;--text-on-dark:var(--slate-0);--text-on-dark-muted:var(--teal-200);--text-link:var(--teal-600);--text-link-hover:var(--teal-700);--text-brand:var(--teal-600);--text-accent:var(--magenta-600);
/* Borders */
--border-subtle:var(--slate-200);--border-default:var(--slate-300);--border-strong:var(--slate-400);--border-brand:var(--teal-500);--border-accent:var(--magenta-500);--border-on-dark:rgba(255,255,255,.18);
/* Status */
--status-success:var(--green-500);--status-success-bg:var(--green-50);--status-warning:var(--amber-500);--status-warning-bg:var(--amber-50);--status-error:var(--red-500);--status-error-bg:var(--red-50);
/* Focus */
--focus-ring:var(--teal-500);--focus-ring-offset:2px;
/* Gradients — used sparingly: hero video scrims and image protection only */
--scrim-bottom:linear-gradient(to top,rgba(6,47,52,.82) 0%,rgba(6,47,52,.45) 42%,rgba(6,47,52,0) 100%);/* @kind color */
--scrim-top:linear-gradient(to bottom,rgba(6,47,52,.55) 0%,rgba(6,47,52,0) 100%);/* @kind color */
--tint-wash:linear-gradient(180deg,var(--teal-50) 0%,var(--slate-25) 100%);/* @kind color */
}
/* Dark strip scope — apply to a section, not the page. */
.pfh-dark{--bg-page:var(--teal-900);--surface-card:rgba(255,255,255,.06);--surface-card-alt:rgba(255,255,255,.04);--text-heading:#fff;--text-body:var(--teal-100);--text-muted:var(--teal-200);--text-subtle:var(--teal-300);--border-subtle:rgba(255,255,255,.14);--border-default:rgba(255,255,255,.24);--text-link:#fff;--text-brand:var(--teal-200);background:var(--bg-page);color:var(--text-body)}
/* PFH27 TYPOGRAPHY — Inter only. Fluid from 320px → 1920px via clamp().
   Every step is linear between those two widths; nothing jumps at a breakpoint. */
:root{
/* Семейства (fonts.css не подключаем — Inter включается в Настройках сайта,
   но токены нужны шорткатам --type-* ниже) */
--font-sans:'Inter',Arial,sans-serif;
--font-display:var(--font-sans);
/* Display & headings */
--fs-display-1:clamp(2.5rem,1.7rem + 4vw,6.5rem); /* @kind other */        /* 40 → 104 hero */
--fs-display-2:clamp(2.125rem,1.65rem + 2.375vw,4.5rem); /* @kind other */ /* 34 → 72  section hero */
--fs-h1:clamp(1.875rem,1.55rem + 1.625vw,3.5rem); /* @kind other */        /* 30 → 56 */
--fs-h2:clamp(1.625rem,1.45rem + .875vw,2.5rem); /* @kind other */         /* 26 → 40 */
--fs-h3:clamp(1.375rem,1.275rem + .5vw,1.875rem); /* @kind other */        /* 22 → 30 */
--fs-h4:clamp(1.1875rem,1.15rem + .1875vw,1.375rem); /* @kind other */     /* 19 → 22 */
/* Body */
--fs-body-lg:clamp(1.0625rem,1.025rem + .1875vw,1.25rem); /* @kind other *//* 17 → 20 lead paragraphs */
--fs-body:clamp(1rem,.9875rem + .0625vw,1.0625rem); /* @kind other */      /* 16 → 17 default */
--fs-body-sm:clamp(.875rem,.8625rem + .0625vw,.9375rem); /* @kind other */ /* 14 → 15 meta, captions */
--fs-caption:.8125rem; /* @kind other */                                   /* 13 fixed */
--fs-overline:.75rem; /* @kind other */                                    /* 12 fixed, uppercase */
/* Numerals for the stats strip and the calculator total */
--fs-metric:clamp(2.5rem,1.9rem + 3vw,5rem); /* @kind other */             /* 40 → 88 */
--fs-metric-sm:clamp(1.75rem,1.55rem + 1vw,2.75rem); /* @kind other */     /* 28 → 44 */
/* Weights */
--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 */
/* Line heights */
--lh-display:1.02;/* @kind font */
--lh-heading:1.14;/* @kind font */
--lh-snug:1.32;/* @kind font */
--lh-body:1.55;/* @kind font */
--lh-relaxed:1.7;/* @kind font */
/* Letter spacing — Inter needs negative tracking as it grows */
--ls-display:-.035em;/* @kind font */
--ls-heading:-.02em;/* @kind font */
--ls-tight:-.01em;/* @kind font */
--ls-body:0;/* @kind font */
--ls-overline:.14em;/* @kind font */
--ls-button:.005em;/* @kind font */
/* Measure */
--measure-narrow:38ch;/* @kind other */
--measure:62ch;/* @kind other */
--measure-wide:76ch;/* @kind other */
/* Ready-made shorthands (font: shorthand needs family last) */
--type-display-1:var(--fw-black) var(--fs-display-1)/var(--lh-display) var(--font-display); /* @kind other */
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind other */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind other */
}
/* Utility classes are optional — Tilda Zero Block styling may target them. */
.pfh-display-1{font:var(--type-display-1);letter-spacing:var(--ls-display);color:var(--text-heading);text-wrap:balance}
.pfh-h2{font:var(--type-h2);letter-spacing:var(--ls-heading);color:var(--text-heading);text-wrap:balance}
.pfh-lead{font-size:var(--fs-body-lg);line-height:var(--lh-snug);color:var(--text-body);max-width:var(--measure)}
.pfh-body{font:var(--type-body);color:var(--text-body);max-width:var(--measure);text-wrap:pretty}
.pfh-overline{font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-brand)}
.pfh-metric{font-size:var(--fs-metric);font-weight:var(--fw-black);line-height:1;letter-spacing:var(--ls-display);color:var(--text-heading);font-variant-numeric:tabular-nums}
/* PFH27 SPACING — 4px base. Use the scale; fluid tokens for section rhythm. */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;--space-14:120px;--space-15:160px;
/* Fluid rhythm */
--section-y:clamp(48px,5vw + 16px,120px); /* @kind spacing */      /* vertical padding of a strip */
--section-y-tight:clamp(32px,3vw + 12px,72px); /* @kind spacing */
--section-gap:clamp(24px,2.5vw + 8px,56px);    /* heading block → content */
--grid-gap:clamp(16px,1.5vw + 6px,32px);
--card-pad:clamp(20px,1.5vw + 12px,32px);
--gutter:clamp(16px,4vw,48px); /* @kind spacing */                 /* page side padding */
/* Control sizing */
--control-h-sm:36px;--control-h:44px;--control-h-lg:56px;   /* 44px min touch target */
--control-pad-x-sm:14px;--control-pad-x:20px;--control-pad-x-lg:28px;
--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-xl:32px;
}
/* PFH27 SHAPE — radii, borders, shadows. Soft, low-contrast, never glossy. */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:999px;--radius-circle:50%;
--radius-card:var(--radius-lg);--radius-control:var(--radius-md);--radius-button:var(--radius-pill);--radius-modal:var(--radius-xl);--radius-image:var(--radius-lg);--radius-tag:var(--radius-pill);
--border-w:1px;/* @kind spacing */
--border-w-thick:2px;/* @kind spacing */
--border-w-rule:3px;/* @kind spacing */   /* rule = the magenta logo bar */
--border-hairline:1px solid var(--border-subtle);/* @kind other */
--border-control:1px solid var(--border-default);/* @kind other */
/* Shadows: elevation reads as a lift off white, never a dark box */
--shadow-xs:0 1px 2px rgba(19,26,31,.05);
--shadow-sm:0 2px 6px -1px rgba(19,26,31,.07),0 1px 2px rgba(19,26,31,.04);
--shadow-md:0 8px 24px -8px rgba(19,26,31,.12),0 2px 6px -2px rgba(19,26,31,.06);
--shadow-lg:0 24px 56px -16px rgba(19,26,31,.16),0 4px 12px -6px rgba(19,26,31,.06);
--shadow-modal:0 40px 96px -24px rgba(6,47,52,.32);
--shadow-brand:0 12px 28px -12px rgba(0,140,154,.42);
--shadow-focus:0 0 0 3px rgba(0,140,154,.28);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
/* Blur — used only for the sticky menu and modal scrim */
--blur-nav:saturate(180%) blur(14px);/* @kind other */
--blur-scrim:blur(2px);/* @kind other */
}
/* PFH27 MOTION — quick, confident, never bouncy on layout. */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:340ms; /* @kind other */
--dur-slower:560ms; /* @kind other */
--dur-scene:900ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */         /* default for most UI */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */            /* entrances, reveals */
--ease-in:cubic-bezier(.5,0,.9,.3); /* @kind other */             /* exits */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */        /* position changes */
--ease-snappy:cubic-bezier(.3,1.5,.55,1); /* @kind other */       /* small pops: chips, counters. Never on width/height */
--ease-linear:linear; /* @kind other */                            /* marquees, timers */
--t-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard); /* @kind other */
--t-press:transform var(--dur-instant) var(--ease-standard); /* @kind other */
--t-reveal:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); /* @kind other */
--t-accordion:grid-template-rows var(--dur-base) var(--ease-in-out); /* @kind other */
--press-scale:.97; /* @kind other */
--hover-lift:-2px; /* @kind other */
--marquee-dur:38s; /* @kind other */
--marquee-dur-mobile:26s; /* @kind other */
--reveal-stagger:70ms; /* @kind other */
}
@keyframes pfh-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pfh-fade{from{opacity:0}to{opacity:1}}
@keyframes pfh-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pfh-pulse-rule{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
.pfh-reveal{animation:pfh-fade-up var(--dur-slow) var(--ease-out) both}
.pfh-marquee-track{animation:pfh-marquee var(--marquee-dur) var(--ease-linear) infinite;will-change:transform}
/* ---- Reduced motion: one place to neutralise everything ---- */
@media (prefers-reduced-motion:reduce){
:root{--dur-instant:1ms; /* @kind other */
--dur-fast:1ms; /* @kind other */
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
--dur-slower:1ms; /* @kind other */
--dur-scene:1ms; /* @kind other */
--press-scale:1; /* @kind other */
--hover-lift:0px;--reveal-stagger:0ms /* @kind other */}
*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
.pfh-marquee-track{animation:none!important;transform:none!important}
.pfh-reveal{animation:none!important;opacity:1!important;transform:none!important}
/* Parallax, video autoplay and letter-shuffle headings must be disabled in JS too —
   check window.matchMedia('(prefers-reduced-motion: reduce)').matches before binding. */
}
/* PFH27 LAYOUT — container widths, z-index scale, breakpoints (for reference in JS/Tilda). */
:root{
--container:1240px;/* @kind spacing */
--container-wide:1440px;/* @kind spacing */
--container-narrow:880px;/* @kind spacing */
--container-text:720px;/* @kind spacing */
--header-h:64px;/* @kind spacing */
--header-h-lg:76px;/* @kind spacing */
--hook-strip-h:200px;/* @kind spacing */   /* the strip the sticky menu slides over */
--bp-sm:480px;/* @kind other */
--bp-md:768px;/* @kind other */
--bp-lg:1024px;/* @kind other */
--bp-xl:1280px;/* @kind other */
--bp-2xl:1600px;/* @kind other */
--z-base:0;/* @kind other */
--z-raised:10;/* @kind other */
--z-sticky:100;/* @kind other */
--z-nav:200;/* @kind other */
--z-drawer:300;/* @kind other */
--z-scrim:400;/* @kind other */
--z-modal:500;/* @kind other */
--z-toast:600;/* @kind other */
--z-preloader:900;/* @kind other */
--aspect-hero:16/9;/* @kind other */
--aspect-card:4/3;/* @kind other */
--aspect-portrait:3/4;/* @kind other */
--aspect-speaker:1/1;/* @kind other */
}
.pfh-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.pfh-section{padding-block:var(--section-y)}
.pfh-grid{display:grid;gap:var(--grid-gap)}
.pfh-cols-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.pfh-cols-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.pfh-cols-4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.pfh-stack{display:flex;flex-direction:column;gap:var(--space-5)}
.pfh-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
/* --- Безопасное подмножество base.css (полные резеты не тянем — у Tilda свои) --- */
/* box-sizing только для наших pfh-элементов: width:100% + padding не должны вылезать за экран */
[class*="pfh-"],[class*="pfh-"] *{box-sizing:border-box}
/* Шрифт для наших pfh-элементов: T123-разметка НЕ наследует шрифт Tilda
   (иначе браузерный Times). Вложенные p/span/h1 без классов наследуют от секции. */
[class*="pfh-"]{font-family:var(--font-sans)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-xs)}
::selection{background:var(--teal-100);color:var(--teal-900)}
.pfh-rule{border:0;height:var(--border-w-rule);background:var(--accent);width:64px;border-radius:2px}