/* ==========================================================================
   Studio Halfway — Typography System (single source of truth)
   --------------------------------------------------------------------------
   Every font-family, font-weight, font-style and letter-spacing on the site
   comes from the tokens below. Component CSS (main.css / framework.css) must
   reference these variables — never a literal 'Mattone' / 'Poppins' / 500.

   Load order:  framework.css  →  typography.css  →  main.css

   Two-font system
     • Mattone Regular  → display: headings, buttons, nav, big numbers
     • Poppins 400/500/600 → everything else (body, leads, labels, forms)

   Only the faces in assets/fonts are shipped. font-synthesis is disabled so
   the browser never fakes a bold/italic that doesn't exist (faux-bold was a
   main reason text looked like a "different font" in places).
   ========================================================================== */


/* ---------- 1. Font faces (local files only) ---------- */

@font-face {
  font-family: 'Mattone';
  src: url('../assets/fonts/Mattone-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ---------- 2. Tokens ---------- */

:root {
  /* Font families */
  --font-display: 'Mattone', 'Arial Black', sans-serif;
  /* headings, buttons, nav, numbers */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* paragraphs, leads, labels, forms */

  /* Legacy aliases used by framework.css */
  --heading-font-family: var(--font-display);
  --body-font-family: var(--font-body);

  /* Font weights — only weights that exist as real font files */
  --fw-regular: 400;
  /* Poppins Regular — body, lead, captions */
  --fw-medium: 500;
  /* Poppins Medium — eyebrows, labels, tags, emphasised links */
  --fw-semibold: 600;
  /* Poppins SemiBold — <strong>, the heaviest body weight we ship */
  --fw-display: 400;
  --fw-subtext: var(--fw-regular); /* sub text weight (Medium on phones) */
  /* Mattone ships Regular only — every display element uses this */

  /* Font style — the site is upright only (no italic files are shipped) */
  --fs-style: normal;

  /* Font sizes — role scale
     HEADING  = every page & section heading, site-wide  → Mattone Regular 46px
     SUB TEXT = subheading / intro line under a heading  → Poppins Regular 17px */
  --fs-heading: 40px;
  --fs-subtext: 15px;
  --fs-h1: var(--fs-heading);
  /* legacy alias */
  --fs-hero-h1: var(--fs-heading);
  /* legacy alias */
  --fs-section-h2: var(--fs-heading);
  /* legacy alias */
  --fs-card-h3: clamp(18px, 2vw, 24px);
  /* Heading 3: card / grid titles */
  --fs-item-h4: 17px;
  --fs-title: var(--fs-card-h3);             /* item titles (16px on phones) */
  --fs-number: clamp(30px, 3vw, 40px);       /* step / card numbers: 01, 02… (26px on phones) */
  /* Heading 4: small item titles, names */
  --fs-kicker: 12.5px;
  /* Subheading / eyebrow */
  --fs-lead: var(--fs-subtext);
  /* legacy alias */
  --fs-body: 15px;
  /* Body copy */
  --fs-caption: 13px;
  /* Captions, meta, footnotes */
  --fs-micro: 11.5px;
  /* Tiny labels, tags */
  --fs-button: 13px;
  /* Buttons & CTAs */

  /* Line heights */
  --lh-tight: 1.12;
  /* legacy alias target */
  --lh-heading: 1.15;
  /* Heading */
  --lh-title: 1.25;
  /* H3 / H4 */
  --lh-lead: 1.65;
  /* Sub text */
  --lh-body: 1.7;
  /* body copy */

  /* Letter spacing */
  --ls-heading: -0.015em;
  /* Heading */
  --ls-h1: var(--ls-heading);
  /* legacy alias */
  --ls-h2: var(--ls-heading);
  /* legacy alias */
  --ls-h3: -0.01em;
  /* Heading 3 / 4 */
  --ls-body: 0;
  /* body, lead, captions */
  --ls-button: 0.05em;
  /* uppercase Mattone buttons & CTAs */
  --ls-eyebrow: 0.1em;
  /* uppercase Poppins eyebrows, labels, badges, tags */
}

/* Phones: sizes match the live studiohalfway.com mobile layout */
@media (max-width: 767px) {
  :root {
    --fs-heading: 23px;   /* section headings */
    --fs-hero: 24px;      /* hero headline (3 lines) */
    --fs-subtext: 13px;
    --fs-body: 13.5px;
    --fs-title: 16px;     /* item titles: projects, services, FAQs, cards, names */
    --fs-number: 26px;    /* step / card numbers */
    --fs-button: 11px;
    --lh-heading: 1;      /* tight two-line headings, like the live site */
    --lh-lead: 1.65;
    --fw-subtext: var(--fw-medium);  /* sub text in Poppins Medium, like the live site */
  }
}


/* ---------- 3. Base ---------- */

/* Body font is set once and inherited — children of a heading/button stay
   in that heading's font (previously a `* { Poppins !important }` rule
   forced animated heading letters and button labels back into Poppins). */
html,
body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-style: var(--fs-style);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

input,
select,
textarea,
optgroup {
  font-family: var(--font-body);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

em,
i,
cite,
dfn,
blockquote {
  font-style: var(--fs-style);
}


/* ---------- 4. Roles ---------- */

/* Display font — headings, buttons, CTAs, titles */
h1,
h2,
h3,
h4,
h5,
h6,
.cs_btn,
.cs_nav_cta_btn,
.cs_text_btn,
button,
.cs_card_title,
.cs_section_title,
.cs_title_text,
.cs_testimonial_title,
.cs_card_brand,
.cs_service_detail_hook,
.cs_stroke_text,
.cs_stroke_number,
.cs_stroke_normal,
.shead h2,
.t-display {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-style: var(--fs-style) !important;
}

/* HEADING — every page & section heading on the site (Mattone Regular 46px) */
h1,
.cs_title_text,
.cs_hero_title,
.cs_section_title,
.cs_page_title,
.shead h2,
#about .cs_section_title,
#services .cs_section_title,
.cs_faq_section .cs_section_title,
#contact .cs_section_title,
.cs_testimonial_title,
.cs_contact_title,
.cs_page_hero_title,
.t-heading,
.t-h1,
.t-h2 {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-style: var(--fs-style) !important;
  font-size: var(--fs-heading) !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--ls-heading) !important;
}

/* Heading 3 — card & grid titles */
.proj h3,
.cs_card_title,
.text-section h6,
.cs_faq_title,
.t-h3 {
  font-size: var(--fs-card-h3) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--ls-h3) !important;
}

/* Blog post card titles — Poppins Medium */
.cs_post_title,
.cs_post.cs_style_1 .cs_post_title,
#blog .cs_post_title {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: clamp(17px, 1.8vw, 21px) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--ls-body) !important;
  color: #ffffff !important;
  margin-bottom: 10px !important;
}

