/* ============================================
   AIGeneralist.Club — Typography System
   Inter · Modern · Tech-forward · Readable
   ============================================ */

:root {
    /* Font families */
    --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Scale (rem-based, 1rem = 16px) */
    --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 */

    /* Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Heading letter-spacing */
    --tracking-heading: -0.02em;

    /* Bootstrap integration */
    --bs-font-sans-serif: var(--font-main);
    --bs-body-font-family: var(--font-main);
    --bs-body-font-size: var(--text-base);
    --bs-body-font-weight: var(--font-weight-regular);
    --bs-body-line-height: var(--leading-normal);
}

/* Base — 16px root for consistent rem scaling */
html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-color, #1A1A1A);
}

/* Heading hierarchy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-heading);
    color: inherit;
}

h1, .h1 {
    font-size: clamp(2rem, 1.5rem + 2vw, var(--text-5xl));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--leading-tight);
}

h2, .h2 {
    font-size: clamp(1.75rem, 1.35rem + 1.5vw, var(--text-4xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
}

h3, .h3 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, var(--text-3xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-snug);
}

h4, .h4 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
}

h5, .h5 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: normal;
}

h6, .h6 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    letter-spacing: normal;
}

/* Body text utilities */
.text-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-weight-regular);
}

.text-small {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-caption {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    letter-spacing: 0.01em;
}

/* Weight utilities */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold    { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Inherit Inter across interactive elements */
button,
input,
select,
textarea,
.btn {
    font-family: inherit;
}