@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
    font-family: 'Coolvetica Rg';
    src: url('./fonts/coolvetica/Coolvetica Rg.otf') format('opentype');
    font-display: swap;
  }
/* CHANGE VALUE HERE FOR DESKTOP - START */

:root {
    /* Root-Level Base (Default for h1–h6, p) */
    /* --root-font-body: 16px;
    --root-scale-ratio: 1.175; */

    /* Class-Level Base (For .h1, .h2, .body-md, etc.) */
    --class-font-body: 16px;
    --class-scale-ratio: 1.250;

    /* Computed Root Font Sizes */
    --root-h6: calc(var(--root-font-body) * var(--root-scale-ratio));
    --root-h5: calc(var(--root-h6) * var(--root-scale-ratio));
    --root-h4: calc(var(--root-h5) * var(--root-scale-ratio));
    --root-h3: calc(var(--root-h4) * var(--root-scale-ratio));
    --root-h2: calc(var(--root-h3) * var(--root-scale-ratio));
    --root-h1: calc(var(--root-h2) * var(--root-scale-ratio));

    /* Computed Class-Based Font Sizes */
    --class-h6: calc(var(--class-font-body) * var(--class-scale-ratio));
    --class-h5: calc(var(--class-h6) * var(--class-scale-ratio));
    --class-h4: calc(var(--class-h5) * var(--class-scale-ratio));
    --class-h3: calc(var(--class-h4) * var(--class-scale-ratio));
    --class-h2: calc(var(--class-h3) * var(--class-scale-ratio));
    --class-h1: calc(var(--class-h2) * var(--class-scale-ratio));

    /* Font Families */
    --class-heading-font: Coolvetica Rg, sans-serif;
    --class-body-font: Inter, sans-serif;
    
    /* Font Weights */
    /* --class-heading-weight: 800; */
    --class-body-weight: 400;

    /* Font Leading (Line Height) */
    --class-heading-leading: 1.05;
    --class-body-leading: 1.6;

    /* Font Rendering */
    -webkit-font-smoothing: antialiased;
    /* -moz-osx-font-smoothing: grayscale; */
}

/* CHANGE VALUE HERE FOR DESKTOP - END */

/* Tablet (Medium Screens) */
@media (max-width: 1024px) {
    :root {
        --root-font-body: 16px;
        --root-scale-ratio: 1.150;
        --class-font-body: 18px;
        --class-scale-ratio: 1.125;
    }
}

/* Mobile (Small Screens) */
@media (max-width: 768px) {
    :root {
        --root-font-body: 16px;
        --root-scale-ratio: 1.25;
        --class-font-body: 16px;
        --class-scale-ratio: 1.180;
    }
}

/* Root-Level Typography */
/* h1 {
    font-size: var(--root-h1);
}

h2 {
    font-size: var(--root-h2);
}

h3 {
    font-size: var(--root-h3);
}

h4 {
    font-size: var(--root-h4);
}

h5 {
    font-size: var(--root-h5);
}

h6 {
    font-size: var(--root-h6);
}

p {
    font-size: var(--root-font-body);
} */

/* Class-Based Typography */
.h1 {
    font-size: var(--class-h1);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}
.h2 {
    font-size: var(--class-h2);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}

.h3 {
    font-size: var(--class-h3);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}

.h4 {
    font-size: var(--class-h4);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}

.h5 {
    font-size: var(--class-h5);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}

.h6 {
    font-size: var(--class-h6);
    font-family: var(--class-heading-font);
    font-weight: var(--class-heading-weight);
    line-height: var(--class-heading-leading);
}

.body-sm {
    font-size: calc(var(--class-font-body) / var(--class-scale-ratio));
    font-family: var(--class-body-font);
    font-weight: var(--class-body-weight);
    line-height: var(--class-body-leading);
}

.body-md {
    font-size: var(--class-font-body);
    font-family: var(--class-body-font);
    font-weight: var(--class-body-weight);
    line-height: var(--class-body-leading);
}

.body-lg {
    font-size: calc(var(--class-font-body) * var(--class-scale-ratio));
    font-family: var(--class-body-font);
    font-weight: var(--class-body-weight);
    line-height: var(--class-body-leading);
}