/* Splintr - Theme Variables (Structural)
 *
 * This file defines layout, typography, spacing, and component-alias variables
 * that are shared across all themes. Color values come from themes/*.css which
 * is loaded before this file in the cascade.
 *
 * Load order: themes/<selected>.css → theme-variables.css → core.css → components.css
 */

:root {
    /* === TYPOGRAPHY === */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;

    /* === BORDER RADIUS (default — themes can override) === */
    --border-radius: 8px;

    /* === NAVIGATION === */
    --nav-border-radius: 0 8px 8px 0;

    /* === SPACING SYSTEM === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* === AVATAR AND IMAGE SIZES === */
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 60px;
    --avatar-xl: 120px;

    /* === LAYOUT DIMENSIONS === */
    --sidebar-width: 250px;
    --content-max-width: 1200px;
    --modal-max-width: 500px;
    --modal-large-max-width: 700px;

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* === Z-INDEX SCALE === */
    --z-dropdown: 1000;
    --z-modal: 2000;
    --z-toast: 3000;
    --z-tooltip: 4000;

    /* === COMPONENT ALIASES === */
    /* These reference color variables defined by the active theme file. */

    /* Header */
    --header-bg: var(--header-bg-color);
    --header-text: var(--text-color);

    /* Posts */
    --post-bg: var(--bg-secondary);
    --post-border: var(--border-color);
    --post-shadow: var(--box-shadow);

    /* Comments */
    --comment-bg: var(--bg-tertiary);
    --comment-border: var(--border-color);

    /* Modals */
    --modal-bg: var(--bg-secondary);

    /* Forms */
    --input-focus: var(--primary-color);

    /* Buttons */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: var(--text-light);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: var(--text-light);
}

/* === FONT FAMILY VARIANTS === */

.font-system {
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.font-serif {
    --font-family: Georgia, 'Times New Roman', Times, serif;
}

.font-mono {
    --font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.font-rounded {
    --font-family: 'Nunito', 'Quicksand', -apple-system, sans-serif;
}

/* === SIZE VARIANTS === */

.size-compact {
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
}

.size-comfortable {
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 28px;
    --spacing-xl: 36px;
    --font-size-base: 18px;
    --font-size-sm: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
}

/* === ANIMATION PREFERENCES === */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: none;
        --transition-normal: none;
        --transition-slow: none;
    }
}

.reduce-motion {
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
}

/* === UTILITY CLASSES === */

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.border-primary { border-color: var(--primary-color) !important; }