/* ============================================
   POS SYSTEM - CSS Variables
   Toast-Inspired Dark Theme
   Optimized for 1920×1080 POS Terminal
   ============================================ */

:root {
    /* Primary Background */
    --bg-primary:       #1a1a2e;
    --bg-secondary:     #16213e;
    --bg-panel:         #0f3460;
    --bg-surface:       #1e293b;
    --bg-surface-hover: #334155;
    --bg-input:         #0f172a;

    /* Accent Colors */
    --accent:           #e94560;
    --accent-hover:     #d63851;
    --orange:           #f59e0b;
    --orange-hover:     #d97706;
    --orange-light:     #fbbf24;

    /* Status Colors */
    --green:            #10b981;
    --green-hover:      #059669;
    --green-light:      #34d399;
    --blue:             #3b82f6;
    --blue-hover:       #2563eb;
    --purple:           #8b5cf6;
    --cyan:             #06b6d4;
    --red:              #ef4444;
    --red-hover:        #dc2626;
    --yellow:           #f59e0b;

    /* Table Status Colors */
    --status-available: #10b981;
    --status-occupied:  #f59e0b;
    --status-reserved:  #3b82f6;
    --status-billing:   #ef4444;

    /* Text Colors */
    --text-primary:     #e2e8f0;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;
    --text-inverse:     #0f172a;

    /* Borders */
    --border:           #1e3a5f;
    --border-light:     #334155;
    --border-focus:     #f59e0b;

    /* Typography */
    --font-primary:     'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:        'Consolas', 'Courier New', monospace;

    /* Font Sizes — scaled for 15" terminal */
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-lg:    18px;
    --text-xl:    22px;
    --text-2xl:   26px;
    --text-3xl:   32px;
    --text-4xl:   40px;

    /* Spacing — roomier for 1080p */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   14px;
    --space-lg:   18px;
    --space-xl:   28px;
    --space-2xl:  36px;
    --space-3xl:  52px;

    /* Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  18px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 10px 25px rgba(0, 0, 0, 0.4);

    /* Layout — 1920×1080 fixed */
    --nav-width:    80px;
    --topbar-height: 56px;
    --check-panel-width: 520px;
    --max-width:    1920px;
    --max-height:   1080px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;

    /* Button Sizes — larger touch targets for 1080p */
    --btn-tile-height:  78px;
    --btn-tile-padding: 18px 10px;
    --btn-tile-font:    var(--text-sm);
    --grid-cols:        5;
    --grid-template:    repeat(5, 1fr);

    /* Vertical Category Buttons */
    --vcat-height:      68px;
    --vcat-font:        13px;
    --vcat-panel-width: 150px;
}