/* PDF2Excel Design System - CSS Variables
 * Based on logo colors: PDF red, Excel green, with supporting neutrals
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS
       ======================================== */

    /* PDF Red - Primary accent for documents, alerts, CTAs */
    --color-pdf-red: #E53935;
    --color-pdf-red-light: #EF5350;
    --color-pdf-red-dark: #C62828;
    --color-pdf-red-bg: #FFEBEE;

    /* Excel Green - Primary brand color, success states */
    --color-excel-green: #217346;
    --color-excel-green-light: #2E7D32;
    --color-excel-green-dark: #1B5E20;
    --color-excel-green-bg: #E8F5E9;

    /* Arrow/Action Green - For interactive elements, progress */
    --color-action-green: #4CAF50;
    --color-action-green-light: #66BB6A;
    --color-action-green-dark: #388E3C;

    /* ========================================
       SEMANTIC COLORS
       ======================================== */

    /* Primary - Main brand action color (Excel green) */
    --color-primary: var(--color-excel-green);
    --color-primary-light: var(--color-excel-green-light);
    --color-primary-dark: var(--color-excel-green-dark);
    --color-primary-bg: var(--color-excel-green-bg);

    /* Secondary - PDF red for secondary actions */
    --color-secondary: var(--color-pdf-red);
    --color-secondary-light: var(--color-pdf-red-light);
    --color-secondary-dark: var(--color-pdf-red-dark);
    --color-secondary-bg: var(--color-pdf-red-bg);

    /* Success */
    --color-success: var(--color-action-green);
    --color-success-light: var(--color-action-green-light);
    --color-success-dark: var(--color-action-green-dark);
    --color-success-bg: #E8F5E9;

    /* Warning */
    --color-warning: #FF9800;
    --color-warning-light: #FFB74D;
    --color-warning-dark: #F57C00;
    --color-warning-bg: #FFF3E0;

    /* Danger/Error */
    --color-danger: #F44336;
    --color-danger-light: #E57373;
    --color-danger-dark: #D32F2F;
    --color-danger-bg: #FFEBEE;

    /* Info */
    --color-info: #2196F3;
    --color-info-light: #64B5F6;
    --color-info-dark: #1976D2;
    --color-info-bg: #E3F2FD;

    /* ========================================
       NEUTRAL COLORS
       ======================================== */

    --color-white: #FFFFFF;
    --color-gray-50: #FAFAFA;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #EEEEEE;
    --color-gray-300: #E0E0E0;
    --color-gray-400: #BDBDBD;
    --color-gray-500: #9E9E9E;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;
    --color-black: #000000;

    /* ========================================
       TEXT COLORS
       ======================================== */

    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-500);
    --text-light: var(--color-white);
    --text-link: var(--color-primary);
    --text-link-hover: var(--color-primary-dark);

    /* ========================================
       BACKGROUND COLORS
       ======================================== */

    --bg-body: var(--color-gray-100);
    --bg-white: var(--color-white);
    --bg-light: var(--color-gray-50);
    --bg-dark: var(--color-gray-800);
    --bg-darker: var(--color-gray-900);

    /* ========================================
       BORDER COLORS
       ======================================== */

    --border-color: var(--color-gray-300);
    --border-color-light: var(--color-gray-200);
    --border-color-dark: var(--color-gray-400);

    /* ========================================
       SHADOWS
       ======================================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ========================================
       BORDER RADIUS
       ======================================== */

    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 2rem;     /* 32px */
    --font-size-4xl: 2.5rem;   /* 40px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================
       TRANSITIONS
       ======================================== */

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

    /* ========================================
       Z-INDEX
       ======================================== */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

/* ========================================
   BOOTSTRAP OVERRIDES
   ======================================== */

/* Override Bootstrap primary color to use our brand green */
.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

/* Secondary uses PDF red */
.btn-secondary {
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-dark);
    --bs-btn-hover-border-color: var(--color-secondary-dark);
}

/* Success uses action green */
.btn-success,
.bg-success {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    background-color: var(--color-success) !important;
}

/* Link colors */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-dark);
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(33, 115, 70, 0.25);
}