/*
 * Animails 3.0 canonical runtime tokens.
 *
 * Global brand/layout values come from DESIGN_SYSTEM.md and design-contract.json.
 * Text neutrals are scoped where foundations and accepted content-surface Figma
 * frames intentionally diverge: service pages use the current foundations
 * palette, while blog/article keep their editorial neutral palette.
 */
:root{
  --a3-ink:#171717;
  --a3-dark:#241040;
  --a3-lime:#c6f135;
  --a3-lime-hover:#b8e22e;
  --a3-purple:#5b2ea0;
  --a3-purple-dark:#3d2660;
  --a3-purple-border:#7752ad;
  --a3-beige:#f5f2e8;
  --a3-purple-subtle:#f9f7fc;
  --a3-border:#e3dfd2;
  --a3-text-muted-on-light:#706e67;
  --a3-white:#fff;
  --a3-page-x:80px;
  --a3-section-y:80px;
  --a3-content:1280px;
}

.a3-service-page{
  --a3-text-secondary:#5c5a52;
  --a3-text-muted:#9c9a90;
  --a3-text-tertiary:#9c9a90;
}

.a3-blog-home,
.a3-article,
.a3-archive{
  --a3-text-secondary:#42413b;
  --a3-text-muted:#828078;
  --a3-text-tertiary:#9c9a90;
}

@media (max-width:1160px){:root{--a3-page-x:48px}}
@media (max-width:900px){:root{--a3-page-x:32px}}
@media (max-width:600px){:root{--a3-page-x:20px}}

/* Five shared text styles. Explicit project decision, 2026-10-09.
   They style page content only: the shared header and footer keep their own Figma shell styles
   (2026-10-20: on blog pages <summary>Usługi</summary> and the topbar fell into Body).
   Form values always use the same 16px Geist body as paragraphs, including mobile. */
:root{
 --anim-type-h1:700 clamp(40px,4.5vw,64px)/1.08 "Sora",Arial,sans-serif;
 --anim-type-h2:700 clamp(32px,3vw,42px)/1.15 "Sora",Arial,sans-serif;
 --anim-type-h3:600 23px/1.3 "Sora",Arial,sans-serif;
 --anim-type-body:400 16px/1.65 "Geist",Arial,sans-serif;
 --anim-type-small:500 13px/1.55 "Geist",Arial,sans-serif;
 --wp--preset--font-size--hero:64px;--wp--preset--font-size--h1:64px;
 --wp--preset--font-size--xx-large:42px;--wp--preset--font-size--h2:42px;
 --wp--preset--font-size--x-large:23px;--wp--preset--font-size--h3:23px;
 --wp--preset--font-size--h5:23px;--wp--preset--font-size--h6:23px;
 --wp--preset--font-size--large:16px;--wp--preset--font-size--medium:16px;
 --wp--preset--font-size--body:16px;--wp--preset--font-size--small:13px;--wp--preset--font-size--xs:13px;
}
/* Figma type scale (Foundations 285:3) for pages that opt out of the five shared styles.
   The class comes from animails_v2_figma_type_body_class() in functions.php; the page list lives in
   design-contract.json (typography.figmaScale). Component CSS keeps its own Figma sizes there, the shared
   styles above do not apply, and the WordPress presets return to the pre-2026-10-09 scale. */
