/*  Date of Note: 05/29/2026
    Every variable here currently only handles desktop views of 1440px and above
    Mobile, iOS, and Android variables may come at a later date...(maybe)
*/
@import "../primitive/typography.css";
:root {
    /* ==========================================================================
                                    # DEFAULT
    ========================================================================== */
    --breakpoint: var(--breakpoint-xl);
    --family: var(--family-inter);

    /* ==========================================================================
                                    # HEADINGS
    ========================================================================== */
    /* HEADING 5XL SEMIBOLD */
    --heading-5xl-semibold-weight: var(--weight-semi-bold);
    --heading-5xl-semibold-size: var(--size-10xl);
    --heading-5xl-semibold-line-height: var(--line-height-10xl);
    --heading-5xl-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING 4XL SEMIBOLD */
    --heading-4xl-semibold-weight: var(--weight-semi-bold);
    --heading-4xl-semibold-size: var(--size-9xl);
    --heading-4xl-semibold-line-height: var(--line-height-9xl);
    --heading-4xl-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING 3XL SEMIBOLD */
    --heading-3xl-semibold-weight: var(--weight-semi-bold);
    --heading-3xl-semibold-size: var(--size-8xl);
    --heading-3xl-semibold-line-height: var(--line-height-8xl);
    --heading-3xl-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING 2XL SEMIBOLD */
    --heading-2xl-semibold-weight: var(--weight-semi-bold);
    --heading-2xl-semibold-size: var(--size-7xl);
    --heading-2xl-semibold-line-height: var(--size-7xl);
    --heading-2xl-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING XL SEMIBOLD */
    --heading-xl-semibold-weight: var(--weight-semi-bold);
    --heading-xl-semibold-size: var(--size-6xl);
    --heading-xl-semibold-line-height: var(--size-6xl);
    --heading-xl-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING L SEMIBOLD */
    --heading-l-semibold-weight: var(--weight-semi-bold);
    --heading-l-semibold-size: var(--size-5xl);
    --heading-l-semibold-line-height: var(--size-5xl);
    --heading-l-semibold-letter-spacing: var(--letter-spacing-xs);

    /* HEADING M SEMIBOLD */
    --heading-m-semibold-weight: var(--weight-semi-bold);
    --heading-m-semibold-size: var(--size-3xl);
    --heading-m-semibold-line-height: var(--size-3xl);
    --heading-m-semibold-letter-spacing: var(--letter-spacing-s);

    /* HEADING S SEMIBOLD */
    --heading-s-semibold-weight: var(--weight-semi-bold);
    --heading-s-semibold-size: var(--size-2xl);
    --heading-s-semibold-line-height: var(--line-height-2xl);
    --heading-s-semibold-letter-spacing: var(--letter-spacing-s);

    /* HEADING XS SEMIBOLD */
    --heading-xs-semibold-weight: var(--weight-semi-bold);
    --heading-xs-semibold-size: var(--size-l);
    --heading-xs-semibold-line-height: var(--line-height-l);
    --heading-xs-semibold-letter-spacing: var(--letter-spacing-s);

    /* HEADING 2XS SEMIBOLD */
    --heading-2xs-semibold-weight: var(--weight-semi-bold);
    --heading-2xs-semibold-size: var(--size-m);
    --heading-2xs-semibold-line-height: var(--line-height-m);
    --heading-2xs-semibold-letter-spacing: var(--letter-spacing-none);

    /* ==========================================================================
                                    # TEXT
    ========================================================================== */
    /* TEXT 3XL SEMIBOLD */
    --text-3xl-semibold-weight: var(--weight-semi-bold);
    --text-3xl-semibold-size: var(--size-5xl);
    --text-3xl-semibold-line-height: var(--line-height-5xl);
    --text-3xl-semibold-letter-spacing: var(--letter-spacing-none);

    /* TEXT XL REGULAR */
    --text-xl-regular-weight: var(--weight-regular);
    --text-xl-regular-size: var(--size-2xl);
    --text-xl-regular-line-height: var(--line-height-2xl);
    --text-xl-regular-letter-spacing: var(--letter-spacing-none);

    /* TEXT XL SEMIBOLD */
    --text-xl-semibold-weight: var(--weight-semi-bold);
    --text-xl-semibold-size: var(--size-2xl);
    --text-xl-semibold-line-height: var(--line-height-2xl);
    --text-xl-semibold-letter-spacing: var(--letter-spacing-none);

    /* TEXT L REGULAR */
    --text-l-regular-weight: var(--weight-regular);
    --text-l-regular-size: var(--size-l);
    --text-l-regular-line-height: var(--line-height-l);
    --text-l-regular-letter-spacing: var(--letter-spacing-none);

    /* TEXT L SEMIBOLD */
    --text-l-semibold-weight: var(--weight-semi-bold);
    --text-l-semibold-size: var(--size-l);
    --text-l-semibold-line-height: var(--line-height-l);
    --text-l-semibold-letter-spacing: var(--letter-spacing-none);

    /* TEXT M REGULAR */
    --text-m-regular-weight: var(--weight-regular);
    --text-m-regular-size: var(--size-m);
    --text-m-regular-line-height: var(--line-height-m);
    --text-m-regular-letter-spacing: var(--letter-spacing-none);

    /* TEXT M SEMIBOLD */
    --text-m-semibold-weight: var(--weight-semi-bold);
    --text-m-semibold-size: var(--size-m);
    --text-m-semibold-line-height: var(--line-height-m);
    --text-m-semibold-letter-spacing: var(--letter-spacing-none);

    /* TEXT S REGULAR */
    --text-s-regular-weight: var(--weight-regular);
    --text-s-regular-size: var(--size-s);
    --text-s-regular-line-height: var(--line-height-s);
    --text-s-regular-letter-spacing: var(--letter-spacing-none);

    /* TEXT S SEMIBOLD */
    --text-s-semibold-weight: var(--weight-semi-bold);
    --text-s-semibold-size: var(--size-s);
    --text-s-semibold-line-height: var(--line-height-s);
    --text-s-semibold-letter-spacing: var(--letter-spacing-none);

    /* TEXT XS REGULAR */
    --text-xs-regular-weight: var(--weight-regular);
    --text-xs-regular-size: var(--size-xs);
    --text-xs-regular-line-height: var(--line-height-xs);
    --text-xs-regular-letter-spacing: var(--letter-spacing-none);

    /* TEXT XS SEMIBOLD */
    --text-xs-semibold-weight: var(--weight-semi-bold);
    --text-xs-semibold-size: var(--size-xs);
    --text-xs-semibold-line-height: var(--line-height-xs);
    --text-xs-semibold-letter-spacing: var(--letter-spacing-none);

    /* ==========================================================================
                                    # PAGE HEADER
                                    move to components or elements
    ========================================================================== */
    --page-header-weight: var(--weight-semi-bold);
    --page-header-size: clamp(1.5rem, 2vw + 1rem, var(--heading-m-semibold-size)); /* Font size range: 20px-24px */
    --page-header-line-height: var(--heading-m-semibold-line-height);
    --page-header-letter-spacing: var(--heading-m-semibold-letter-spacing);

    /* ==========================================================================
                                    # BODY
                                    move to components or elements or base
    =========================================================================== */
    --body-weight: var(--weight-regular);
    --body-size: var(--size-l); /* clamp this */
    --body-line-height: var(--line-height-s);
    --body-letter-spacing: var(--letter-spacing-none);
}