/**
 * RSPR Company Profile V2 - Typography
 * Font: Poppins (Google Fonts)
 * Date: December 2025
 */

/* ============================================
   POPPINS FONT IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-800);
}

/* ============================================
   DISPLAY TYPOGRAPHY
   ============================================ */
/* Display/01 - Poppins Semi-bold / Size 64 / Line 72 / Spacing -2% */
.display-01,
.text-display-01 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 4rem;        /* 64px */
  line-height: 4.5rem;    /* 72px */
  letter-spacing: -0.02em; /* -2% */
}

/* Display/02 - Poppins Semi-bold / Size 56 / Line 64 / Spacing -1.8% */
.display-02,
.text-display-02 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 3.5rem;      /* 56px */
  line-height: 4rem;      /* 64px */
  letter-spacing: -0.018em; /* -1.8% */
}

/* ============================================
   HEADING TYPOGRAPHY
   ============================================ */
/* Heading/01 - Poppins Semi-bold / Size 40 / Line 48 / Spacing -1.5% */
h1, .h1,
.heading-01 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2.5rem;      /* 40px */
  line-height: 3rem;      /* 48px */
  letter-spacing: -0.015em; /* -1.5% */
  color: var(--primary-900);
}

/* Heading/02 - Poppins Semi-bold / Size 32 / Line 40 / Spacing -1.5% */
h2, .h2,
.heading-02 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 2rem;        /* 32px */
  line-height: 2.5rem;    /* 40px */
  letter-spacing: -0.015em; /* -1.5% */
  color: var(--primary-900);
}

/* Heading/03 - Poppins Semi-bold / Size 28 / Line 36 / Spacing -1.5% */
h3, .h3,
.heading-03 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.75rem;     /* 28px */
  line-height: 2.25rem;   /* 36px */
  letter-spacing: -0.015em; /* -1.5% */
  color: var(--primary-800);
}

/* Heading/04 - Poppins Semi-bold / Size 24 / Line 32 / Spacing -1.5% */
h4, .h4,
.heading-04 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;      /* 24px */
  line-height: 2rem;      /* 32px */
  letter-spacing: -0.015em; /* -1.5% */
  color: var(--primary-800);
}

/* Heading/05 - Poppins Semi-bold / Size 20 / Line 28 / Spacing -1.2% */
h5, .h5,
.heading-05 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;     /* 20px */
  line-height: 1.75rem;   /* 28px */
  letter-spacing: -0.012em; /* -1.2% */
  color: var(--primary-800);
}

/* Heading/06 - Poppins Semi-bold / Size 18 / Line 24 / Spacing -1.2% */
h6, .h6,
.heading-06 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.5rem;    /* 24px */
  letter-spacing: -0.012em; /* -1.2% */
  color: var(--primary-800);
}

/* ============================================
   SUBHEADING TYPOGRAPHY
   ============================================ */
/* Subheading/01 - Poppins Medium / Size 18 / Line 24 / Spacing -1.2% */
.subheading-01 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.5rem;    /* 24px */
  letter-spacing: -0.012em; /* -1.2% */
}

/* Subheading/02 - Poppins Medium / Size 16 / Line 22 / Spacing -1.5% */
.subheading-02 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1rem;        /* 16px */
  line-height: 1.375rem;  /* 22px */
  letter-spacing: -0.015em; /* -1.5% */
}

/* Subheading/03 - Poppins Medium / Size 14 / Line 20 / Spacing -1.2% */
.subheading-03 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  letter-spacing: -0.012em; /* -1.2% */
}

/* Subheading/04 - Poppins Medium / Size 13 / Line 18 / Spacing -1% */
.subheading-04 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;   /* 13px */
  line-height: 1.125rem;  /* 18px */
  letter-spacing: -0.01em; /* -1% */
}

/* ============================================
   BUTTON TEXT TYPOGRAPHY
   ============================================ */
