/* ========================================== */
/* ObriyX Presentations - Utility Classes */
/* ========================================== */
/* Reusable utility classes to replace inline styles */
/* ========================================== */

/* ========== TEXT ALIGNMENT ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ========== COLOR UTILITIES ========== */
/* Primary Colors */
.text-primary { color: var(--color-cyan); }
.text-secondary { color: var(--color-cyan-muted); }
.text-accent { color: var(--color-purple); }

/* Semantic Colors */
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* ========== SPACING UTILITIES ========== */
/* Margins - Vertical */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 0.5rem; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: 0.5rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 1.5rem; }
.mb-lg { margin-bottom: 2rem; }
.mb-xl { margin-bottom: 3rem; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-sm { margin-top: 1rem; margin-bottom: 1rem; }
.my-md { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-lg { margin-top: 2rem; margin-bottom: 2rem; }

/* Margins - Horizontal */
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ========== TYPOGRAPHY SPACING ========== */
.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.8; }

.letter-spacing-wide { letter-spacing: 0.1em; }
.letter-spacing-wider { letter-spacing: 0.15em; }

/* ========== DISPLAY UTILITIES ========== */
.display-grid { display: grid; }
.display-flex { display: flex; }

/* Grid Layouts */
.grid-cols-2 { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.grid-cols-3-sm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.gap-sm { gap: 1.5rem; }
.gap-md { gap: 2rem; }
.gap-lg { gap: 2.5rem; }

/* ========== OPACITY & TRANSPARENCY ========== */
.opacity-75 { opacity: 0.75; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }

/* ========== MAX WIDTH UTILITIES ========== */
.max-w-full { max-width: 100%; }
.max-w-prose { max-width: 900px; }
.max-w-2xl { max-width: 42rem; }

/* ========== BORDER UTILITIES ========== */
.border-top-success { border-top: 3px solid var(--color-success); }
.border-top-primary { border-top: 3px solid var(--color-cyan); }
.border-top-warning { border-top: 3px solid var(--color-warning); }
.border-top-info { border-top: 3px solid var(--color-info); }
.border-top-danger { border-top: 3px solid var(--color-danger); }
.border-top-purple { border-top: 3px solid var(--color-purple); }

.border-left-success { border-left: 4px solid var(--color-success); }
.border-left-primary { border-left: 4px solid var(--color-cyan); }
.border-left-warning { border-left: 4px solid var(--color-warning); }
.border-left-info { border-left: 4px solid var(--color-info); }

/* ========== FLEXBOX UTILITIES ========== */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }

/* ========== POSITIONING UTILITIES ========== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ========== PSEUDO-ELEMENT CONTENT ========== */
.m-0 { margin: 0; }
.p-0 { padding: 0; }

/* ========== BACKGROUND UTILITIES ========== */
.bg-overlay-light { background: var(--color-bg-overlay-light); }
.bg-overlay-medium { background: var(--color-bg-overlay-medium); }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-danger { background: var(--gradient-danger); }
.bg-gradient-warning { background: var(--gradient-warning); }

/* Radial gradients */
.bg-radial-cyan { background: var(--radial-cyan); }
.bg-radial-success { background: var(--radial-success); }
.bg-radial-danger { background: var(--radial-danger); }
.bg-radial-warning { background: var(--radial-warning); }
.bg-radial-info { background: var(--radial-info); }
.bg-radial-purple { background: var(--radial-purple); }

/* ========== TEXT UTILITIES ========== */
.font-family-primary { font-family: 'Orbitron', sans-serif; }
.font-family-secondary { font-family: 'Roboto', sans-serif; }
.font-family-body { font-family: 'Rajdhani', sans-serif; }

.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-900 { font-weight: 900; }

.uppercase { text-transform: uppercase; }

/* ========== SECTION HEADING UTILITIES ========== */
.section-heading {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-cyan);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.section-description {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0.95;
    color: var(--color-text-primary);
}

/* ========== METRIC UTILITIES ========== */
.metric-value {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.metric-subtitle {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.metric-text {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* ========== CTA TEXT ========== */
.cta-text {
    font-size: 1.15rem;
    line-height: 1.8;
    font-weight: 600;
    margin: 2rem auto !important;
    max-width: 900px;
    text-align: center;
}

.contact-info {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-top: 2rem;
}

.chart-description {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 1rem;
    text-align: center;
    color: var(--color-text-primary);
}

body.light-mode .chart-description {
    color: #1a1a1a;
    opacity: 1;
}