/* Sinky / CopilotCRM.ai — type scale.
   Every size / line-height / tracking below is transcribed from the .fig.
   Odd numbers (1.100000023841858 → 1.1, -0.03em) are the design's real values. */

:root{
/* --font-display leads with TT Firs Neue (TypeType, commercial) so a licence holder gets
   the real face. No binary ships in the .fig and it is not on any free CDN — the brand
   book's own slide 9 "Typographie de remplacement" names Titillium Web as the sanctioned
   fallback, which is why it sits next in the stack. Upload the TT Firs Neue web files to
   assets/fonts/ and this becomes a local @font-face. */
--font-display:"TT Firs Neue Trl","TT Firs Neue","Titillium Web",system-ui,sans-serif; /* @kind font */
/* Fontshare serves this family as "Cabinet Grotesk"; the Figma layer name is
   "Cabinet Grotesk Variable". Both are listed so either resolves. */
--font-heading:"Cabinet Grotesk","Cabinet Grotesk Variable","TT Firs Neue Trl","Titillium Web",system-ui,sans-serif; /* @kind font */
--font-body:Outfit,system-ui,sans-serif; /* @kind font */
--font-ui:"Inter Tight",Inter,system-ui,sans-serif; /* @kind font */
--font-brandbook:Inter,system-ui,sans-serif; /* @kind font */

--weight-light:300; /* @kind font */
--weight-regular:400; /* @kind font */
--weight-medium:500; /* @kind font */
--weight-semibold:600; /* @kind font */

/* sizes as used */
--size-hero:56px; /* @kind other */
--size-section:40px; /* @kind other */
--size-display-xl:80px; /* @kind other */
--size-title:20px; /* @kind other */
--size-lead:18px; /* @kind other */
--size-body:16px; /* @kind other */
--size-body-sm:14px; /* @kind other */
--size-mobile-hero:40px; /* @kind other */

--leading-tight:1.1; /* @kind other */
--leading-snug:1.2; /* @kind other */
--leading-body:1.5; /* @kind other */
--leading-relaxed:1.6; /* @kind other */
--leading-flat:1; /* @kind other */

--tracking-tight:-0.03em; /* @kind other */
--tracking-display:-0.05em; /* @kind other */
--tracking-wide:-0.06em; /* @kind other */
}

/* Ready-made text roles — the same values, as classes. */
.sk-h1{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:1.1;letter-spacing:-0.03em;color:var(--text-primary)}
.sk-h2{font-family:var(--font-heading);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-0.03em;color:var(--text-primary)}
.sk-h3{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-0.03em;color:var(--text-primary)}
.sk-lead{font-family:var(--font-body);font-weight:400;font-size:18px;line-height:1.5;color:var(--text-primary)}
.sk-question{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.6;color:var(--text-primary)}
.sk-body{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-secondary)}
.sk-nav{font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.2;letter-spacing:-0.03em;color:var(--text-primary)}
.sk-badge{font-family:var(--font-display);font-weight:500;font-size:14px;line-height:1.2;text-transform:uppercase;color:var(--text-inverse)}
.sk-ui{font-family:var(--font-ui);font-weight:500;font-size:13px;line-height:1;color:var(--text-primary)}