/* Button/Regular - Poppins Semi-bold / Size 14 / Line 48 / Spacing 0% */
.btn-text-regular,
.btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;    /* 14px */
  line-height: 3rem;      /* 48px */
  letter-spacing: 0;
}

/* Button/Small - Poppins Semi-bold / Size 13 / Line 40 / Spacing 0% */
.btn-text-small,
.btn-sm {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;   /* 13px */
  line-height: 2.5rem;    /* 40px */
  letter-spacing: 0;
}

/* ============================================
   CAPTION TYPOGRAPHY
   ============================================ */
/* Caption/01 - Poppins Regular / Size 13 / Line 13 / Spacing 0% */
.caption-01 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;   /* 13px */
  line-height: 0.8125rem; /* 13px */
  letter-spacing: 0;
}

/* Caption/02 - Poppins Regular / Size 12 / Line 12 / Spacing 0 */
.caption-02 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;     /* 12px */
  line-height: 0.75rem;   /* 12px */
  letter-spacing: 0;
}

/* Caption/03 - Poppins Regular / Size 11 / Line 11 / Spacing 0 */
.caption-03 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;   /* 11px */
  line-height: 0.6875rem; /* 11px */
  letter-spacing: 0;
}

/* ============================================
   BODY TEXT TYPOGRAPHY
   ============================================ */
/* Body/XXL/300 - Poppins Light / Size 18 / Line 26 / Spacing 0 */
.body-xxl-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.625rem;  /* 26px */
  letter-spacing: 0;
}

/* Body/XXL/400 - Poppins Regular / Size 18 / Line 26 / Spacing 0 */
.body-xxl-400 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;    /* 18px */
  line-height: 1.625rem;  /* 26px */
  letter-spacing: 0;
}

/* Body/Xtra Large/300 - Poppins Light / Size 16 / Line 24 / Spacing 0 */
.body-xl-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
  letter-spacing: 0;
}

/* Body/Xtra Large/400 - Poppins Regular / Size 16 / Line 24 / Spacing 0 */
.body-xl-400 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
  letter-spacing: 0;
}

/* Body/Large/300 - Poppins Light / Size 15 / Line 22 / Spacing 0 */
.body-lg-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.375rem;  /* 22px */
  letter-spacing: 0;
}

/* Body/Large/400 - Poppins Regular / Size 15 / Line 22 / Spacing 0 */
.body-lg-400,
.text-lg {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;   /* 15px */
  line-height: 1.375rem;  /* 22px */
  letter-spacing: 0;
}

/* Body/Regular/300 - Poppins Light / Size 14 / Line 20 / Spacing 0 */
.body-regular-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  letter-spacing: 0;
}

/* Body/Regular/400 - Poppins Regular / Size 14 / Line 20 / Spacing 0 */
.body-regular-400,
.text-base,
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
  letter-spacing: 0;
}

/* Body/Small/300 - Poppins Light / Size 13 / Line 18 / Spacing 0 */
.body-small-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;   /* 13px */
  line-height: 1.125rem;  /* 18px */
  letter-spacing: 0;
}

/* Body/Small/400 - Poppins Regular / Size 13 / Line 18 / Spacing 0 */
.body-small-400,
.text-sm {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;   /* 13px */
  line-height: 1.125rem;  /* 18px */
  letter-spacing: 0;
}

/* Body/Tiny/300 - Poppins Light / Size 11 / Line 15 / Spacing 0 */
.body-tiny-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.6875rem;   /* 11px */
  line-height: 0.9375rem; /* 15px */
  letter-spacing: 0;
}

/* Body/Tiny/400 - Poppins Regular / Size 11 / Line 15 / Spacing 0 */
.body-tiny-400,
.text-xs {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
  letter-spacing: 0;
}

/* Mobile Body/Tiny/300 - Poppins Light / Size 12 / Line 16 / Spacing 0 */
.mobile-body-tiny-300 {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
  letter-spacing: 0;
}

