////
///
/// Paragraph Heading Output
/// ===========================================================================
///
/// CSS output for heading paragraph styles.
///
/// @group Typography.Paragraph.Heading
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@use "../../../../01-core/prefix" as *;
@use "./paragraph-heading.mixins" as heading;

@layer ss.typography {
    h1 {
        @include heading.ss-paragraph-heading(1);
    }
    h2 {
        @include heading.ss-paragraph-heading(2);
    }
    h3 {
        @include heading.ss-paragraph-heading(3);
    }
    h4 {
        @include heading.ss-paragraph-heading(4);
    }
    h5 {
        @include heading.ss-paragraph-heading(5);
    }
    h6 {
        @include heading.ss-paragraph-heading(6);
    }

    // Utility classes
    .#{$ss-prefix-typography}-h1 {
        @include heading.ss-paragraph-heading(1);
    }
    .#{$ss-prefix-typography}-h2 {
        @include heading.ss-paragraph-heading(2);
    }
    .#{$ss-prefix-typography}-h3 {
        @include heading.ss-paragraph-heading(3);
    }
    .#{$ss-prefix-typography}-h4 {
        @include heading.ss-paragraph-heading(4);
    }
    .#{$ss-prefix-typography}-h5 {
        @include heading.ss-paragraph-heading(5);
    }
    .#{$ss-prefix-typography}-h6 {
        @include heading.ss-paragraph-heading(6);
    }

    // Caps modifiers
    .#{$ss-prefix-typography}-h1--caps {
        @include heading.ss-paragraph-heading(1, true);
    }
    .#{$ss-prefix-typography}-h2--caps {
        @include heading.ss-paragraph-heading(2, true);
    }
    .#{$ss-prefix-typography}-h3--caps {
        @include heading.ss-paragraph-heading(3, true);
    }
    .#{$ss-prefix-typography}-h4--caps {
        @include heading.ss-paragraph-heading(4, true);
    }
    .#{$ss-prefix-typography}-h5--caps {
        @include heading.ss-paragraph-heading(5, true);
    }
    .#{$ss-prefix-typography}-h6--caps {
        @include heading.ss-paragraph-heading(6, true);
    }
}

// @use "./paragraph-heading.mixins" as mixins;

// // ============================================================================
// // Output
// // ============================================================================

// // Level classes
// .ss-h1 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h1);
// }

// .ss-h2 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h2);
// }

// .ss-h3 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h3);
// }

// .ss-h4 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h4);
// }

// .ss-h5 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h5);
// }

// .ss-h6 {
//     @include mixins.paragraph-heading-spaced;
//     @include mixins.paragraph-heading-level(h6);
// }

// // Display headings (larger variants)
// .ss-display-1 {
//     @include mixins.paragraph-heading-base;
//     font-size: var(--ss-font-size-7xl);
//     letter-spacing: var(--ss-tracking-tighter);
// }

// .ss-display-2 {
//     @include mixins.paragraph-heading-base;
//     font-size: var(--ss-font-size-6xl);
//     letter-spacing: var(--ss-tracking-tighter);
// }

// .ss-display-3 {
//     @include mixins.paragraph-heading-base;
//     font-size: var(--ss-font-size-5xl);
//     letter-spacing: var(--ss-tracking-tight);
// }

// ----

// ////
// ///
// /// Heading Paragraph
// /// ===========================================================================
// ///
// /// Heading typography styles.
// ///
// /// @group Typography.Paragraph
// /// @author Scape Press
// /// @link https://scape.style
// /// @since 0.1.0 initial release
// /// @access public
// ///
// ////

// .ss-h1 {
//     font-size: var(--ss-font-size-5xl);
//     font-weight: var(--ss-font-weight-bold);
//     line-height: var(--ss-leading-heading);
//     letter-spacing: var(--ss-tracking-tight);
// }

// .ss-h2 {
//     font-size: var(--ss-font-size-4xl);
//     font-weight: var(--ss-font-weight-bold);
//     line-height: var(--ss-leading-heading);
//     letter-spacing: var(--ss-tracking-tight);
// }

// .ss-h3 {
//     font-size: var(--ss-font-size-3xl);
//     font-weight: var(--ss-font-weight-semibold);
//     line-height: var(--ss-leading-heading);
// }

// .ss-h4 {
//     font-size: var(--ss-font-size-2xl);
//     font-weight: var(--ss-font-weight-semibold);
//     line-height: var(--ss-leading-heading);
// }

// .ss-h5 {
//     font-size: var(--ss-font-size-xl);
//     font-weight: var(--ss-font-weight-medium);
//     line-height: var(--ss-leading-heading);
// }

// .ss-h6 {
//     font-size: var(--ss-font-size-lg);
//     font-weight: var(--ss-font-weight-medium);
//     line-height: var(--ss-leading-heading);
// }