/* Heading 4 — names, small item titles */
.t-h4 {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-item-h4) !important;
  line-height: var(--lh-title) !important;
  letter-spacing: var(--ls-h3) !important;
}

/* Subheading / eyebrow — small uppercase label above a heading */
.t-eyebrow {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-kicker) !important;
  letter-spacing: var(--ls-eyebrow) !important;
  text-transform: uppercase !important;
}

/* SUB TEXT — subheading / intro text under a heading (Poppins Regular 17px) */
.lead,
.shead .lead,
.anim_text,
#about .anim_text,
#about .cs_text p,
.cs_partners_lead,
.cs_about_lead,
.cs_hero .cs_detils_text,
.cs_hero .anim_subtext,
.cs_faq_intro,
.cs_contact_subtitle,
.cs_page_hero_subtitle,
.cs_subheading,
.t-subtext,
.t-lead {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-subtext) !important;
  font-style: var(--fs-style) !important;
  font-size: var(--fs-subtext) !important;
  line-height: var(--lh-lead) !important;
  letter-spacing: var(--ls-body) !important;
}

/* Body copy */
p,
.cs_detils_text,
.cs_font_16,
.cs_normal,
.text-section p,
.cs_service_detail_desc,
.t-body {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}

.t-body {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
}

/* Caption / meta */
.cs_post_info p,
.t-caption {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-regular) !important;
  font-size: 14px !important;
  line-height: var(--lh-lead) !important;
}

.cs_post_info p {
  color: #a1a0ab !important;
}

/* Button — uppercase Mattone CTA text */
.t-button {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: var(--fs-button) !important;
  letter-spacing: var(--ls-button) !important;
  text-transform: uppercase !important;
}

/* Accent words inside headings: colour only, never a different face/style */
h1 .em,
h2 .em,
h3 .em,
.cs_italic_em {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: var(--fs-style) !important;
}