:root {
    /* 
       1. COLOR PALETTE (Elite Slate & Primary)
    */

    /* A. PREMIUM SLATE NEUTRALS (Tailwind-style) */
    --neutral-0: #FFFFFF;
    --neutral-1: #F8FAFC;
    /* Slate 50 */
    --neutral-2: #F1F5F9;
    /* Slate 100 */
    --neutral-3: #E2E8F0;
    /* Slate 200 */
    --neutral-4: #CBD5E1;
    /* Slate 300 */
    --neutral-5: #94A3B8;
    /* Slate 400 */
    --neutral-6: #64748B;
    /* Slate 500 */
    --neutral-7: #475569;
    /* Slate 600 */
    --neutral-8: #334155;
    /* Slate 700 */
    --neutral-9: #1E293B;
    /* Slate 800 */
    --neutral-10: #0F172A;
    /* Slate 900 */
    --neutral-11: #020617;
    /* Slate 950 */

    /* B. PRIMARY BLUES (Vibrant Modern) */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* C. SEMANTIC COLORS */
    --success-100: #dcfce7;
    --success-600: #16a34a;
    --success-800: #166534;

    --danger-100: #fee2e2;
    --danger-600: #dc2626;
    --danger-800: #991b1b;

    --warning-100: #fef9c3;
    --warning-400: #facc15;
    --warning-600: #ca8a04;

    /*
       2. SEMANTIC TOKENS (Premium Application Layer)
    */

    /* Backgrounds & Text */
    --pos-bg-main: var(--neutral-1);
    --pos-bg-panel: var(--neutral-0);
    --pos-border-subtle: var(--neutral-2);
    --pos-border-panel: var(--neutral-3);

    --pos-text-primary: var(--neutral-9);
    --pos-text-secondary: var(--neutral-6);
    --pos-text-disabled: var(--neutral-4);
    --pos-text-inverse: var(--neutral-0);

    /* Sidebar Theme (Premium Dark) */
    --sidebar-bg: var(--neutral-10);
    --sidebar-text: var(--neutral-4);
    --sidebar-text-active: var(--neutral-0);
    --sidebar-hover: rgba(255, 255, 255, 0.05);

    /* Primary Actions */
    --pos-btn-primary-bg: var(--primary-600);
    --pos-btn-primary-fg: var(--neutral-0);
    --pos-btn-primary-hover: var(--primary-700);
    --pos-btn-primary-active: var(--primary-800);

    /* Secondary / Command */
    --pos-btn-secondary-bg: var(--neutral-0);
    --pos-btn-secondary-fg: var(--neutral-7);
    --pos-btn-secondary-border: var(--neutral-3);
    --pos-btn-secondary-hover: var(--neutral-1);

    --pos-focus-ring: rgba(37, 99, 235, 0.2);
    --pos-focus-border: var(--primary-400);
}

/*
   Utility Classes
*/

.pos-bg-main {
    background-color: var(--pos-bg-main);
    color: var(--pos-text-primary);
}

.pos-bg-panel {
    background-color: var(--pos-bg-panel);
    color: var(--pos-text-primary);
    border: 1px solid var(--pos-border-panel);
}

.pos-btn-primary {
    background-color: var(--pos-btn-primary-bg);
    color: var(--pos-btn-primary-fg);
    border: none;
    cursor: pointer;
}

.pos-btn-primary:hover {
    background-color: var(--pos-btn-primary-hover);
}

.pos-btn-command {
    background-color: var(--pos-btn-command-bg);
    color: var(--pos-btn-command-fg);
    border: none;
}

.pos-btn-command:hover {
    background-color: var(--pos-btn-command-hover);
}

.pos-btn-manager {
    background-color: var(--pos-btn-manager-bg);
    color: var(--pos-btn-manager-fg);
    border: none;
}

.pos-btn-manager:hover {
    background-color: var(--pos-btn-manager-hover);
}

/* Item Buttons */
.pos-btn-item-food {
    background-color: var(--pos-item-food-bg);
    color: var(--pos-item-food-fg);
}

.pos-btn-item-beer {
    background-color: var(--pos-item-beer-bg);
    color: var(--pos-item-beer-fg);
}

.pos-btn-item-cocktail {
    background-color: var(--pos-item-cocktail-bg);
    color: var(--pos-item-cocktail-fg);
}

.pos-btn-item-wine {
    background-color: var(--pos-item-wine-bg);
    color: var(--pos-item-wine-fg);
}

.pos-btn-item-na {
    background-color: var(--pos-item-na-bg);
    color: var(--pos-item-na-fg);
}

/* Alerts & Badges */
.badge {
    padding: 0.35rem 0.75rem;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
}

.badge-success {
    background-color: var(--success-100);
    color: var(--success-800);
}

.badge-warning {
    background-color: var(--warning-100);
    color: var(--warning-600);
}

.text-disabled {
    color: var(--pos-text-disabled);
}

.italic {
    font-style: italic;
}

.pos-alert-success {
    background-color: var(--pos-alert-success-bg);
    color: var(--pos-alert-success-fg);
}

.pos-alert-error {
    background-color: var(--pos-alert-error-bg);
    color: var(--pos-alert-error-fg);
}

.pos-alert-warning {
    background-color: var(--pos-alert-warning-bg);
    color: var(--pos-alert-warning-fg);
}