/* ================================================================
   PROJECTKART — TYPOGRAPHY
   Premium dark storefront typography system
================================================================ */


/* ================================================================
   BASE TYPOGRAPHY
================================================================ */

body {
    font-family: var(--font-sans);

    color: var(--color-text-primary);

    font-size: 16px;
    font-weight: var(--font-weight-regular);

    line-height: 1.6;

    letter-spacing: -0.012em;
}


/* ================================================================
   HEADINGS
================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color: var(--color-text-primary);

    font-family: var(--font-display);

    font-weight: var(--font-weight-bold);

    letter-spacing: -0.04em;

    text-wrap: balance;
}


h1 {
    font-size: clamp(3.25rem, 6vw, 6.5rem);
    line-height: 0.94;
}


h2 {
    font-size: clamp(2.4rem, 4vw, 4.25rem);
    line-height: 0.98;
}


h3 {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.05;
}


h4 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.15;
}


h5 {
    font-size: 1.125rem;
    line-height: 1.3;
}


h6 {
    font-size: 1rem;
    line-height: 1.4;
}


/* ================================================================
   PARAGRAPHS
================================================================ */

p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: 1rem;
    line-height: 1.7;
}


/* ================================================================
   LEAD TEXT
================================================================ */

.lead {
    max-width: 700px;

    color: var(--color-text-secondary);

    font-size: clamp(
        1.05rem,
        1.5vw,
        1.25rem
    );

    line-height: 1.65;

    letter-spacing: -0.015em;
}


/* ================================================================
   LARGE DISPLAY TEXT
================================================================ */

.display {
    color: var(--color-text-primary);

    font-size: var(--hero-title-size);

    font-weight: var(--font-weight-extrabold);

    line-height: var(--hero-title-line-height);

    letter-spacing: var(--hero-title-spacing);
}


/* ================================================================
   DISPLAY BLUE ACCENT
================================================================ */

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


.text-muted {
    color: var(--color-text-muted);
}


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


.text-success {
    color: var(--color-success);
}


.text-danger {
    color: var(--color-danger);
}


/* ================================================================
   EYEBROW / OVERLINE
================================================================ */

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #7eaaff;

    font-size: 11px;

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.eyebrow::before {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-primary);

    box-shadow:
        0 0 0 4px
        rgba(40, 120, 255, 0.09);
}


/* ================================================================
   SECTION TITLE
================================================================ */

.section-title {
    max-width: 820px;

    margin-bottom: 18px;

    font-size: clamp(
        2.5rem,
        4.5vw,
        4.75rem
    );

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/* ================================================================
   SECTION DESCRIPTION
================================================================ */

.section-description {
    max-width: 650px;

    color: var(--color-text-secondary);

    font-size: 1.05rem;

    line-height: 1.7;
}


/* ================================================================
   SECTION HEADER
================================================================ */

.section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 52px;
}


.section-header__content {
    min-width: 0;
}


.section-header__action {
    flex-shrink: 0;
}


/* ================================================================
   LABEL
================================================================ */

.label {
    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* ================================================================
   SMALL TEXT
================================================================ */

.text-small {
    font-size: 13px;

    line-height: 1.5;
}


.text-xs {
    font-size: 11px;

    line-height: 1.4;
}


/* ================================================================
   MONOSPACE / TECHNICAL TEXT
================================================================ */

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

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.technical {
    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: 10px;

    font-weight: var(--font-weight-medium);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* ================================================================
   PRICE
================================================================ */

.price {
    color: var(--color-text-primary);

    font-size: 1.15rem;

    font-weight: var(--font-weight-bold);

    line-height: 1.2;

    letter-spacing: -0.025em;
}


.price--large {
    font-size: clamp(
        1.75rem,
        3vw,
        2.5rem
    );

    letter-spacing: -0.04em;
}


.price--old {
    margin-left: 7px;

    color: var(--color-text-muted);

    font-size: 0.88rem;

    font-weight: var(--font-weight-regular);

    text-decoration:
        line-through;

    text-decoration-color:
        rgba(255, 255, 255, 0.35);
}


/* ================================================================
   PRODUCT TITLE
================================================================ */

.product-title {
    color: var(--color-text-primary);

    font-size: 1rem;

    font-weight: var(--font-weight-semibold);

    line-height: 1.35;

    letter-spacing: -0.018em;
}


.product-title a {
    transition:
        color var(--transition-base);
}


.product-title a:hover {
    color: #76aaff;
}


/* ================================================================
   CATEGORY NAME
================================================================ */

.category-name {
    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: var(--font-weight-semibold);

    line-height: 1.3;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* ================================================================
   NAVIGATION TEXT
================================================================ */

.nav-text {
    font-size: 13px;

    font-weight: var(--font-weight-medium);

    line-height: 1.2;

    letter-spacing: -0.005em;
}


/* ================================================================
   BUTTON TEXT
================================================================ */

.button-text {
    font-size: 13px;

    font-weight: var(--font-weight-semibold);

    line-height: 1;

    letter-spacing: -0.005em;
}


/* ================================================================
   LINK WITH ARROW
================================================================ */

.link-arrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--color-text-primary);

    font-size: 13px;

    font-weight: var(--font-weight-semibold);

    transition:
        color var(--transition-base),
        gap var(--transition-medium);
}


.link-arrow span {
    transition:
        transform var(--transition-medium);
}


.link-arrow:hover {
    color: #78aaff;

    gap: 11px;
}


.link-arrow:hover span {
    transform: translateX(2px);
}


/* ================================================================
   QUOTE
================================================================ */

.quote {
    max-width: 760px;

    color: var(--color-text-primary);

    font-size: clamp(
        1.5rem,
        3vw,
        2.5rem
    );

    font-weight: var(--font-weight-medium);

    line-height: 1.2;

    letter-spacing: -0.04em;
}


/* ================================================================
   HIGHLIGHT
================================================================ */

.highlight {
    color: var(--color-primary);
}


/* ================================================================
   GRADIENT TEXT
================================================================ */

.gradient-text {
    background:
        linear-gradient(
            100deg,
            #ffffff 10%,
            #6da2ff 90%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ================================================================
   TRUNCATION
================================================================ */

.text-truncate {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.line-clamp-2 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.line-clamp-3 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* ================================================================
   WEIGHTS
================================================================ */

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


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


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


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


.fw-800 {
    font-weight: 800;
}


/* ================================================================
   ALIGNMENT
================================================================ */

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


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


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


/* ================================================================
   SECTION HEADER RESPONSIVE
================================================================ */

@media (max-width: 768px) {

    .section-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 24px;

        margin-bottom: 36px;
    }

    .section-title {
        font-size: clamp(
            2.25rem,
            10vw,
            3.5rem
        );
    }

    .lead {
        font-size: 1rem;
    }

    .quote {
        font-size: 1.5rem;
    }
}


@media (max-width: 480px) {

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .eyebrow {
        font-size: 10px;

        letter-spacing: 0.11em;
    }
}