/* ============================================================
   GRILLIZZA DESIGN TOKENS v2
   Unified CSS custom properties for the entire application.
   All modules (admin, POS, provider, kiosk, monitor, etc.)
   should reference these tokens instead of hardcoded values.
   ============================================================ */

:root {

    /* ── Brand Colors ─────────────────────────────────── */
    --brand-primary:        #2563eb;
    --brand-primary-hover:  #1d4ed8;
    --brand-primary-subtle: rgba(37, 99, 235, 0.08);
    --brand-primary-ring:   rgba(37, 99, 235, 0.18);

    --brand-red:            #dc2626;
    --brand-red-dark:       #b91c1c;
    --brand-red-hover:      #b91c1c;
    --brand-red-subtle:     rgba(220, 38, 38, 0.08);
    --brand-blue:           var(--brand-primary);
    --brand-green:          #059669;
    --brand-green-light:    #10b981;
    --brand-green-subtle:   rgba(5, 150, 105, 0.08);
    --brand-yellow:         #d97706;
    --brand-yellow-subtle:  rgba(217, 119, 6, 0.08);
    --brand-purple:         #7c3aed;
    --brand-purple-dark:    #6d28d9;
    --brand-purple-subtle:  rgba(124, 58, 237, 0.08);
    --brand-teal:           #0891b2;
    --brand-orange:         #ea580c;

    /* ── Semantic Colors ──────────────────────────────── */
    --color-success:        var(--brand-green);
    --color-danger:         var(--brand-red);
    --color-warning:        var(--brand-yellow);
    --color-info:           var(--brand-primary);

    /* ── Neutral / Gray Scale ─────────────────────────── */
    --gray-25:              #fcfcfd;
    --gray-50:              #f9fafb;
    --gray-100:             #f3f4f6;
    --gray-150:             #eef0f3;
    --gray-200:             #e5e7eb;
    --gray-300:             #d1d5db;
    --gray-400:             #9ca3af;
    --gray-500:             #6b7280;
    --gray-600:             #4b5563;
    --gray-700:             #374151;
    --gray-800:             #1f2937;
    --gray-900:             #111827;
    --gray-950:             #030712;

    /* ── Text Colors ──────────────────────────────────── */
    --text-primary:         #111827;
    --text-secondary:       #6b7280;
    --text-tertiary:        #9ca3af;
    --text-muted:           var(--gray-400);
    --text-white:           #ffffff;
    --text-inverse:         #ffffff;
    --text-on-dark:         rgba(255, 255, 255, 0.85);
    --text-on-dark-muted:   rgba(255, 255, 255, 0.5);

    /* ── Backgrounds ──────────────────────────────────── */
    --bg-body:              #f9fafb;
    --bg-white:             #ffffff;
    --bg-elevated:          #ffffff;
    --bg-light:             var(--gray-50);
    --bg-dark:              var(--gray-950);
    --bg-overlay:           rgba(0, 0, 0, 0.5);
    --bg-overlay-heavy:     rgba(0, 0, 0, 0.7);
    --bg-glass:             rgba(255, 255, 255, 0.1);
    --bg-glass-hover:       rgba(255, 255, 255, 0.2);

    /* ── Borders ──────────────────────────────────────── */
    --border-color:         #e5e7eb;
    --border-subtle:        #f3f4f6;
    --border-color-light:   rgba(255, 255, 255, 0.06);

    /* ── Typography ───────────────────────────────────── */
    --font-primary:         'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-arabic:          'Noto Sans Arabic', 'Segoe UI', sans-serif;
    --font-system:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:            'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    --text-xs:              11px;
    --text-sm:              12.5px;
    --text-base:            13.5px;
    --text-md:              14px;
    --text-lg:              15px;
    --text-xl:              18px;
    --text-2xl:             22px;
    --text-3xl:             28px;

    --font-normal:          400;
    --font-medium:          500;
    --font-semibold:        600;
    --font-bold:            700;

    --leading-tight:        1.2;
    --leading-normal:       1.5;
    --leading-relaxed:      1.7;

    /* ── Spacing Scale ────────────────────────────────── */
    --space-0:              0;
    --space-1:              0.25rem;   /* 4px  */
    --space-2:              0.5rem;    /* 8px  */
    --space-3:              0.75rem;   /* 12px */
    --space-4:              1rem;      /* 16px */
    --space-5:              1.25rem;   /* 20px */
    --space-6:              1.5rem;    /* 24px */
    --space-8:              2rem;      /* 32px */
    --space-10:             2.5rem;    /* 40px */
    --space-12:             3rem;      /* 48px */

    /* ── Border Radius ────────────────────────────────── */
    --radius-xs:            4px;
    --radius-sm:            6px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            16px;
    --radius-2xl:           24px;
    --radius-pill:          50px;
    --radius-full:          50%;

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-xs:            0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:            0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.07);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --shadow-card:          0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-header:        0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-btn:           0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-input:         var(--shadow-xs);
    --shadow-focus:         0 0 0 3px var(--brand-primary-ring);

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-header:             500;
    --z-overlay:            900;
    --z-modal:              1000;
    --z-toast:              1100;
    --z-tooltip:            1200;
    --z-top:                9999;

    /* ── Transitions ──────────────────────────────────── */
    --transition-fast:      120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:      200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Module Header Gradients ──────────────────────── */
    --gradient-pos:         linear-gradient(135deg, #DB1F26 0%, #b71c1c 100%);
    --gradient-provider:    linear-gradient(135deg, #a46aff 0%, #7464ff 100%);
    --gradient-monitor:     linear-gradient(135deg, #563585 0%, #2a2556 100%);
    --gradient-kiosk-red:   linear-gradient(to bottom, #eb2030, hsl(355 84% 30% / 1));

    /* ── Avatar Sizes ─────────────────────────────────── */
    --avatar-sm:            32px;
    --avatar-md:            36px;
    --avatar-lg:            48px;

    /* ── Sidebar ──────────────────────────────────────── */
    --sidebar-bg:           var(--bg-white);
    --sidebar-border:       var(--border-color);
    --sidebar-hover:        var(--gray-100);
    --sidebar-text:         var(--gray-600);
    --sidebar-text-hover:   var(--gray-900);
    --sidebar-text-active:  var(--gray-950);
    --sidebar-header-text:  var(--gray-500);
    --sidebar-dropdown-bg:  var(--gray-50);
    --sidebar-dropdown-border: var(--gray-200);
    --sidebar-active-bg:    var(--brand-purple-subtle);
    --sidebar-active-border: var(--brand-purple);
    --sidebar-footer-bg:    var(--gray-50);
    --sidebar-footer-text:  var(--gray-500);
    --sidebar-brand-text:   var(--gray-900);
    --sidebar-width:        260px;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   Applied when [data-theme="dark"] is set on <html>
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --gray-25:              #0d1117;
    --gray-50:              #111827;
    --gray-100:             #1a2233;
    --gray-150:             #1f2937;
    --gray-200:             #2d3748;
    --gray-300:             #374151;
    --gray-400:             #6b7280;
    --gray-500:             #9ca3af;
    --gray-600:             #d1d5db;
    --gray-700:             #e5e7eb;
    --gray-800:             #f3f4f6;
    --gray-900:             #f9fafb;
    --gray-950:             #ffffff;

    --text-primary:         #f1f5f9;
    --text-secondary:       #94a3b8;
    --text-tertiary:        #64748b;
    --text-on-dark:         rgba(255, 255, 255, 0.85);
    --text-on-dark-muted:   rgba(255, 255, 255, 0.5);

    --bg-body:              #0b0f19;
    --bg-white:             #111827;
    --bg-elevated:          #1a2233;
    --bg-light:             #0d1117;
    --bg-dark:              #000000;

    --border-color:         #1f2937;
    --border-subtle:        #1a2233;

    --shadow-xs:            0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm:            0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-card:          0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-header:        0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-input:         0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-focus:         0 0 0 3px var(--brand-primary-ring);

    --brand-primary-subtle: rgba(37, 99, 235, 0.15);
    --brand-red-subtle:     rgba(220, 38, 38, 0.15);
    --brand-green-subtle:   rgba(5, 150, 105, 0.15);
    --brand-yellow-subtle:  rgba(217, 119, 6, 0.15);
    --brand-purple-subtle:  rgba(124, 58, 237, 0.15);

    --sidebar-bg:           #060a13;
    --sidebar-border:       rgba(255, 255, 255, 0.04);
    --sidebar-hover:        rgba(255, 255, 255, 0.05);
    --sidebar-text:         rgba(255, 255, 255, 0.5);
    --sidebar-text-hover:   rgba(255, 255, 255, 0.8);
    --sidebar-text-active:  #ffffff;
    --sidebar-header-text:  rgba(255, 255, 255, 0.4);
    --sidebar-dropdown-bg:  rgba(0, 0, 0, 0.28);
    --sidebar-dropdown-border: rgba(255, 255, 255, 0.04);
    --sidebar-active-bg:    rgba(255, 255, 255, 0.08);
    --sidebar-active-border: var(--brand-primary);
    --sidebar-footer-bg:    #060a13;
    --sidebar-footer-text:  rgba(255, 255, 255, 0.45);
    --sidebar-brand-text:   #f8f9fa;

    color-scheme: dark;
}