// ==========================================================================
// Monitor.Cat — Typography Scale
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Hero heading (h1)
  // ---------------------------------------------------------------------------
  .mc-hero-title,
  h1 {
    font-family: $mc-font-heading;
    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
    font-weight: 600;
    line-height: 1.15;
    color: $mc-text;
    letter-spacing: -0.01em;
  }

  // ---------------------------------------------------------------------------
  // Section heading (h2)
  // ---------------------------------------------------------------------------
  .mc-section-title,
  h2 {
    font-family: $mc-font-heading;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.2;
    color: $mc-text;
  }

  // ---------------------------------------------------------------------------
  // Card heading (h3)
  // ---------------------------------------------------------------------------
  .mc-card-title,
  h3 {
    font-family: $mc-font-heading;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: $mc-text;
  }

  // ---------------------------------------------------------------------------
  // Subheadings (h4, h5, h6)
  // ---------------------------------------------------------------------------
  h4 {
    font-family: $mc-font-heading;
    font-size: 1rem;
    font-weight: 600;
  }

  h5 {
    font-family: $mc-font-heading;
    font-size: 0.9375rem;
    font-weight: 500;
  }

  h6 {
    font-family: $mc-font-heading;
    font-size: 0.875rem;
    font-weight: 500;
  }

  // ---------------------------------------------------------------------------
  // Body text
  // ---------------------------------------------------------------------------
  .mc-body,
  p {
    font-family: $mc-font-body;
    font-size: 1rem;
    line-height: 1.6;
    color: $mc-text-medium;
  }

  // ---------------------------------------------------------------------------
  // Labels / Captions
  // ---------------------------------------------------------------------------
  .mc-label {
    font-family: $mc-font-body;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: $mc-text-light;
    line-height: 1.4;
  }

  // ---------------------------------------------------------------------------
  // Small / Fine print
  // ---------------------------------------------------------------------------
  .mc-small {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: $mc-text-light;
  }

  // ---------------------------------------------------------------------------
  // Text gradient — brand ".CAT" highlight
  // ---------------------------------------------------------------------------
  .mc-text-gradient-primary {
    background: linear-gradient(135deg, $mc-primary 0%, $mc-primary-hover 60%, $mc-coral-strong 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  // ---------------------------------------------------------------------------
  // Text color utilities
  // ---------------------------------------------------------------------------
  .mc-text-primary   { color: $mc-primary; }
  .mc-text-mint      { color: $mc-mint-strong; }
  .mc-text-coral     { color: $mc-coral-strong; }
  .mc-text-lavender  { color: $mc-lavender-strong; }
  .mc-text-cyan      { color: $mc-cyan-strong; }
  .mc-text-medium    { color: $mc-text-medium; }
  .mc-text-light     { color: $mc-text-light; }

  // ---------------------------------------------------------------------------
  // Font weight utilities
  // ---------------------------------------------------------------------------
  .mc-fw-light    { font-weight: 300; }
  .mc-fw-regular  { font-weight: 400; }
  .mc-fw-medium   { font-weight: 500; }
  .mc-fw-semibold { font-weight: 600; }
  .mc-fw-bold     { font-weight: 700; }

  // ---------------------------------------------------------------------------
  // Text alignment utilities
  // ---------------------------------------------------------------------------
  .mc-text-left   { text-align: left; }
  .mc-text-center { text-align: center; }
  .mc-text-right  { text-align: right; }
}