/* ==========================================================================
   Responsive Typography Utilities (Fluid Clamp)
   ========================================================================== */

/* Target: 12px (0.75rem) - Captions, labels, tooltips */
.cmn-fs-12 {
    font-size: clamp(0.75rem, 0.74rem + 0.05vw, 0.8rem) !important;
}

/* Target: 14px (0.875rem) - Secondary body text, sidebars, meta data */
.cmn-fs-14 {
    font-size: clamp(0.85rem, 0.84rem + 0.05vw, 0.92rem) !important;
}

/* Target: 16px (1rem) - Standard body text */
.cmn-fs-16 {
    font-size: clamp(0.95rem, 0.93rem + 0.1vw, 1.05rem) !important;
}

/* Target: 18px (1.125rem) - Large body text, UI buttons, lead paragraphs */
.cmn-fs-18 {
    font-size: clamp(1.05rem, 1.01rem + 0.2vw, 1.2rem) !important;
}

/* Target: 20px (1.25rem) - Card headers, blockquotes, sub-sections */
.cmn-fs-20 {
    font-size: clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem) !important;
}

/* Target: 24px (1.5rem) - Subheadings, card titles */
.cmn-fs-24 {
    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.65rem) !important;
}

/* Target: 32px (2rem) - H3 elements, major section headers */
.cmn-fs-32 {
    font-size: clamp(1.6rem, 1.45rem + 0.75vw, 2.25rem) !important;
}

/* Target: 36px (2.25rem) - Section titles, prominent subheaders */
.cmn-fs-36 {
    font-size: clamp(1.75rem, 1.55rem + 1vw, 2.5rem) !important;
}

/* Target: 40px (2.5rem) - Secondary headers, large feature titles */
.cmn-fs-40 {
    font-size: clamp(1.875rem, 1.66rem + 1.05vw, 2.75rem) !important;
}

/* Target: 48px (3rem) - H2 elements, page headers */
.cmn-fs-48 {
    font-size: clamp(2.25rem, 1.84rem + 2.05vw, 3.5rem) !important;
}

/* Target: 64px (4rem) - H1 elements, prominent hero titles */
.cmn-fs-64 {
    font-size: clamp(2.75rem, 2.11rem + 3.2vw, 4.75rem) !important;
}

/* Target: 72px (4.5rem) - Large hero display text */
.cmn-fs-72 {
    font-size: clamp(3rem, 2.23rem + 3.85vw, 5.5rem) !important;
}

/* Target: 96px (6rem) - Giant hero headers, massive numbers/stats */
.cmn-fs-96 {
    font-size: clamp(3.25rem, 2.07rem + 5.9vw, 6.5rem) !important;
}

/* Target: 110px (6.875rem) - Massive cinematic text, impact stats */
.cmn-fs-110 {
    font-size: clamp(3.5rem, 1.77rem + 8.65vw, 8.5rem) !important;
}

.cmn-fs-128 {
    font-size: clamp(4rem, 1.9rem + 10.5vw, 10rem) !important;
}

/* ==========================================================================
   Font Family Utilities
   ========================================================================== */

.cmn-ff-ubuntu {
    font-family: "Ubuntu", sans-serif !important;
    font-weight: 400 !important;
}

.cmn-ff-ubuntuthin {
    font-family: "UbuntuThin", sans-serif !important;
}

.cmn-ff-ubuntulight {
    font-family: "UbuntuLight", sans-serif !important;
}

.cmn-ff-ubuntumedium {
    font-family: "UbuntuMedium", sans-serif !important;
}

.cmn-ff-ubuntubold {
    font-family: "UbuntuBold", sans-serif !important;
}

/* ==========================================================================
   Color Utilities
   ========================================================================== */

.cmn-fc-white {
    color: #ffffff !important;
}

.cmn-fc-black {
    color: #010A2D !important;
}

.cmn-fc-gray {
    color: #A1A1A1 !important;
}

.cmn-fc-black-050 {
    color: rgba(1, 10, 45, 0.5) !important;
}

.cmn-fc-black-090 {
    color: rgba(1, 10, 45, 0.9) !important;
}


.cmn-fc-red {
    color: #c01466 !important;
}

.cmn-fc-lightblue{ 
    color: #b0deed !important;
}

.cmn-fc-darkblue {
    color: #010a2d !important;
}

.cmn-fc-lightgreen{ 
    color: #34C3B8 !important;
}

.cmn-fc-purple{ 
    color: #624D9D !important;
}

.cmn-fc-yellow{ 
    color: #B47E0F !important;
}