/*
 * Best Lift — variables.css
 * Purpose: Color / typography / breakpoint variables (Section 2: Branding & Visual System)
 * Phase ref: Phase 1
 *
 * Loaded first, before main.css/forms.css/animations.css/admin.css,
 * since every other stylesheet depends on these custom properties.
 */

:root {
    /* Brand colors */
    --color-primary: #4B0072;        /* Deep Purple — structure, nav, headers */
    --color-accent: #0F8247;         /* Forest Green — CTAs, success, badges */
    --color-bg-light: #F8F9FA;       /* Soft Light Gray */
    --color-bg-white: #FFFFFF;
    --color-midnight: #0D021A;       /* Deep Midnight Purple — dark accent */

    /* Text colors */
    --color-text-heading: #1A1A1A;
    --color-text-body: #3D3D3D;
    --color-text-on-primary: #FFFFFF;
    --color-text-on-accent: #FFFFFF;

    /* Feedback colors (forms, alerts — not in brand palette, kept neutral) */
    --color-danger: #B00020;
    --color-success: var(--color-accent);

    /* Typography */
    --font-family-base: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-family-bn: 'TiroBangla', 'Noto Sans Bengali', var(--font-family-base);

    --font-size-base: 15px;
    --font-size-sm: 0.8125rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.55rem;
    --font-size-3xl: 2.05rem;

    --line-height-base: 1.6;
    --line-height-heading: 1.25;

    /* Spacing scale */
    --space-xs: 0.4rem;
    --space-sm: 0.85rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Layout */
    --container-max-width: 1140px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(13, 2, 26, 0.08);
    --shadow-md: 0 8px 24px rgba(13, 2, 26, 0.12);

    /* Z-index scale (named so the control panel/preloader/widgets don't collide) */
    --z-preloader: 100;
    --z-nav-drawer: 70;       /* Mobile off-canvas nav — above control panel, below preloader */
    --z-control-panel: 60;
    --z-header: 50;
    --z-whatsapp-widget: 40;

    /* Digital Elevator Control Panel width (desktop sidebar) */
    --control-panel-width: 64px;
}

/* ---------------------------------------------------------------------
 * Responsive breakpoints (referenced in comments across CSS files —
 * raw CSS media queries, no framework, per Section 2: Styling Approach)
 *   Mobile:  up to 767px   (default / mobile-first base styles)
 *   Tablet:  768px – 1023px
 *   Desktop: 1024px and up
 * ------------------------------------------------------------------- */