/**
 * Base Styles for Evenly Dialog
 * Foundation layer: Reset, typography, core variables
 * ~80 lines extracted from main HTML file
 */

/* ===========================================
   CSS RESET & BOX MODEL
   =========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===========================================
   CSS CUSTOM PROPERTIES (THEMING FOUNDATION)
   =========================================== */
:root {
    /* Colors - can be overridden by theme files */
    --primary-color: #0066cc;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6c757d;
    
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-accent: #e3f2fd;
    
    --border-color: #dee2e6;
    --border-color-focus: #0066cc;
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border radius */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

/* ===========================================
   ACCESSIBILITY - REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================
   BASE TYPOGRAPHY
   =========================================== */
body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--background-primary);
    font-size: var(--font-size-base);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    margin-bottom: 0.5em;
    font-weight: 600;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

/* ===========================================
   ACCESSIBILITY UTILITIES
   =========================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: var(--spacing-sm);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    z-index: 9999;
}

.skip-link:focus {
    top: 6px;
}

.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;
}

/* ===========================================
   RTL/LTR DIRECTIONAL SUPPORT
   Add this new section to base.css
   =========================================== */

/* Direction-aware CSS variables */
:root[dir="ltr"] {
    --direction: ltr;
    --text-align: left;
    --text-align-opposite: right;
    --margin-inline-start: 0;
    --margin-inline-end: auto;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
}

:root[dir="rtl"] {
    --direction: rtl;
    --text-align: right;
    --text-align-opposite: left;
    --margin-inline-start: auto;
    --margin-inline-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
}

/* Global RTL adjustments */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Language-specific classes */
.lang-ar,
.lang-ur {
    font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

/* Ensure proper text direction inheritance */
.dir-rtl {
    direction: rtl;
}

.dir-ltr {
    direction: ltr;
}


/* ===========================================
   UTILITY CLASSES
   =========================================== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }

/* Focus management for accessibility */
*:focus {
    outline: 2px solid var(--border-color-focus);
    outline-offset: 2px;
}

/* Remove default button styling */
button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}