/**
 * Shared Styles - Base & Global Utilities
 *
 * @package Product Uploader Mooss
 * @version 1.0.0
 */

/* ========================================
CSS VARIABLES (Theme Tokens)
======================================== */
:root {
    --pum-primary: #4a6741;
    --pum-primary-hover: #3d5636;
    --pum-secondary: #d4a59a;
    --pum-text: #2d2d2d;
    --pum-text-light: #666666;
    --pum-text-muted: #999999;
    --pum-bg: #ffffff;
    --pum-bg-alt: #f7f5f2;
    --pum-border: #e8e4df;
    --pum-radius: 12px;
    --pum-radius-sm: 8px;
    --pum-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --pum-shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
    --pum-font-heading: 'Fraunces', serif;
    --pum-font-body: 'IBM Plex Mono', monospace;
    --pum-transition: all 0.3s ease;
}

/* ========================================
BASE RESET & TYPOGRAPHY
======================================== */
.pum-shared-base {
    box-sizing: border-box;
    line-height: 1.6;
    color: var(--pum-text);
    font-family: var(--pum-font-body);
}

.pum-shared-base *,
.pum-shared-base *::before,
.pum-shared-base *::after {
    box-sizing: inherit;
}

.pum-shared-base h1,
.pum-shared-base h2,
.pum-shared-base h3,
.pum-shared-base h4,
.pum-shared-base h5,
.pum-shared-base h6 {
    font-family: var(--pum-font-heading);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.5em;
    color: var(--pum-text);
}

.pum-shared-base a {
    color: var(--pum-primary);
    text-decoration: none;
    transition: var(--pum-transition);
}

.pum-shared-base a:hover {
    color: var(--pum-primary-hover);
}

/* ========================================
LAYOUT UTILITIES
======================================== */
.pum-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.pum-grid {
    display: grid;
    gap: 24px;
}

.pum-flex {
    display: flex;
    gap: 16px;
    align-items: center;
}

.pum-flex-col {
    flex-direction: column;
}

.pum-text-center { text-align: center; }
.pum-text-left { text-align: left; }
.pum-text-right { text-align: right; }

/* ========================================
SPACING UTILITIES
======================================== */
.pum-m-0 { margin: 0 !important; }
.pum-mt-1 { margin-top: 1rem !important; }
.pum-mb-1 { margin-bottom: 1rem !important; }
.pum-mb-2 { margin-bottom: 2rem !important; }
.pum-p-1 { padding: 1rem !important; }
.pum-p-2 { padding: 2rem !important; }

/* ========================================
RESPONSIVE BREAKPOINTS
======================================== */
@media (min-width: 1025px) {
    .pum-container { padding: 0 40px; }
    .pum-grid--3-col { grid-template-columns: repeat(3, 1fr); }
    .pum-grid--2-col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) and (min-width: 641px) {
    .pum-container { padding: 0 24px; }
    .pum-grid--3-col { grid-template-columns: repeat(2, 1fr); }
    .pum-grid--2-col { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .pum-container { padding: 0 16px; }
    .pum-grid--3-col,
    .pum-grid--2-col { grid-template-columns: 1fr; }
    .pum-flex { flex-direction: column; gap: 12px; }
}

/* ========================================
ANIMATIONS
======================================== */
@keyframes pum-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pum-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pum-animate-fade { animation: pum-fadeIn 0.4s ease forwards; }
.pum-animate-slide { animation: pum-slideUp 0.5s ease forwards; }

/* ========================================
UTILITY CLASSES
======================================== */
.pum-hidden { display: none !important; }
.pum-visible { display: block !important; }
.pum-invisible { visibility: hidden; }
.pum-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}