/**

 * SayWOW Typography

 * Brand Design System v2.0 — SPEC Section 2

 *

 * Type scale utility classes for consistent typography across all SayWOW modules.

 * All values sourced from 00-SPEC-BRAND-DESIGN-SYSTEM.md Section 2.2 & 2.3.

 *

 * @package SayWOW_Admin_Pro

 * @since 19.7.0

 */



/* ============================================

   TYPE SCALE — SPEC Section 2.2

   ============================================ */



/* Display / Hero — 48px / 3rem / 800 */

.sw-display {

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

    font-size: 3rem;

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

    letter-spacing: -1px;

    line-height: 1.1;

    color: var(--sw-grey-900);

}



/* H1 — Page Title — 32px / 2rem / 800 */

.sw-h1 {

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

    font-size: 2rem;

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

    letter-spacing: -0.5px;

    line-height: 1.2;

    color: var(--sw-grey-900);

}



/* H2 — Section — 24px / 1.5rem / 700 */

.sw-h2 {

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

    font-size: 1.5rem;

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

    letter-spacing: -0.3px;

    line-height: 1.3;

    color: var(--sw-grey-900);

}



/* H3 — Card Title — 18px / 1.125rem / 700 */

.sw-h3 {

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

    font-size: 1.125rem;

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

    letter-spacing: 0;

    line-height: 1.4;

    color: var(--sw-grey-900);

}



/* H4 — Subsection — 16px / 1rem / 700 */

.sw-h4 {

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

    font-size: 1rem;

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

    letter-spacing: 0;

    line-height: 1.4;

    color: var(--sw-grey-900);

}



/* Body — 16px / 1rem / 400 */

.sw-body {

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

    font-size: 1rem;

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

    letter-spacing: 0;

    line-height: 1.6;

    color: var(--sw-grey-900);

}



/* Body Medium — 16px / 1rem / 500 */

.sw-body-medium {

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

    font-size: 1rem;

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

    letter-spacing: 0;

    line-height: 1.5;

    color: var(--sw-grey-900);

}



/* Body Small — 14px / 0.875rem / 400 */

.sw-body-sm {

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

    font-size: 0.875rem;

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

    letter-spacing: 0;

    line-height: 1.5;

    color: var(--sw-grey-500);

}



/* Caption — 12px / 0.75rem / 500 */

.sw-caption {

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

    font-size: 0.75rem;

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

    letter-spacing: 0;

    line-height: 1.4;

    color: var(--sw-grey-300);

}



/* Price — 20px / 1.25rem / 800 */

.sw-price {

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

    font-size: 1.25rem;

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

    letter-spacing: 0;

    line-height: 1.2;

    color: var(--sw-red);

}



/* Nav Links — 14px / 0.875rem / 500 */

.sw-nav-link {

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

    font-size: 0.875rem;

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

    letter-spacing: 0;

    line-height: 1.4;

    text-decoration: none;

}



/* Logo text — responsive / 800 */

.sw-logo-text {

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

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

    letter-spacing: -2px;

    line-height: 1;

}



/* ============================================

   COLOUR UTILITIES

   ============================================ */



.sw-text-blue { color: var(--sw-blue); }

.sw-text-red { color: var(--sw-red); }

.sw-text-gold { color: var(--sw-gold); }

.sw-text-green { color: var(--sw-green); }

.sw-text-900 { color: var(--sw-grey-900); }

.sw-text-500 { color: var(--sw-grey-500); }

.sw-text-300 { color: var(--sw-grey-300); }

.sw-text-white { color: var(--sw-white); }



/* ============================================

   WEIGHT UTILITIES

   ============================================ */



.sw-fw-regular { font-weight: var(--sw-fw-regular); }

.sw-fw-medium { font-weight: var(--sw-fw-medium); }

.sw-fw-semibold { font-weight: var(--sw-fw-semibold); }

.sw-fw-bold { font-weight: var(--sw-fw-bold); }

.sw-fw-extrabold { font-weight: var(--sw-fw-extrabold); }



/* ============================================

   LINK STYLING

   ============================================ */



.sw-link {

    color: var(--sw-blue);

    text-decoration: none;

    transition: var(--sw-transition);

}



.sw-link:hover {

    color: var(--sw-blue-dark);

    text-decoration: underline;

}



.sw-link:active {

    color: var(--sw-blue-darkest);

}



.sw-link--white {

    color: var(--sw-white);

    opacity: 0.85;

}



.sw-link--white:hover {

    color: var(--sw-white);

    opacity: 1;

}



/* ============================================

   SEMANTIC ALERT TEXT

   ============================================ */



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

.sw-text-error { color: var(--sw-error-text); }

.sw-text-info { color: var(--sw-info-text); }

.sw-text-warning { color: var(--sw-warning-text); }



/* ============================================

   MOBILE RESPONSIVE

   ============================================ */



@media (max-width: 768px) {

    .sw-display {

        font-size: 2rem;

        letter-spacing: -0.5px;

    }



    .sw-h1 {

        font-size: 1.5rem;

        letter-spacing: -0.3px;

    }



    .sw-h2 {

        font-size: 1.25rem;

    }



    .sw-price {

        font-size: 1.125rem;

    }

}