/**
 * BrightDocs Design System Variables
 * Shared across all stylesheets
 */

:root {
    /* =========================================================================
       PRIMARY COLORS
       ========================================================================= */
    --primary-color: #667eea;
    --primary-hover: #5a6fd6;
    --primary-light: #e8f4fd;
    --primary-gradient: linear-gradient(90deg, #667eea, #764ba2);

    /* =========================================================================
       SECONDARY / NEUTRAL COLORS
       ========================================================================= */
    --secondary-color: #6c757d;
    --secondary-hover: #5a6268;

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

    /* Success */
    --success-color: #22c55e;
    --success-dark: #155724;
    --success-light: #d4edda;

    /* Error / Danger */
    --error-color: #c62828;
    --error-light: #ffebee;
    --danger-color: #dc3545;
    --danger-light: #f8d7da;
    --danger-dark: #721c24;

    /* Warning */
    --warning-color: #f57c00;
    --warning-light: #fff8e1;
    --warning-muted: #fff3cd;

    /* Info */
    --info-color: #1976d2;
    --info-light: #e3f2fd;
    --info-alt: #e7f3ff;

    /* =========================================================================
       BACKGROUND COLORS
       ========================================================================= */
    --bg-white: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f5f5f5;
    --bg-muted: #fafafa;
    --bg-hover: #f0f0f0;

    /* =========================================================================
       BORDER COLORS
       ========================================================================= */
    --border-color: #e0e0e0;
    --border-light: #eee;
    --border-lighter: #f0f0f0;
    --border-input: #ddd;

    /* =========================================================================
       TEXT COLORS
       ========================================================================= */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #888;
    --text-placeholder: #999;
    --text-disabled: #ccc;

    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 10px;
    --radius-pill: 12px;

    /* =========================================================================
       SHADOWS
       ========================================================================= */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-up: 0 -5px 20px rgba(0, 0, 0, 0.15);

    /* =========================================================================
       FOCUS STATES
       ========================================================================= */
    --focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.15);
    --focus-ring-sm: 0 0 0 2px rgba(102, 126, 234, 0.1);

    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* =========================================================================
       Z-INDEX SCALE
       ========================================================================= */
    --z-modal: 10000;
    --z-modal-overlay: 10001;

    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */
    --font-mono: 'Monaco', 'Menlo', monospace;

    /* =========================================================================
       ROLE COLORS (Dental-specific)
       ========================================================================= */
    --role-system-admin: #dc3545;
    --role-office-admin: #6f42c1;
    --role-dentist: #007bff;
    --role-provider: #17a2b8;
    --role-staff: #6c757d;

    /* =========================================================================
       EMAIL TYPE COLORS
       ========================================================================= */
    --email-client-bg: #e3f2fd;
    --email-client-color: #1976d2;
    --email-attorney-internal-bg: #f3e5f5;
    --email-attorney-internal-color: #7b1fa2;
    --email-attorney-external-bg: #fff3e0;
    --email-attorney-external-color: #f57c00;
    --email-vendor-bg: #e8f5e9;
    --email-vendor-color: #388e3c;
    --email-spam-bg: #ffebee;
    --email-spam-color: #c62828;
    --email-unknown-bg: #f5f5f5;
    --email-unknown-color: #666;

    /* =========================================================================
       ADDITIONAL SEMANTIC COLORS
       ========================================================================= */
    --active-green: #28a745;
    --active-green-hover: #218838;

    /* Badge variants */
    --badge-purple-bg: #e0e7ff;
    --badge-purple-color: #5a67d8;
    --badge-amber-bg: #fef3c7;
    --badge-amber-color: #92400e;
    --badge-blue-bg: #dbeafe;
    --badge-blue-color: #1e40af;

    /* =========================================================================
       SPACING (for consistency)
       ========================================================================= */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 30px;
}