/* Typography System */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-dark);
    background-color: var(--bg-paper);
}

/* Heading Hierarchy */
h1,
.h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

h2,
.h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-sm);
}

h3,
.h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-sm);
}

h4,
.h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-xs);
}

h5,
.h5 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-xs);
}

h6,
.h6 {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Body Text */
p {
    margin-bottom: var(--space-sm);
    line-height: var(--leading-relaxed);
}

/* Technical/Monospace Text */
.mono,
code,
pre {
    font-family: var(--font-mono);
}

/* Utility Classes */
.text-xs {
    font-size: var(--text-xs);
}

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

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

.text-lg,
.text-large {
    font-size: var(--text-lg);
}

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

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

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

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

.text-primary {
    color: var(--primary-green);
}

.text-secondary {
    color: var(--secondary-blue);
}

.text-accent {
    color: var(--accent-green);
}

/* Responsive Typography - Scales appropriately across breakpoints */
@media (max-width: 1023px) {

    /* Tablet scaling */
    h1,
    .h1 {
        font-size: var(--text-2xl);
    }

    h2,
    .h2 {
        font-size: var(--text-xl);
    }

    h3,
    .h3 {
        font-size: var(--text-lg);
    }
}

@media (max-width: 767px) {

    /* Mobile scaling */
    h1,
    .h1 {
        font-size: var(--text-xl);
        margin-bottom: var(--space-sm);
    }

    h2,
    .h2 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-xs);
    }

    h3,
    .h3 {
        font-size: var(--text-base);
        margin-bottom: var(--space-xs);
    }

    body {
        font-size: var(--text-sm);
        line-height: var(--leading-relaxed);
    }

    p {
        margin-bottom: var(--space-xs);
    }
}

@media (max-width: 480px) {

    /* Small mobile optimization */
    h1,
    .h1 {
        font-size: var(--text-lg);
    }

    h2,
    .h2 {
        font-size: var(--text-base);
    }

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

/* Spacing Utility Classes */
.m-0 {
    margin: 0;
}

.m-xs {
    margin: var(--space-xs);
}

.m-sm {
    margin: var(--space-sm);
}

.m-md {
    margin: var(--space-md);
}

.m-lg {
    margin: var(--space-lg);
}

.m-xl {
    margin: var(--space-xl);
}

.m-xxl {
    margin: var(--space-xxl);
}

.mt-0 {
    margin-top: 0;
}

.mt-xs {
    margin-top: var(--space-xs);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mt-xxl {
    margin-top: var(--space-xxl);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

.mb-xxl {
    margin-bottom: var(--space-xxl);
}

.ml-0 {
    margin-left: 0;
}

.ml-xs {
    margin-left: var(--space-xs);
}

.ml-sm {
    margin-left: var(--space-sm);
}

.ml-md {
    margin-left: var(--space-md);
}

.ml-lg {
    margin-left: var(--space-lg);
}

.ml-xl {
    margin-left: var(--space-xl);
}

.ml-xxl {
    margin-left: var(--space-xxl);
}

.mr-0 {
    margin-right: 0;
}

.mr-xs {
    margin-right: var(--space-xs);
}

.mr-sm {
    margin-right: var(--space-sm);
}

.mr-md {
    margin-right: var(--space-md);
}

.mr-lg {
    margin-right: var(--space-lg);
}

.mr-xl {
    margin-right: var(--space-xl);
}

.mr-xxl {
    margin-right: var(--space-xxl);
}

.p-0 {
    padding: 0;
}

.p-xs {
    padding: var(--space-xs);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl);
}

.p-xxl {
    padding: var(--space-xxl);
}

.pt-0 {
    padding-top: 0;
}

.pt-xs {
    padding-top: var(--space-xs);
}

.pt-sm {
    padding-top: var(--space-sm);
}

.pt-md {
    padding-top: var(--space-md);
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pt-xl {
    padding-top: var(--space-xl);
}

.pt-xxl {
    padding-top: var(--space-xxl);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-xs {
    padding-bottom: var(--space-xs);
}

.pb-sm {
    padding-bottom: var(--space-sm);
}

.pb-md {
    padding-bottom: var(--space-md);
}

.pb-lg {
    padding-bottom: var(--space-lg);
}

.pb-xl {
    padding-bottom: var(--space-xl);
}

.pb-xxl {
    padding-bottom: var(--space-xxl);
}

.pl-0 {
    padding-left: 0;
}

.pl-xs {
    padding-left: var(--space-xs);
}

.pl-sm {
    padding-left: var(--space-sm);
}

.pl-md {
    padding-left: var(--space-md);
}

.pl-lg {
    padding-left: var(--space-lg);
}

.pl-xl {
    padding-left: var(--space-xl);
}

.pl-xxl {
    padding-left: var(--space-xxl);
}

.pr-0 {
    padding-right: 0;
}

.pr-xs {
    padding-right: var(--space-xs);
}

.pr-sm {
    padding-right: var(--space-sm);
}

.pr-md {
    padding-right: var(--space-md);
}

.pr-lg {
    padding-right: var(--space-lg);
}

.pr-xl {
    padding-right: var(--space-xl);
}

.pr-xxl {
    padding-right: var(--space-xxl);
}

/* Line Height Utilities */
.leading-tight {
    line-height: var(--leading-tight);
}

.leading-normal {
    line-height: var(--leading-normal);
}

.leading-relaxed {
    line-height: var(--leading-relaxed);
}

/* Font Weight Utilities */
.font-normal {
    font-weight: var(--font-weight-normal);
}

.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 Family Utilities */
.font-primary {
    font-family: var(--font-primary);
}

.font-mono {
    font-family: var(--font-mono);
}