/* ==========================================================================
   UNICK SPACE // CENTRAL TYPOGRAPHY SYSTEM
   Headings: Manrope (400, 500, 600, 700, 800)
   Body: Inter (400, 500, 600, 700)
   
   Brand Direction: Modern, Clean, Confident, Professional, Premium Corporate,
                    Technology-Oriented.
   ========================================================================== */

/* 1. Google Fonts Efficient Import */
/* Google Fonts loaded via parallel <link> in HTML head */
/* 2. Central CSS Typography Variables */
:root {
  /* Central Font Families */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-heading);
  --font-sans: var(--font-body);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Typography Scale - Fluid System (clamp) matching Desktop Hierarchy */
  /* Hero Heading: Desktop 64px (4rem) */
  --text-hero: clamp(2.5rem, 4.2vw + 1rem, 4rem);
  --lh-hero: 1.15;
  --ls-hero: -0.025em;

  /* Page Heading: Desktop 52px (3.25rem) */
  --text-page: clamp(2rem, 3.2vw + 0.8rem, 3.25rem);
  --lh-page: 1.2;
  --ls-page: -0.02em;

  /* Section Heading: Desktop 38px (2.375rem) */
  --text-section: clamp(1.75rem, 2vw + 0.6rem, 2.375rem);
  --lh-section: 1.25;
  --ls-section: -0.015em;

  /* Subsection Heading: Desktop 28px (1.75rem) */
  --text-subsection: clamp(1.35rem, 1.4vw + 0.5rem, 1.75rem);
  --lh-subsection: 1.3;
  --ls-subsection: -0.01em;

  /* Card Heading: Desktop 22px (1.375rem) */
  --text-card: clamp(1.15rem, 0.8vw + 0.65rem, 1.375rem);
  --lh-card: 1.35;
  --ls-card: -0.005em;

  /* Body Text: Desktop 17px (1.0625rem) */
  --text-body: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
  --lh-body: 1.7;
  --ls-body: 0em;

  /* Navigation: Desktop 15px (0.9375rem) */
  --text-nav: 0.9375rem;
  --lh-nav: 1.4;
  --ls-nav: -0.005em;

  /* Buttons: Desktop 14px (0.875rem) */
  --text-btn: 0.875rem;
  --lh-btn: 1.4;
  --ls-btn: 0.02em;

  /* Small Labels / Badges: Desktop 13px (0.8125rem) */
  --text-label: 0.8125rem;
  --lh-label: 1.3;
  --ls-label: 0.06em;
}

/* 3. Base Body Typography */
html, body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 4. Headings System (Manrope) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* 4.1 Hero Headings (Desktop 64px, Weight 700) */
.hero-display-title,
.hero-headline,
.studio-hero-headline,
.hero-title-main {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--text-hero) !important;
  line-height: var(--lh-hero) !important;
  letter-spacing: var(--ls-hero) !important;
}

/* 4.2 Page Headings (Desktop 52px, Weight 700) */
.page-title,
.studio-page-title,
.page-header-title,
h1:not(.hero-display-title):not(.hero-headline):not(.studio-hero-headline) {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--text-page) !important;
  line-height: var(--lh-page) !important;
  letter-spacing: var(--ls-page) !important;
}

/* 4.3 Section Headings (Desktop 38px, Weight 700) */
.section-headline,
.studio-intro-statement,
.section-title,
h2, .h2 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: var(--text-section) !important;
  line-height: var(--lh-section) !important;
  letter-spacing: var(--ls-section) !important;
}

/* 4.4 Subsection Headings (Desktop 28px, Weight 600) */
.subsection-heading,
.section-subtitle-heading,
h3, .h3 {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-subsection) !important;
  line-height: var(--lh-subsection) !important;
  letter-spacing: var(--ls-subsection) !important;
}

/* 4.5 Card & Component Headings (Desktop 22px, Weight 600) */
.card-title,
.tech-card-title,
.service-card-title,
.feature-title,
h4, .h4,
h5, .h5 {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--text-card) !important;
  line-height: var(--lh-card) !important;
  letter-spacing: var(--ls-card) !important;
}

/* 5. Body Text & Paragraphs (Inter 400, Desktop 17px) */
p,
.body-text,
.section-lead,
.hero-subtitle,
.studio-page-subtitle,
.lead {
  font-family: var(--font-body) !important;
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.hero-subtitle,
.section-lead,
.studio-page-subtitle {
  font-size: clamp(1.05rem, 0.2vw + 1rem, 1.15rem);
  line-height: 1.7;
}

/* 6. Navigation (Inter 500, Desktop 15px) */
.navbar-nav .nav-link,
.nav-link,
.nav-link-tech,
.studio-nav-link,
.dropdown-item,
.nav-menu a,
.navigation-bar a {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: var(--text-nav) !important;
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-nav);
}

/* 7. Buttons (Inter 600, Desktop 14px) */
.btn,
.btn-tech-primary,
.btn-tech-secondary,
.btn-tech-outline,
.btn-studio-primary,
.btn-studio-secondary,
.btn-primary,
.btn-outline,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--text-btn) !important;
  line-height: var(--lh-btn);
  letter-spacing: var(--ls-btn);
}

/* 8. Small Labels, Badges & Overlines (Inter 600, Desktop 13px) */
.section-eyebrow,
.badge-tech,
.studio-sticker,
.pill-tag,
.badge,
.label-pill,
.form-label,
label,
.font-mono.small,
.project-tag-pill {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.section-eyebrow,
.badge-tech,
.studio-sticker,
.pill-tag {
  text-transform: uppercase;
}

/* 9. Forms & Dropdowns (Inter) */
.form-control,
.form-select,
.studio-form-control,
input, textarea, select {
  font-family: var(--font-body) !important;
  font-size: var(--text-body);
  line-height: 1.6;
}

.dropdown-menu {
  font-family: var(--font-body);
  font-size: var(--text-nav);
}

/* 10. Responsive Viewport Adaptations */
@media (max-width: 991.98px) {
  :root {
    --lh-hero: 1.18;
    --lh-page: 1.22;
    --lh-section: 1.28;
  }
}

@media (max-width: 767.98px) {
  :root {
    --text-hero: clamp(2.1rem, 6vw + 0.5rem, 2.75rem);
    --text-page: clamp(1.85rem, 4.5vw + 0.4rem, 2.35rem);
    --text-section: clamp(1.5rem, 3.5vw + 0.3rem, 1.95rem);
    --text-subsection: clamp(1.2rem, 2.5vw + 0.3rem, 1.45rem);
    --lh-hero: 1.2;
    --lh-page: 1.24;
    --lh-body: 1.65;
  }
}

@media (max-width: 430px) {
  :root {
    --text-hero: clamp(1.9rem, 7vw, 2.4rem);
    --text-page: 1.75rem;
    --text-section: 1.45rem;
    --text-subsection: 1.2rem;
    --text-card: 1.1rem;
    --text-body: 0.98rem;
    --lh-hero: 1.22;
  }
}