/* ==========================================================================
   PK CMS v1.0 — Typography System
   Google Fonts + Type Scale
   ========================================================================== */

/* ── Font Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

/* ── Base Font ── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Heading Font ── */
h1, h2, h3, h4, h5, h6,
.heading-font {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: var(--text-heading);
    font-weight: 700;
    line-height: 1.2;
}

/* ── Type Scale ── */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.6rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

/* ── Headings ── */
h1, .h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2, .h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

h3, .h3 {
    font-size: clamp(1.375rem, 3vw, 2rem);
}

h4, .h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}

h5, .h5 {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

h6, .h6 {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
}

/* ── Paragraph ── */
p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

p.lead {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ── Small Text ── */
small,
.text-small {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Button Text ── */
.btn-text {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* ── Font Weights ── */
.font-light {
    font-weight: 300;
}

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

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

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

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

/* ── Line Heights ── */
.leading-none {
    line-height: 1;
}

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

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

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

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

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

/* ── Letter Spacing ── */
.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 Transform ── */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* ── Text Alignment ── */
.text-left {
    text-align: left;
}

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

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