/* Define custom properties for font sizes */
:root {
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-m: 0.95rem;
    --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: 3.75rem;  /* 60px */
    --text-7xl: 4.5rem;   /* 72px */
    --text-8xl: 6rem;     /* 96px */
    --text-9xl: 8rem;     /* 128px */
}

/* Heading styles using variables */
h1 {
    font-size: var(--text-6xl);
    line-height: 1.2;
    margin: 0.5em 0;
}

h2 {
    font-size: var(--text-5xl);
    line-height: 1.3;
    margin: 0.5em 0;
}

h3 {
    font-size: var(--text-4xl);
    line-height: 1.4;
    margin: 0.5em 0;
}

h4 {
    font-size: var(--text-3xl);
    line-height: 1.5;
    margin: 0.5em 0;
}

h5 {
    font-size: var(--text-2xl);
    line-height: 1.6;
    margin: 0.5em 0;
}

h6 {
    font-size: var(--text-xl);
    line-height: 1.6;
    margin: 0.5em 0;
}

/* Paragraph style using variable */
p {
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0.5em 0;
}


.text-weight-200{
    font-weight: 200;
}
.text-weight-300{
    font-weight: 300;
}
.text-weight-400{
    font-weight: 400;
}
.text-weight-500{
    font-weight: 500;
}
.text-weight-600{
    font-weight: 600;
}
.text-weight-700{
    font-weight: 700;
}
.text-weight-800{
    font-weight: 800;
}

.text-weight-900{
    font-weight: 900;
}


.upper-case{
    text-transform: uppercase;
}
.ls-xs{
    letter-spacing: 0.01em;
}
.ls-xs{
    letter-spacing: 0.03em;
}
.ls-m{
    letter-spacing: 0.08em;
}
.ls-l{
    letter-spacing: 0.15em;
}
.ls-xm{
    letter-spacing: 0.2em;
}

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

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

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

.text-lg {
    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-4xl {
    font-size: var(--text-4xl);
}

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

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

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

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

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