/**
 * BMV Plastic - Modern CSS Design Tokens
 * 
 * Centralized variables for colors, typography, spacing, shadows, and z-index layers.
 * @package BMV Theme
 * @version 2.0.0
 * Author/Implementation: Le Viet Quang / Four Elements
 * Email : levietquangt2@gmail.com
 * Website : https://fourelementscorp.com/
 * License: MIT
 */

:root {
    /* Brand Color Palette */
    --bmv-primary: #17469e;
    --bmv-primary-dark: #0f2d6b;
    --bmv-primary-light: #215ec7;
    --bmv-accent: #007bff;
    --bmv-accent-hover: #0056b3;
    --bmv-accent-glow: rgba(0, 123, 255, 0.25);

    /* Neutral & Background Colors */
    --bmv-white: #ffffff;
    --bmv-bg-light: #f8f9fa;
    --bmv-bg-card: rgba(255, 255, 255, 0.95);
    --bmv-bg-dark-overlay: rgba(17, 24, 28, 0.95);
    --bmv-bg-backdrop: rgba(0, 0, 0, 0.65);

    /* Typography Colors */
    --bmv-text-main: #212529;
    --bmv-text-muted: #6c757d;
    --bmv-text-light: #f1f3f5;
    --bmv-text-white: #ffffff;
    --bmv-border-color: #e9ecef;
    --bmv-border-dark: rgba(255, 255, 255, 0.12);

    /* Typography Scales */
    --bmv-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bmv-font-size-xs: 0.75rem;
    /* 12px */
    --bmv-font-size-sm: 0.875rem;
    /* 14px */
    --bmv-font-size-base: 1rem;
    /* 16px */
    --bmv-font-size-lg: 1.125rem;
    /* 18px */
    --bmv-font-size-xl: 1.25rem;
    /* 20px */
    --bmv-font-size-2xl: 1.5rem;
    /* 24px */
    --bmv-font-size-3xl: 1.875rem;
    /* 30px */

    /* Spacing System */
    --bmv-space-1: 4px;
    --bmv-space-2: 8px;
    --bmv-space-3: 12px;
    --bmv-space-4: 16px;
    --bmv-space-5: 20px;
    --bmv-space-6: 24px;
    --bmv-space-7: 30px;
    --bmv-space-8: 40px;
    --bmv-space-9: 60px;

    /* Shadows & Elevation */
    --bmv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --bmv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --bmv-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --bmv-shadow-drawer: 10px 0 35px rgba(0, 0, 0, 0.25);
    --bmv-shadow-card-hover: 0 12px 28px rgba(23, 70, 158, 0.18);

    /* Border Radius */
    --bmv-radius-sm: 4px;
    --bmv-radius-md: 8px;
    --bmv-radius-lg: 14px;
    --bmv-radius-full: 9999px;

    /* Transitions & Easing */
    --bmv-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --bmv-transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --bmv-transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Hierarchy Layering */
    --bmv-z-background: 1;
    --bmv-z-content: 10;
    --bmv-z-header: 100;
    --bmv-z-overlay: 500;
    --bmv-z-drawer: 1000;
    --bmv-z-modal: 2000;
    --bmv-z-shortcuts: 9998;
    --bmv-z-tooltip: 9999;
}