/* ============================================================================
   Kweezi Food POS - CSS Variables & Design Tokens
   Inspired by DreamsPOS design system, built from scratch
   ============================================================================ */

:root {
    /* Primary Colors - Warm orange for food/restaurant feel */
    --primary: #FE9F43;
    --primary-hover: #e8892e;
    --primary-light: rgba(254, 159, 67, 0.1);
    --primary-bg: #FFF6EE;

    /* Secondary */
    --secondary: #092C4C;
    --secondary-hover: #071f35;

    /* Status Colors */
    --success: #3EB780;
    --success-light: rgba(62, 183, 128, 0.1);
    --info: #155EEF;
    --info-light: rgba(21, 94, 239, 0.1);
    --warning: #FFCA18;
    --warning-light: rgba(255, 202, 24, 0.1);
    --danger: #FF3B3B;
    --danger-light: rgba(255, 59, 59, 0.1);
    --teal: #0E9384;
    --teal-light: rgba(14, 147, 132, 0.1);
    --purple: #6938EF;
    --purple-light: rgba(105, 56, 239, 0.1);

    /* Text Colors */
    --text-primary: #212B36;
    --text-secondary: #646B72;
    --text-muted: #919EAB;
    --text-white: #FFFFFF;

    /* Background Colors */
    --bg-body: #F7F7F7;
    --bg-white: #FFFFFF;
    --bg-light: #F9FAFB;
    --bg-card: #FFFFFF;

    /* Border Colors */
    --border-color: #E6EAED;
    --border-light: #F0F0F0;

    /* Layout Dimensions */
    --header-height: 60px;
    --sidebar-width: 252px;
    --sidebar-collapsed-width: 80px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;

    /* Font */
    --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 28px;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sidebar: 500;
    --z-header: 999;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-toast: 1100;
}