/**
 * Pos.SharedUI — checkout shell design tokens (defaults on :root).
 * Load this before pos-app-theme.css, checkout-shared-ui.css, and host app.css.
 * Hosts may override any token on :root or a wrapper (e.g. .pos-checkout-ref) for theming.
 */
:root {
    /* مرجع POS: خلفية فاتحة جداً، بطاقات بيضاء، ظلال ناعمة */
    --pos-checkout-bg: #f4f6f9;
    --pos-checkout-card: #ffffff;
    --pos-checkout-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    --pos-checkout-radius: 16px;

    /* الهوية موحّدة مع لوحة الإدارة (#3d4e81 / Cairo). درجات للعمق في التدرّجات والحدود. */
    --pos-checkout-primary: #3d4e81;
    --pos-checkout-primary-strong: #2f3d68;
    --pos-checkout-primary-soft: #eef1f8;
    --pos-checkout-on-primary: #ffffff;

    /* زر الإجراء (CTA) يبقى تركوازياً مميّزاً فوق الأساس النيلي — لتبرز "الدفع/الإتمام". */
    --pos-checkout-cta: linear-gradient(135deg, #14b8a6 0%, #0d9488 48%, #0f766e 100%);
    --pos-checkout-cta-shadow: 0 14px 36px rgba(13, 148, 136, 0.28);

    /* أهداف لمس مريحة للكاشير تحت الضغط (تكبر تلقائياً على الشاشات الصغيرة/اللمسية). */
    --pos-touch-target: 48px;
    --pos-touch-target-lg: 56px;
    --pos-touch-gap: 10px;
}

/* شاشات اللمس/الصغيرة: أهداف أكبر بلا تغيير في الكود. */
@media (max-width: 1024px), (pointer: coarse) {
    :root {
        --pos-touch-target: 52px;
        --pos-touch-target-lg: 60px;
    }
}