/* ================================================================
   Contentious typography system
   Source: style.contentious.ltd/design/typography

   Layer order (declared in layers.css):
     @layer tokens, theme, base, components, utilities

   - Typography tokens   → @layer tokens
   - Responsive scale    → @layer base
   - Type utilities      → @layer components
   - .prose              → unlayered (beats @tailwindcss/typography's
                           unlayered :where() selectors)
   ================================================================ */

@layer tokens {
  :root {
    --base-font-size: 24px;
    --text-multiplier: 1;
    --heading-line-height: 1.2em;
    --body-line-height: 1.4em;

    --font-body: 'bely', serif;
    --font-heading: 'bely', serif;
    --font-heading-display: 'bely-display', serif;
    --font-mono: 'Courier New', monospace;

    /* Type scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: var(--base-font-size);
    --font-size-h3: calc(1.5em * var(--text-multiplier));
    --font-size-h2: calc(2.8em * var(--text-multiplier));
    --font-size-h1: calc(3.5em * var(--text-multiplier));

    /* Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line-height scale */
    --line-height-tight: 1;
    --line-height-snug: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.8;
  }
}

/* ----------------------------------------------------------------
   Responsive text-multiplier
   Scales the entire type system from a single token.
   ---------------------------------------------------------------- */

@layer base {
  @media (max-width: 32rem) {
    :root {
      --text-multiplier: 1;
    }
  }

  @media (min-width: 48rem) {
    :root {
      --text-multiplier: 1.1;
    }
  }

  @media (min-width: 96rem) {
    :root {
      --text-multiplier: 1.2;
    }
  }
}

/* ----------------------------------------------------------------
   Article prose — Learn pages
   Unlayered so it beats @tailwindcss/typography's :where() rules.
   ---------------------------------------------------------------- */

.prose {
  color: var(--foreground);
  font-size: var(--base-font-size);
  line-height: var(--body-line-height);
}

.prose p {
  margin-bottom: 1em;
  line-height: var(--body-line-height);
  font-size: calc(1em * var(--text-multiplier));
}

.prose h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-h2);
  line-height: var(--heading-line-height);
  color: var(--foreground);
  margin-top: 1.5em;
  margin-bottom: 0.2em;
}

.prose h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-h3);
  line-height: var(--heading-line-height);
  color: var(--foreground);
  margin-top: 1.5em;
  margin-bottom: 0.2em;
}

.prose ul,
.prose ol {
  padding-left: 2em;
  margin-bottom: 1em;
  line-height: var(--body-line-height);
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.5em;
  font-size: calc(1em * var(--text-multiplier));
  line-height: var(--body-line-height);
}

.prose li::marker {
  color: var(--sorbet-700);
}

.prose strong {
  font-weight: var(--font-weight-semibold);
}

.prose em {
  font-style: italic;
}

/* ----------------------------------------------------------------
   Type-system utility classes
   All sizes derive from --base-font-size and --text-multiplier
   so the entire UI scales from a single token.
   ---------------------------------------------------------------- */

@layer components {
  .type-h1 {
    font-size: var(--font-size-h1);
    line-height: var(--heading-line-height);
  }

  .type-h2 {
    font-size: var(--font-size-h2);
    line-height: var(--heading-line-height);
  }

  .type-h3 {
    font-size: var(--font-size-h3);
    line-height: var(--heading-line-height);
  }

  .type-body {
    font-size: calc(1em * var(--text-multiplier));
    line-height: var(--body-line-height);
  }

  .type-intro {
    font-size: calc(1.3em * var(--text-multiplier));
    line-height: var(--body-line-height);
  }

  .type-sm {
    font-size: var(--font-size-sm);
    line-height: var(--body-line-height);
  }

  .type-xs {
    font-size: var(--font-size-xs);
    line-height: var(--body-line-height);
  }

  .type-accent {
    font-size: calc(2em * var(--text-multiplier));
    line-height: var(--heading-line-height);
  }

  /* Display heading — switches to bely-display face */
  .display-heading {
    font-family: var(--font-heading-display);
  }
}