/**
 * Chemistry Hub - Global Text Customization Utilities
 */

/* =====================================================
   Global Font Family Classes
   ===================================================== */
.ch-font-arabic {
    font-family: 'Cairo', 'Tajawal', 'Amiri', sans-serif !important;
}

.ch-font-english {
    font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif !important;
}

.ch-font-heading-arabic {
    font-family: 'Cairo', 'Tajawal', serif !important;
    font-weight: 700 !important;
}

.ch-font-heading-english {
    font-family: 'Inter', 'Montserrat', 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

/* =====================================================
   Text Alignment Classes
   ===================================================== */
.ch-text-left {
    text-align: left !important;
}

.ch-text-center {
    text-align: center !important;
}

.ch-text-right {
    text-align: right !important;
}

.ch-text-justify {
    text-align: justify !important;
}

/* =====================================================
   Text Transform Classes
   ===================================================== */
.ch-text-uppercase {
    text-transform: uppercase !important;
}

.ch-text-lowercase {
    text-transform: lowercase !important;
}

.ch-text-capitalize {
    text-transform: capitalize !important;
}

.ch-text-normal-case {
    text-transform: none !important;
}

/* =====================================================
   Font Weight Classes
   ===================================================== */
.ch-font-thin {
    font-weight: 100 !important;
}

.ch-font-extralight {
    font-weight: 200 !important;
}

.ch-font-light {
    font-weight: 300 !important;
}

.ch-font-normal {
    font-weight: 400 !important;
}

.ch-font-medium {
    font-weight: 500 !important;
}

.ch-font-semibold {
    font-weight: 600 !important;
}

.ch-font-bold {
    font-weight: 700 !important;
}

.ch-font-extrabold {
    font-weight: 800 !important;
}

.ch-font-black {
    font-weight: 900 !important;
}

/* =====================================================
   Font Size Utility Classes
   ===================================================== */
.ch-text-xs {
    font-size: 0.75rem !important; /* 12px */
}

.ch-text-sm {
    font-size: 0.875rem !important; /* 14px */
}

.ch-text-base {
    font-size: 1rem !important; /* 16px */
}

.ch-text-lg {
    font-size: 1.125rem !important; /* 18px */
}

.ch-text-xl {
    font-size: 1.25rem !important; /* 20px */
}

.ch-text-2xl {
    font-size: 1.5rem !important; /* 24px */
}

.ch-text-3xl {
    font-size: 1.875rem !important; /* 30px */
}

.ch-text-4xl {
    font-size: 2.25rem !important; /* 36px */
}

.ch-text-5xl {
    font-size: 3rem !important; /* 48px */
}

.ch-text-6xl {
    font-size: 3.75rem !important; /* 60px */
}

/* =====================================================
   Line Height Utility Classes
   ===================================================== */
.ch-leading-none {
    line-height: 1 !important;
}

.ch-leading-tight {
    line-height: 1.25 !important;
}

.ch-leading-snug {
    line-height: 1.375 !important;
}

.ch-leading-normal {
    line-height: 1.5 !important;
}

.ch-leading-relaxed {
    line-height: 1.625 !important;
}

.ch-leading-loose {
    line-height: 2 !important;
}

/* =====================================================
   Letter Spacing Utility Classes
   ===================================================== */
.ch-tracking-tighter {
    letter-spacing: -0.05em !important;
}

.ch-tracking-tight {
    letter-spacing: -0.025em !important;
}

.ch-tracking-normal {
    letter-spacing: 0em !important;
}

.ch-tracking-wide {
    letter-spacing: 0.025em !important;
}

.ch-tracking-wider {
    letter-spacing: 0.05em !important;
}

.ch-tracking-widest {
    letter-spacing: 0.1em !important;
}

/* =====================================================
   Text Color Utility Classes
   ===================================================== */
.ch-text-primary {
    color: var(--ch-custom-primary, hsl(222 60% 22%)) !important;
}

.ch-text-secondary {
    color: var(--ch-custom-secondary, hsl(152 76% 40%)) !important;
}

.ch-text-accent {
    color: var(--ch-custom-accent, hsl(152 76% 40%)) !important;
}

.ch-text-muted {
    color: var(--ch-custom-muted, hsl(215 16% 47%)) !important;
}

.ch-text-white {
    color: #ffffff !important;
}

.ch-text-black {
    color: #000000 !important;
}

.ch-text-gray-100 {
    color: hsl(210 16% 93%) !important;
}

.ch-text-gray-200 {
    color: hsl(210 16% 85%) !important;
}

.ch-text-gray-300 {
    color: hsl(210 16% 75%) !important;
}

.ch-text-gray-400 {
    color: hsl(210 16% 65%) !important;
}

.ch-text-gray-500 {
    color: hsl(210 16% 55%) !important;
}

.ch-text-gray-600 {
    color: hsl(210 16% 45%) !important;
}

.ch-text-gray-700 {
    color: hsl(210 16% 35%) !important;
}

.ch-text-gray-800 {
    color: hsl(210 16% 25%) !important;
}

.ch-text-gray-900 {
    color: hsl(210 16% 15%) !important;
}

/* =====================================================
   Background Color Utility Classes
   ===================================================== */
.ch-bg-primary {
    background-color: var(--ch-custom-primary, hsl(222 60% 22%)) !important;
}

.ch-bg-secondary {
    background-color: var(--ch-custom-secondary, hsl(152 76% 40%)) !important;
}

.ch-bg-accent {
    background-color: var(--ch-custom-accent, hsl(152 76% 40%)) !important;
}

.ch-bg-white {
    background-color: #ffffff !important;
}

.ch-bg-black {
    background-color: #000000 !important;
}

.ch-bg-transparent {
    background-color: transparent !important;
}

/* =====================================================
   Text Shadow Classes
   ===================================================== */
.ch-text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.ch-text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.ch-text-shadow-md {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.ch-text-shadow-lg {
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.ch-text-shadow-xl {
    text-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

.ch-text-shadow-primary {
    text-shadow: 0 2px 4px hsl(222 60% 22% / 0.2) !important;
}

.ch-text-shadow-secondary {
    text-shadow: 0 2px 4px hsl(152 76% 40% / 0.2) !important;
}

/* =====================================================
   Responsive Text Classes
   ===================================================== */
@media (max-width: 767px) {
    .ch-text-responsive {
        font-size: 0.875rem !important;
    }
    
    .ch-text-responsive-lg {
        font-size: 1.125rem !important;
    }
    
    .ch-text-responsive-xl {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ch-text-responsive {
        font-size: 1rem !important;
    }
    
    .ch-text-responsive-lg {
        font-size: 1.25rem !important;
    }
    
    .ch-text-responsive-xl {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .ch-text-responsive {
        font-size: 1.125rem !important;
    }
    
    .ch-text-responsive-lg {
        font-size: 1.5rem !important;
    }
    
    .ch-text-responsive-xl {
        font-size: 1.875rem !important;
    }
}

/* =====================================================
   Gradient Text Classes
   ===================================================== */
.ch-text-gradient-primary {
    background: linear-gradient(135deg, 
        var(--ch-custom-primary, hsl(222 60% 22%)) 0%, 
        var(--ch-custom-accent, hsl(152 76% 40%)) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.ch-text-gradient-secondary {
    background: linear-gradient(135deg, 
        var(--ch-custom-secondary, hsl(152 76% 40%)) 0%, 
        var(--ch-custom-accent, hsl(152 76% 40%)) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.ch-text-gradient-rainbow {
    background: linear-gradient(135deg, 
        hsl(222 60% 22%) 0%, 
        hsl(152 76% 40%) 25%,
        hsl(30 100% 50%) 50%,
        hsl(280 100% 50%) 75%,
        hsl(222 60% 22%) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* =====================================================
   Text Decoration Classes
   ===================================================== */
.ch-underline {
    text-decoration: underline !important;
}

.ch-no-underline {
    text-decoration: none !important;
}

.ch-line-through {
    text-decoration: line-through !important;
}

.ch-overline {
    text-decoration: overline !important;
}

/* =====================================================
   Word Break Classes
   ===================================================== */
.ch-break-normal {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.ch-break-words {
    overflow-wrap: break-word !important;
}

.ch-break-all {
    word-break: break-all !important;
}

/* =====================================================
   Whitespace Classes
   ===================================================== */
.ch-whitespace-normal {
    white-space: normal !important;
}

.ch-whitespace-nowrap {
    white-space: nowrap !important;
}

.ch-whitespace-pre {
    white-space: pre !important;
}

.ch-whitespace-pre-line {
    white-space: pre-line !important;
}

.ch-whitespace-pre-wrap {
    white-space: pre-wrap !important;
}