/**
 * نظام التصميم — Premium SaaS Luxury (فاتح / داكن)
 */
:root {
    --font-sans: "Cairo", system-ui, sans-serif;

    /* وضع فاتح */
    --color-bg-primary: #f5f7fa;
    --color-bg-elevated: #ffffff;
    --color-bg-subtle: #e7eaf1;
    --color-glass: rgba(255, 255, 255, 0.78);
    --color-border: rgba(124, 58, 237, 0.16);
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-soft: #94a3b8;
    --color-accent: #7c3aed;
    --color-accent-glow: #a855f7;
    --color-accent-dark: #5b21b6;
    --color-gold: #f5c76b;
    --color-gold-dark: #d4a73f;
    --color-accent-hover: #6d28d9;
    --color-accent-soft: rgba(124, 58, 237, 0.12);
    --color-gold-soft: rgba(245, 199, 107, 0.2);
    --color-price: #7c3aed;
    --color-danger: #ef4444;

    /* تعيينات عامة للمكوّنات */
    --bg-page: var(--color-bg-primary);
    --bg-elevated: var(--color-bg-elevated);
    --bg-subtle: var(--color-bg-subtle);
    --bg-glass: var(--color-glass);
    --border: var(--color-border);
    --text: var(--color-text-primary);
    --text-muted: var(--color-text-secondary);
    --text-soft: var(--color-text-soft);
    --accent: var(--color-accent);
    --accent-glow: var(--color-accent-glow);
    --gold: var(--color-gold);
    --accent-soft: var(--color-accent-soft);
    --danger: var(--color-price);

    --hero-gradient: linear-gradient(135deg, #160b35 0%, #4c1d95 42%, #7c3aed 72%, #f5c76b 135%);
    --hero-gradient-alt: linear-gradient(135deg, #090b1a 0%, #5b21b6 50%, #d4a73f 130%);
    --premium-gradient: linear-gradient(135deg, #7c3aed, #a855f7);
    --gold-gradient: linear-gradient(135deg, #f5c76b, #d4a73f);

    --shadow-sm: 0 8px 24px rgba(124, 58, 237, 0.08);
    --shadow-md: 0 18px 50px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 10px 40px rgba(124, 58, 237, 0.15);
    --shadow-header: 0 14px 42px rgba(15, 23, 42, 0.08);

    --glow-accent: 0 10px 30px rgba(124, 58, 237, 0.35);
    --glow-accent-strong: 0 14px 42px rgba(124, 58, 237, 0.46), 0 0 34px rgba(168, 85, 247, 0.35);
    --glow-gold: 0 12px 42px rgba(245, 199, 107, 0.24);

    /* نصف القطر — كروت وأزرار */
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* مسافات أقسام (40–60px) */
    --space-section-y: 2.5rem;
    --space-section-y-lg: 3.75rem;
    --space-block-gap: 1.25rem;
    --space-card-padding: 1rem;

    /* منطقة صورة المنتج — خلفية سوداء حسب المرجع */
    --product-media-bg: #070a16;

    /* Fluid sizing tokens */
    --fluid-text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
    --fluid-text-sm: clamp(0.82rem, 0.78rem + 0.24vw, 0.94rem);
    --fluid-text-md: clamp(0.92rem, 0.86rem + 0.32vw, 1.06rem);
    --fluid-text-lg: clamp(1.05rem, 0.96rem + 0.5vw, 1.28rem);
    --fluid-text-xl: clamp(1.22rem, 1.06rem + 0.9vw, 1.75rem);
    --fluid-icon: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --fluid-icon-btn: clamp(38px, 34px + 1.2vw, 46px);
    --fluid-avatar: clamp(36px, 33px + 1vw, 44px);
    --fluid-gap: clamp(0.6rem, 0.45rem + 0.9vw, 1rem);
    --fluid-card-pad: clamp(0.75rem, 0.5rem + 0.9vw, 1.1rem);

    /* أهداف لمس ومقاسات عرض مرجعية */
    --tap-target-min: 44px;
    --bp-xs: 380px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;
}

html.dark {
    /* وضع داكن */
    --color-bg-primary: #050816;
    --color-bg-elevated: #111827;
    --color-bg-subtle: #0b1023;
    --color-glass: rgba(17, 24, 39, 0.75);
    --color-border: rgba(255, 255, 255, 0.06);
    --color-text-primary: #ffffff;
    --color-text-secondary: #b8c0d9;
    --color-text-soft: #7c859f;
    --color-accent: #7c3aed;
    --color-accent-glow: #a855f7;
    --color-accent-dark: #5b21b6;
    --color-gold: #f5c76b;
    --color-gold-dark: #d4a73f;
    --color-accent-hover: #a855f7;
    --color-accent-soft: rgba(124, 58, 237, 0.2);
    --color-gold-soft: rgba(245, 199, 107, 0.16);
    --color-price: #f5c76b;
    --color-danger: #ef4444;

    --bg-page: var(--color-bg-primary);
    --bg-elevated: var(--color-bg-elevated);
    --bg-subtle: var(--color-bg-subtle);
    --bg-glass: var(--color-glass);
    --border: var(--color-border);
    --text: var(--color-text-primary);
    --text-muted: var(--color-text-secondary);
    --text-soft: var(--color-text-soft);
    --accent: var(--color-accent);
    --accent-glow: var(--color-accent-glow);
    --gold: var(--color-gold);
    --accent-soft: var(--color-accent-soft);
    --danger: var(--color-price);

    /* ظلال — داكن */
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.52);
    --shadow-card: 0 10px 40px rgba(124, 58, 237, 0.15);
    --shadow-header: 0 20px 60px rgba(0, 0, 0, 0.45);

    --glow-accent: 0 10px 40px rgba(124, 58, 237, 0.24), 0 0 28px rgba(168, 85, 247, 0.28);
    --glow-accent-strong: 0 18px 60px rgba(124, 58, 237, 0.34), 0 0 46px rgba(168, 85, 247, 0.42);
    --glow-gold: 0 14px 46px rgba(245, 199, 107, 0.2);
}

@media (min-width: 900px) {
    :root {
        --space-section-y: var(--space-section-y-lg);
    }
}