/* ===========================================
   Typography
   ===========================================
   Font definitions and text styles.
   =========================================== */

@layer base {
  /* Font family definitions */
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;

    /* Font sizes */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */
    --text-5xl:  3rem;      /* 48px */
    --text-6xl:  4rem;      /* 64px */

    /* Font weights */
    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* Line heights */
    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose:  2;
  }

  /* Base typography */
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
  }

  /* Headings */
  h1, .h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: -0.025em;
  }

  h2, .h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    letter-spacing: -0.025em;
  }

  h3, .h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
  }

  h4, .h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
  }

  h5, .h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
  }

  h6, .h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
  }

  /* Paragraph */
  p {
    margin-bottom: var(--space-4);
  }

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

  /* Small text */
  small, .text-sm {
    font-size: var(--text-sm);
  }

  .text-xs {
    font-size: var(--text-xs);
  }

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

  /* Lead paragraph */
  .lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }

  /* Monospace / Code */
  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
  }

  code {
    padding: 0.125em 0.25em;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-sm);
  }

  pre {
    padding: var(--space-4);
    background-color: var(--color-gray-900);
    color: var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow-x: auto;
  }

  pre code {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  /* Strong and emphasis */
  strong, b {
    font-weight: var(--font-bold);
  }

  /* Blockquote */
  blockquote {
    padding-left: var(--space-4);
    border-left: 4px solid var(--color-primary-300);
    font-style: italic;
    color: var(--color-text-muted);
  }

  /* Lists */
  ul, ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
  }

  li {
    margin-bottom: var(--space-1);
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
  }

  /* Mark / Highlight */
  mark {
    background-color: var(--color-warning-light);
    padding: 0.125em 0.25em;
    border-radius: var(--radius-sm);
  }

  /* Selection */
  ::selection {
    background-color: var(--color-primary-200);
    color: var(--color-primary-900);
  }
} /* End @layer base */