/**
 * Accountify Global CSS Variables
 * Central repository for all CSS custom properties
 * This file should be loaded first in the CSS stack
 */

:root {
    /* Primary Brand Colors */
    --cultivate-green: #10b981;
    --cultivate-hover: #0ea572;
    --cultivate-dark: #047857;
    --cultivate-light: #6ee7b7;
    --cultivate-pale: #d1fae5;
    --cultivate-lightest: #f0fdf4;      /* Very light green for gradients/backgrounds */
    --cultivate-pale-alt: #dcfce7;      /* Alternative pale green for gradients */
    --cultivate-border-light: #bbf7d0;  /* Light green border color */

    /* Neutral Colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-disabled: #d1d5db;
    --text-white: #ffffff;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-hover: #f3f4f6;
    --bg-active: #e5e7eb;
    --bg-dark: #111827;
    --bg-light: #f5f5f7;
    --bg-white: #ffffff;
    --apple-hover: #f5f5f7;

    /* Status Colors */
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Badge Colors */
    --badge-blue: #60a5fa;
    --badge-purple: #a78bfa;
    --badge-yellow: #fbbf24;

    /* Account Type Colors (QuickBooks Standard) */
    --account-type-asset: #10b981;      /* Green - same as cultivate-green */
    --account-type-liability: #ef4444;  /* Red - same as danger */
    --account-type-equity: #6366f1;     /* Indigo/Purple */
    --account-type-income: #14b8a6;     /* Teal */
    --account-type-expense: #f59e0b;    /* Amber - same as warning */
    --account-type-cogs: #f97316;       /* Orange */

    /* Layout Dimensions */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --header-height: 64px;
    --nav-height: 64px;
    --page-header-height: 96px;
    --filter-height: 72px;
    --max-content-width: 1320px;
    --content-padding: 56px; /* 2cm margin on left/right (56px ≈ 0.75in ≈ 2cm at 96 DPI) */
    --footer-height: 48px;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows (when enabled) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* Z-Index Scale - Authoritative Values */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 50;
    --z-sidebar: 500;
    --z-header: 600;
    --z-overlay: 9000;
    --z-modal-backdrop: 9998;
    --z-modal: 9999;
    --z-edit-form: 10000;
    --z-edit-form-backdrop: 10001;
    --z-notification: 10100;
    --z-tooltip: 10200;
    --z-max: 999999;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Font Families */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

    /* Font Weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Modal Dimensions */
    --modal-max-width: 900px;
    --modal-max-width-lg: 1200px;  /* Large modals (Add Client, Add Invoice, etc.) */
    --modal-max-width-xl: 1400px;  /* Extra large modals */
    --modal-max-height: calc(100vh - 40px);
    --modal-padding: 24px;

    /* Border Styles */
    --border-color: #d1d5db; /* Standard border color (same as --gray-300) */
    --border-thin: 0.5px solid rgba(229, 231, 235, 0.5);
    --border-standard: 0.5px solid #e5e7eb;

    /* Table Styles */
    --table-header-bg: #f9fafb;
    --table-border: #e5e7eb;
    --table-row-hover: #f3f4f6;

    /* Form Elements */
    --input-border: #d1d5db;
    --input-focus-border: var(--cultivate-green);
    --input-bg: #ffffff;
    --input-disabled-bg: #f3f4f6;

    /* Scrollbar Styles */
    --scrollbar-width: 8px;
    --scrollbar-bg: #f3f4f6;
    --scrollbar-thumb: #d1d5db;
    --scrollbar-thumb-hover: #9ca3af;

    /* Modal Type/Option Card States */
    /* Unselected State */
    --modal-card-bg-unselected: #ffffff;
    --modal-card-border-unselected: #e5e7eb;
    --modal-card-icon-bg-unselected: #f3f4f6;
    --modal-card-icon-color-unselected: #6b7280;

    /* Selected State */
    --modal-card-bg-selected: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --modal-card-border-selected: #10b981;
    --modal-card-icon-bg-selected: #10b981;
    --modal-card-icon-color-selected: #ffffff;
    --modal-card-shadow-selected: 0 4px 12px rgba(16, 185, 129, 0.2);

    /* Hover State */
    --modal-card-border-hover: #10b981;
    --modal-card-shadow-hover: 0 4px 12px rgba(16, 185, 129, 0.1);
}

/* Dark Mode Variables (future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode overrides can be added here */
    }
}

/* Responsive Breakpoints */
@custom-media --sm-up (min-width: 640px);
@custom-media --md-up (min-width: 768px);
@custom-media --lg-up (min-width: 1024px);
@custom-media --xl-up (min-width: 1280px);
@custom-media --2xl-up (min-width: 1536px);