/* ========================================
   RACINE THEME FOR MYCELIA FAMILY TREE
   Modular CSS architecture for better maintainability
   
   Clean desktop theme with sophisticated gray/purple design
   Version: 2.0 - Modular Edition
   ======================================== */

/* Import modular CSS files in correct order */

/* 1. Variables - Must be first to define custom properties */
@import url('./racine/variables.css');

/* 2. Base styles - Global resets and base element styling */
@import url('./racine/base.css');

/* 3. Layout - Grid systems and page structure */
@import url('./racine/layout.css');

/* 4. Components */
@import url('./racine/navigation.css');
@import url('./racine/buttons.css');
@import url('./racine/cards.css');
@import url('./racine/forms.css');

/* 5. Utilities - Helper classes and overrides */
@import url('./racine/utilities.css');

/* 6. Print & Accessibility - Essential non-responsive styles */
@import url('./racine/print-accessibility.css');

/* ========================================
   THEME IDENTIFICATION
   ======================================== */

/* Theme marker for JavaScript detection */
body[data-theme="racine"] {
    /* This selector helps identify the active theme */
}

/* ========================================
   LEGACY SUPPORT
   Some styles for backward compatibility
   ======================================== */

/* Ensure compatibility with existing templates */
.mycelia-family-tree {
    font-family: var(--racine-font-family);
}

/* Legacy class support */
.family-tree-container {
    width: var(--site-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for animations */
.card,
.btn,
.person-card {
    will-change: transform, box-shadow;
}

/* Optimize font loading */
body {
    font-display: swap;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--racine-accent);
    outline-offset: 2px;
}

/* High contrast borders for better visibility */
.card,
.form-control,
.btn {
    border: 1px solid rgba(74, 85, 104, 0.1);
}

/* Screen reader only content */
.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;
}

/* ========================================
   BROWSER-SPECIFIC FIXES
   ======================================== */

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .form-control,
    .form-select {
        -webkit-appearance: none;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .form-control {
        line-height: normal;
    }
}