/* Mobile Body/Tiny/400 - Poppins Regular / Size 12 / Line 16 / Spacing 0 */
.mobile-body-tiny-400 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
  letter-spacing: 0;
}

/* ============================================
   LEGACY BODY TEXT (for backward compatibility)
   ============================================ */
.text-xl {
  font-size: 1.25rem;     /* 20px */
  line-height: 1.75rem;   /* 28px */
  font-weight: 400;
  letter-spacing: 0;
}

/* ============================================
   FONT WEIGHTS
   ============================================ */
.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-regular,
.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* ============================================
   TEXT STYLES
   ============================================ */
.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-underline {
  text-decoration: underline;
}

.text-line-through {
  text-decoration: line-through;
}

.text-no-underline {
  text-decoration: none;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* ============================================
   LINE HEIGHT
   ============================================ */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.6;
}

.leading-relaxed {
  line-height: 1.75;
}

.leading-loose {
  line-height: 2;
}

/* ============================================
   LETTER SPACING
   ============================================ */
.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

/* ============================================
   TEXT COLORS (Based on Design System)
   ============================================ */
.text-primary {
  color: var(--primary-500);
}

.text-primary-dark {
  color: var(--primary-800);
}

.text-secondary {
  color: var(--secondary-500);
}

.text-tertiary {
  color: var(--tertiary-500);
}

.text-gray {
  color: var(--gray-600);
}

.text-gray-light {
  color: var(--gray-400);
}

.text-gray-dark {
  color: var(--gray-800);
}

.text-white {
  color: var(--white);
}

.text-success {
  color: var(--success-500);
}

.text-warning {
  color: var(--warning-500);
}

.text-error {
  color: var(--error-500);
}

.text-info {
  color: var(--info-500);
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
@media (max-width: 768px) {
  /* Display */
  .display-01,
  .text-display-01 {
    font-size: 3rem;        /* 48px */
    line-height: 3.5rem;    /* 56px */
  }

  .display-02,
  .text-display-02 {
    font-size: 2.5rem;      /* 40px */
    line-height: 3rem;      /* 48px */
  }

  /* Headings */
  h1, .h1,
  .heading-01 {
    font-size: 2.5rem;      /* 40px */
    line-height: 3rem;      /* 48px */
  }

  h2, .h2,
  .heading-02 {
    font-size: 2rem;        /* 32px */
    line-height: 2.5rem;    /* 40px */
  }

  h3, .h3,
  .heading-03 {
    font-size: 1.75rem;     /* 28px */
    line-height: 2.25rem;   /* 36px */
  }

  h4, .h4,
  .heading-04 {
    font-size: 1.5rem;      /* 24px */
    line-height: 2rem;      /* 32px */
  }

  h5, .h5,
  .heading-05 {
    font-size: 1.25rem;     /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  h6, .h6,
  .heading-06 {
    font-size: 1rem;        /* 16px */
    line-height: 1.5rem;    /* 24px */
  }

  /* Subheadings */
  .subheading-01 {
    font-size: 1.25rem;     /* 20px */
    line-height: 1.75rem;   /* 28px */
  }

  .subheading-02 {
    font-size: 1.125rem;    /* 18px */
    line-height: 1.625rem;  /* 26px */
  }
}

/* ============================================
   LINK STYLES
   ============================================ */
a {
  color: var(--primary-500);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   PARAGRAPH & TEXT BLOCKS
   ============================================ */
p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gray-700);
}

.text-muted {
  color: var(--gray-500);
}

blockquote {
  border-left: 4px solid var(--primary-500);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--gray-700);
  margin: 1.5rem 0;
}

/* ============================================
   LIST STYLES
   ============================================ */
ul, ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

ul li, ol li {
  margin-bottom: 0.5rem;
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
}

/* ============================================
   TEXT TRUNCATION
   ============================================ */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}