body.a3-type-figma{
 --wp--preset--font-size--xs:12px;--wp--preset--font-size--small:14px;--wp--preset--font-size--medium:16px;--wp--preset--font-size--body:16px;
 --wp--preset--font-size--large:18px;--wp--preset--font-size--h6:20px;--wp--preset--font-size--h5:24px;--wp--preset--font-size--x-large:32px;
 --wp--preset--font-size--h3:40px;--wp--preset--font-size--xx-large:48px;--wp--preset--font-size--h2:48px;--wp--preset--font-size--h1:56px;--wp--preset--font-size--hero:64px;
 line-height:1.6;
}
body:where(:not(.a3-type-figma)){font:var(--anim-type-body)!important;-webkit-font-smoothing:antialiased}
html body:where(:not(.a3-type-figma)) :is(p,li,dt,dd,label,button,summary):where(:not(.animails-site-header *,.animails-site-footer *)){font:var(--anim-type-body)!important;letter-spacing:0!important}
html body :is(input,textarea,select){font:var(--anim-type-body)!important;letter-spacing:0!important}
html body :is(input,textarea,select)::placeholder{font:var(--anim-type-body)!important;letter-spacing:0!important;opacity:1}
html body:where(:not(.a3-type-figma)) :is(h1,.h-display,.animails-hero__title,.a3-blog-hero__title,.a3-article-title):where(:not(.animails-site-header *,.animails-site-footer *)){font:var(--anim-type-h1)!important;letter-spacing:-.045em!important}
html body:where(:not(.a3-type-figma)) :is(h2,.animails-split-heading__title):where(:not(.animails-site-header *,.animails-site-footer *)){font:var(--anim-type-h2)!important;letter-spacing:-.04em!important}
html body:where(:not(.a3-type-figma)) :is(h3,h4,h5,h6):where(:not(.animails-site-header *,.animails-site-footer *)){font:var(--anim-type-h3)!important;letter-spacing:-.025em!important}
/* Service hero: one semantic h1 rendered in the H2 style (layout.serviceHero.heading, decision 2026-10-10). */
html body:where(:not(.a3-type-figma)) .a3-service-hero h1{font:var(--anim-type-h2)!important;letter-spacing:-.04em!important}
html body:where(:not(.a3-type-figma)) :is(h1,h2,h3,h4,h5,h6) :is(span,em,strong):where(:not(.animails-site-header *,.animails-site-footer *)){font:inherit!important;letter-spacing:inherit!important}
html body:where(:not(.a3-type-figma)) :is(.eyebrow,.section-label,.pill,.a3-pill,.a3-eyebrow,.a3-consent,.consent,.form-status,.a3-form-status,.footer-legal,.a3-topbar p,.chip-contact,.a3-blog-card-date,.a3-card-meta,.a3-article-meta,.a3-article-bio__role,[class$="__eyebrow"],[class$="__label"],small):where(:not(.animails-site-header *,.animails-site-footer *)){font:var(--anim-type-small)!important;letter-spacing:0!important}
/* Stays on every page, also on the Figma scale: the six-column question cards are ~163px wide and "DOSTARCZALNOŚĆ"
   breaks mid-word at Sora 800 17px (browser-layout, 2026-10-19). */
/* Footer metadata, captions and one-word uppercase labels inside fixed-width service boards are Small:
   H3/Body broke these words mid-word or let the text spill over its box (2026-10-10). */
html body :is(.a3-send-route__steps h3,.a3-training-questions h3,.a3-delivery-evidence__grid h3,.a3-delivery-promises__board dt,.a3-training-teardown__board>aside>p){font:var(--anim-type-small)!important;letter-spacing:0!important}
/* The shared footer is shell, not page content: its fixed 66px address block fits only in Small on every page,
   including pages that follow the Figma scale (the five-style rules above are switched off there). */
html body .animails-site-footer .footer-brand p{font:var(--anim-type-small)!important;letter-spacing:0!important}
/* Button labels and nav items are Figma components, not Body text (restored 2026-10-19):
   Button/Default = Sora SemiBold 16, letter-spacing -1% (285:1180);
   the fixed 233px header CTA wraps without it, Label/Default = Sora SemiBold 14 (285:1285).
   line-height 1 keeps the contract button at 16 + 2x16 padding = 48 px (components.button). */
html body :is(.a3-button,.btn,.wp-block-button__link){font:600 16px/1 "Sora",Arial,sans-serif!important;letter-spacing:-.01em!important}
html body :is(.nav-link,.a3-main-nav .wp-block-navigation-item__content){font:600 14px/1.4 "Sora",Arial,sans-serif!important;letter-spacing:0!important}
html body :is(.a3-callback-form,.a3-contact-form,.contact-form) :is(input,textarea,select){font:var(--anim-type-body)!important;letter-spacing:0!important;-webkit-text-size-adjust:100%}
@media(max-width:720px){:root{--anim-type-h3:600 22px/1.3 "Sora",Arial,sans-serif}}