/* Typography Styles */

/* Headers */
h1, .h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

h2, .h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

h3, .h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

h4, .h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* Text gradients */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-primary {
    background: linear-gradient(135deg, var(--color-purple-200), var(--color-purple-100));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Text colors */
.text-white {
    color: var(--color-gray-100);
}

.text-gray {
    color: var(--color-gray-300);
}

.text-gray-light {
    color: var(--color-gray-400);
}

.text-gray-dark {
    color: var(--color-gray-500);
}

.text-purple {
    color: var(--color-purple-100);
}

/* Text sizes */
.text-xs {
    font-size: 11px;
}

.text-sm {
    font-size: 13px;
}

.text-base {
    font-size: 15px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 24px;
}

.text-2xl {
    font-size: 32px;
}

.text-3xl {
    font-size: 48px;
}

/* 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;
}

.font-extrabold {
    font-weight: 800;
}

/* Text align */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Text utilities */
.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}