/* ============================================
   Andres Automotive - CSS Custom Properties
   ============================================ */

:root {
    /* ========================================
       Color Palette
       ======================================== */
    
    /* Primary Colors - Red Accent Theme */
    --aa-primary: #dc2626;              /* Red accent - primary actions */
    --aa-primary-dark: #991b1b;         /* Darker red for hover states */
    --aa-primary-light: #fca5a5;        /* Light red for backgrounds */
    --aa-primary-rgb: 220, 38, 38;
    
    /* Secondary Colors - Grayscale */
    --aa-secondary: #6b7280;            /* Medium gray */
    --aa-secondary-dark: #4b5563;       /* Darker gray */
    --aa-secondary-light: #9ca3af;      /* Lighter gray */
    
    /* Accent Colors */
    --aa-success: #16a34a;              /* Green for success */
    --aa-success-light: #dcfce7;        /* Light green background */
    --aa-danger: #dc2626;               /* Red for danger (same as primary) */
    --aa-danger-light: #fee2e2;         /* Light red background */
    --aa-warning: #f59e0b;              /* Amber for warnings */
    --aa-warning-light: #fef3c7;        /* Light amber background */
    --aa-info: #0ea5e9;                 /* Blue for info */
    --aa-info-light: #e0f2fe;           /* Light blue background */
    
    /* Neutral Colors - Fixed off-white and very dark green */
    --aa-white: #f8faf8;                /* Off-white with subtle green tint */
    --aa-black: #0a1a0a;                /* Very dark green (simulating black) */
    --aa-gray-50: #f8faf8;              /* Lightest gray (off-white) */
    --aa-gray-100: #f0f2f0;             /* Very light gray with green tint */
    --aa-gray-200: #e0e5e0;             /* Light gray with green tint */
    --aa-gray-300: #c8d0c8;             /* Medium-light gray with green tint */
    --aa-gray-400: #9ca89c;             /* Medium gray with green tint */
    --aa-gray-500: #6b7a6b;             /* Medium-dark gray with green tint */
    --aa-gray-600: #4a5a4a;             /* Dark gray with green tint */
    --aa-gray-700: #2f3f2f;             /* Darker gray with green tint */
    --aa-gray-800: #1a2a1a;             /* Very dark gray with green tint */
    --aa-gray-900: #0a1a0a;             /* Near black (very dark green) */
    
    /* Background Colors - Fixed, no dark mode */
    --aa-bg-body: #f8faf8;              /* Page background (off-white) */
    --aa-bg-light: #ffffff;             /* Pure white for cards */
    --aa-bg-dark: #0a1a0a;              /* Very dark green backgrounds */
    --aa-bg-overlay: rgba(10, 26, 10, 0.5); /* Dark overlay with green tint */
    
    /* Text Colors - Fixed, no dark mode */
    --aa-text-primary: #0a1a0a;         /* Primary text (very dark green) */
    --aa-text-secondary: #2f3f2f;       /* Secondary text (darker gray-green) */
    --aa-text-muted: #6b7a6b;           /* Muted text (medium gray-green) */
    --aa-text-white: #f8faf8;           /* White text (off-white) */
    --aa-text-link: #dc2626;            /* Link color (red) */
    --aa-text-link-hover: #991b1b;      /* Link hover (darker red) */
    
    /* Border Colors - Fixed, no dark mode */
    --aa-border-color: #e0e5e0;         /* Default border (light gray-green) */
    --aa-border-light: #f0f2f0;         /* Light border (very light gray-green) */
    --aa-border-dark: #2f3f2f;          /* Dark border (darker gray-green) */
    
    /* ========================================
       Typography
       ======================================== */
    
    /* Font Families */
    --aa-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --aa-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    /* Font Sizes - Using rem for responsiveness */
    --aa-font-size-base: 1rem;          /* 16px */
    --aa-font-size-xs: 0.75rem;         /* 12px */
    --aa-font-size-sm: 0.875rem;        /* 14px */
    --aa-font-size-md: 1rem;            /* 16px */
    --aa-font-size-lg: 1.125rem;        /* 18px */
    --aa-font-size-xl: 1.25rem;         /* 20px */
    --aa-font-size-2xl: 1.5rem;         /* 24px */
    --aa-font-size-3xl: 1.875rem;       /* 30px */
    --aa-font-size-4xl: 2.25rem;        /* 36px */
    --aa-font-size-5xl: 3rem;           /* 48px */
    
    /* Heading Sizes */
    --aa-h1-size: 2.5rem;               /* 40px */
    --aa-h2-size: 2rem;                 /* 32px */
    --aa-h3-size: 1.75rem;              /* 28px */
    --aa-h4-size: 1.5rem;               /* 24px */
    --aa-h5-size: 1.25rem;              /* 20px */
    --aa-h6-size: 1rem;                 /* 16px */
    
    /* Font Weights */
    --aa-font-weight-light: 300;
    --aa-font-weight-normal: 400;
    --aa-font-weight-medium: 500;
    --aa-font-weight-semibold: 600;
    --aa-font-weight-bold: 700;
    
    /* Line Heights */
    --aa-line-height-base: 1.5;
    --aa-line-height-sm: 1.25;
    --aa-line-height-lg: 2;
    
    /* ========================================
       Spacing - Using rem for responsiveness
       ======================================== */
    
    --aa-spacing-0: 0;
    --aa-spacing-1: 0.25rem;            /* 4px */
    --aa-spacing-2: 0.5rem;             /* 8px */
    --aa-spacing-3: 0.75rem;            /* 12px */
    --aa-spacing-4: 1rem;               /* 16px */
    --aa-spacing-5: 1.25rem;            /* 20px */
    --aa-spacing-6: 1.5rem;             /* 24px */
    --aa-spacing-7: 1.75rem;            /* 28px */
    --aa-spacing-8: 2rem;               /* 32px */
    --aa-spacing-10: 2.5rem;            /* 40px */
    --aa-spacing-12: 3rem;              /* 48px */
    --aa-spacing-16: 4rem;              /* 64px */
    --aa-spacing-20: 5rem;              /* 80px */
    --aa-spacing-24: 6rem;              /* 96px */
    
    /* ========================================
       Layout
       ======================================== */
    
    /* Container Max Widths */
    --aa-container-sm: 33.75rem;        /* 540px */
    --aa-container-md: 45rem;           /* 720px */
    --aa-container-lg: 60rem;           /* 960px */
    --aa-container-xl: 71.25rem;        /* 1140px */
    --aa-container-xxl: 87.5rem;        /* 1400px */
    
    /* Navigation */
    --aa-nav-height: 3.5rem;            /* 56px */
    --aa-nav-height-mobile: 3rem;       /* 48px */
    --aa-sidebar-width: 16.25rem;       /* 260px */
    --aa-sidebar-collapsed-width: 4rem; /* 64px */
    
    /* Content Padding */
    --aa-content-padding-x: 1rem;       /* 16px */
    --aa-content-padding-y: 1.5rem;     /* 24px */
    
    /* ========================================
       Border & Radius
       ======================================== */
    
    /* Border Widths */
    --aa-border-width: 0.0625rem;       /* 1px */
    --aa-border-width-thick: 0.125rem;  /* 2px */
    
    /* Border Radius */
    --aa-border-radius-none: 0;
    --aa-border-radius-sm: 0.125rem;    /* 2px */
    --aa-border-radius: 0.25rem;        /* 4px */
    --aa-border-radius-md: 0.375rem;    /* 6px */
    --aa-border-radius-lg: 0.5rem;      /* 8px */
    --aa-border-radius-xl: 0.75rem;     /* 12px */
    --aa-border-radius-2xl: 1rem;       /* 16px */
    --aa-border-radius-pill: 50rem;     /* Fully rounded */
    --aa-border-radius-circle: 50%;     /* Circle */
    
    /* ========================================
       Shadows
       ======================================== */
    
    --aa-shadow-sm: 0 0.125rem 0.25rem rgba(10, 26, 10, 0.075);
    --aa-shadow: 0 0.5rem 1rem rgba(10, 26, 10, 0.15);
    --aa-shadow-lg: 0 1rem 3rem rgba(10, 26, 10, 0.175);
    --aa-shadow-xl: 0 1.25rem 3.75rem rgba(10, 26, 10, 0.2);
    
    /* Navigation Shadow */
    --aa-nav-shadow: 0 0.125rem 0.25rem rgba(10, 26, 10, 0.1);
    
    /* Card Shadow */
    --aa-card-shadow: 0 0.25rem 0.5rem rgba(10, 26, 10, 0.1);
    --aa-card-shadow-hover: 0 0.5rem 1rem rgba(10, 26, 10, 0.15);
    
    /* Red Accent Glow */
    --aa-shadow-red: 0 0 0.5rem rgba(220, 38, 38, 0.3);
    --aa-shadow-red-lg: 0 0 1rem rgba(220, 38, 38, 0.4);
    
    /* ========================================
       Z-Index Layers
       ======================================== */
    
    --aa-z-dropdown: 1000;
    --aa-z-sticky: 1020;
    --aa-z-fixed: 1030;
    --aa-z-modal-backdrop: 1040;
    --aa-z-modal: 1050;
    --aa-z-popover: 1060;
    --aa-z-tooltip: 1070;
    --aa-z-notification: 1080;
    
    /* ========================================
       Transitions & Animations
       ======================================== */
    
    /* Transition Durations */
    --aa-transition-fast: 0.15s;
    --aa-transition-base: 0.3s;
    --aa-transition-slow: 0.5s;
    
    /* Transition Timings */
    --aa-transition-timing: ease-in-out;
    --aa-transition-timing-in: ease-in;
    --aa-transition-timing-out: ease-out;
    
    /* Common Transitions */
    --aa-transition-all: all 0.3s ease-in-out;
    --aa-transition-color: color 0.15s ease-in-out;
    --aa-transition-bg: background-color 0.15s ease-in-out;
    --aa-transition-transform: transform 0.3s ease-in-out;
    
    /* ========================================
       Form Elements
       ======================================== */
    
    /* Input */
    --aa-input-height: 2.5rem;          /* 40px */
    --aa-input-height-sm: 2rem;         /* 32px */
    --aa-input-height-lg: 3rem;         /* 48px */
    --aa-input-padding-x: 0.75rem;      /* 12px */
    --aa-input-padding-y: 0.375rem;     /* 6px */
    --aa-input-border-width: 0.0625rem; /* 1px */
    --aa-input-border-color: #c8d0c8;   /* Light gray-green border */
    --aa-input-border-radius: 0.25rem;  /* 4px */
    --aa-input-focus-border-color: #dc2626; /* Red border on focus */
    --aa-input-focus-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25); /* Red focus glow */
    
    /* Button */
    --aa-btn-padding-x: 0.75rem;        /* 12px */
    --aa-btn-padding-y: 0.375rem;       /* 6px */
    --aa-btn-padding-x-sm: 0.5rem;      /* 8px */
    --aa-btn-padding-y-sm: 0.25rem;     /* 4px */
    --aa-btn-padding-x-lg: 1rem;        /* 16px */
    --aa-btn-padding-y-lg: 0.5rem;      /* 8px */
    --aa-btn-border-radius: 0.25rem;    /* 4px */
    --aa-btn-font-weight: 500;          /* Medium weight for buttons */
    
    /* ========================================
       Component Specific
       ======================================== */
    
    /* Card */
    --aa-card-border-width: 0.0625rem;  /* 1px */
    --aa-card-border-radius: 0.375rem;  /* 6px */
    --aa-card-padding: 1rem;            /* 16px */
    --aa-card-bg: #ffffff;              /* White background */
    --aa-card-border-color: #e0e5e0;    /* Light gray-green border */
    
    /* Modal */
    --aa-modal-max-width: 31.25rem;     /* 500px */
    --aa-modal-max-width-lg: 50rem;     /* 800px */
    --aa-modal-max-width-xl: 71.25rem;  /* 1140px */
    
    /* Table */
    --aa-table-cell-padding-x: 0.125rem;  /* 2px */
    --aa-table-cell-padding-y: 0.125rem;  /* 2px */
    --aa-table-border-color: #e0e5e0;   /* Light gray-green */
    --aa-table-striped-bg: #f8faf8;     /* Off-white */
    --aa-table-hover-bg: #f0f2f0;       /* Very light gray-green on hover */
    
    /* Alert */
    --aa-alert-padding-x: 1rem;         /* 16px */
    --aa-alert-padding-y: 0.75rem;      /* 12px */
    --aa-alert-border-radius: 0.375rem; /* 6px */
    
    /* Badge */
    --aa-badge-padding-x: 0.5rem;       /* 8px */
    --aa-badge-padding-y: 0.25rem;      /* 4px */
    --aa-badge-font-size: 0.75rem;      /* 12px */
    --aa-badge-border-radius: 0.25rem;  /* 4px */
    
    /* Navigation - Red accent theme */
    --aa-nav-bg: #0a1a0a;               /* Very dark green nav background */
    --aa-nav-text: #f8faf8;             /* Off-white nav text */
    --aa-nav-hover-bg: rgba(220, 38, 38, 0.1); /* Red tint on hover */
    --aa-nav-active-bg: #dc2626;        /* Red background for active items */
    
    /* ========================================
       Responsive Breakpoints (for reference)
       ======================================== */
    
    /* --aa-breakpoint-xs: 0; */
    /* --aa-breakpoint-sm: 36rem;      576px */
    /* --aa-breakpoint-md: 48rem;      768px */
    /* --aa-breakpoint-lg: 62rem;      992px */
    /* --aa-breakpoint-xl: 75rem;      1200px */
    /* --aa-breakpoint-xxl: 87.5rem;   1400px */
}

/* ============================================
   Utility Classes (Optional)
   ============================================ */

/* Apply base font size to html for rem calculations */
html {
    font-size: 16px; /* Base font size - 1rem = 16px */
}

/* Set body background and text colors - FIXED, no theme switching */
body {
    background-color: var(--aa-bg-body);
    color: var(--aa-text-primary);
    font-family: var(--aa-font-family-base);
}

/* Responsive font size adjustment for smaller devices */
@media (max-width: 575.98px) {
    html {
        font-size: 14px; /* 1rem = 14px on mobile */
    }
}

@media (min-width: 1400px) {
    html {
        font-size: 18px; /* 1rem = 18px on large screens */
    }
}