/**
 * Athena Design System - Administrative Variables
 * Admin-specific CSS variables for the VklassAdminWeb interface
 * Based on documentation/ui-admin.md specifications
 */

:root {
    /* ========================================
       Administrative Color Palette
       ======================================== */
    
    /* Administrative Theme Colors */
    --admin-background: #eee;
    --admin-nav-dark: #000;
    --admin-nav-border: #979797;
    --admin-toolbar-dark: #4a4a4a;
    
    /* Inherited Theme Colors (from main Vklass) */
    --cl-hard: #26418f;
    --cl-medium: #5c6bc0;
    --cl-green: #73bc56;
    --cl-yellow: #f6a623;
    --cl-red: #f44336;
    
    /* Administrative Grayscale */
    --white: #fff;
    --gray-lightest: #fafafa;
    --gray-lighter: #eee;
    --gray-smooth: #e0e0e0;
    --gray-light: #c8c8c8;
    --gray: #a4a4a4;
    --gray-dark: #6d6d6d;
    --gray-darker: #4a4a4a;
    --black: #000;
    
    /* ========================================
       Layout Dimensions
       ======================================== */
    
    /* Toolbar Heights */
    --toolbar-height: 65px;
    --admin-context-height: 52px;
    --total-toolbar-height: 117px; /* 65px + 52px */
    
    /* Navigation Widths */
    --app-drawer-width: 78px;
    --app-drawer-expanded-width: 294px;
    --main-menu-width: 216px; /* 294px - 78px */
    --total-nav-width: 294px;
    
    /* Content Spacing */
    --content-padding: 32px;
    --content-padding-mobile: 16px;
    --gap: 13px;
    --gap-double: 26px;
    
    /* Component Dimensions */
    --icon-badge-small: 33px;
    --icon-badge-medium: 49px;
    --form-field-height: 48px;
    --admin-card-border-radius: 8px;
    --admin-button-border-radius: 4px;
    
    /* ========================================
       Typography
       ======================================== */
    
    /* Font Sizes */
    --admin-header-size: 1.4em;
    --admin-title-size: 1.25rem;
    --admin-subheader-size: 0.75rem;
    --admin-menu-text-size: 0.875rem;
    --admin-body-text-size: 1rem;
    --admin-small-text-size: 0.75rem;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Letter Spacing */
    --letter-spacing-normal: 0.01em;
    --letter-spacing-loose: 0.04em;
    --letter-spacing-looser: 0.05em;
    
    /* ========================================
       Shadows & Elevation
       ======================================== */
    
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* ========================================
       Transitions & Animations
       ======================================== */
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --drawer-transition: transform 0.3s ease;
    
    /* ========================================
       Z-Index Layers
       ======================================== */
    
    --z-toolbar: 9;
    --z-drawer-overlay: 10;
    --z-app-drawer: 11;
    --z-dialog: 12;
    
    /* ========================================
       Responsive Breakpoints
       ======================================== */
    
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1025px;
}

/* ========================================
   Admin Body Base Styles
   ======================================== */

body.vk-admin {
    background-color: var(--admin-background) !important;
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 20px;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--gray-darker);
}

/* ========================================
   Admin Layout Classes
   ======================================== */

.vk-layout--app-admin {
    background-color: var(--admin-background);
    min-height: 100vh;
}