/**
 * ============================================================================
 * MUAADH CHASSIS — DESIGN SYSTEM TOKENS
 * ============================================================================
 *
 * هذا الملف يحوي مقاسات/أبعاد المشروع الثابتة:
 * radii, shadows, border widths, component sizing, spacing,
 * image taxonomy, z-index scale, animation timings.
 *
 * ⚠ غير قابل للضبط من لوحة المُشغّل ⚠
 * هذا الملف **محرَّر يدوياً** من قِبل المطوّر/المصمم. ليس له صفحة في
 * /operator/platform-settings — لأن هذه قرارات تصميمية ثابتة بين العلامات
 * التجارية، ليست هوية بصرية.
 *
 * - الألوان والخطوط → muaadh-tokens.css (مولّد من ThemeService).
 * - الأبعاد والمقاسات → هذا الملف (chassis).
 *
 * Origin values: ThemeService::$defaults at commit before chassis extraction (2026-05-13).
 *
 * Naming convention:
 *   --chassis-<family>[-<variant>] للأبعاد العامة
 *   --chassis-<component>-<dimension> للمقاسات الخاصة بمكوّن
 *
 * ============================================================================
 */

:root {
    /* ====================================================================
     * RADIUS SCALE (general)
     * ==================================================================== */
    --chassis-radius-xs:   3px;
    --chassis-radius-sm:   4px;
    --chassis-radius:      8px;
    --chassis-radius-lg:   12px;
    --chassis-radius-xl:   16px;
    --chassis-radius-pill: 50px;

    /* ===== RADIUS (component-specific) ===== */
    --chassis-radius-btn:        8px;
    --chassis-radius-card:       12px;
    --chassis-radius-modal:      16px;
    --chassis-radius-input:      8px;
    --chassis-radius-badge:      20px;
    --chassis-radius-chip:       6px;
    --chassis-radius-search:     50px;
    --chassis-radius-category:   12px;
    --chassis-radius-alert:      8px;
    --chassis-radius-pagination: 8px;
    --chassis-radius-item-card:  12px;
    --chassis-radius-item-img:   8px;

    /* ====================================================================
     * BORDER WIDTHS — replaces hardcoded 1px/2px/3px/4px in CSS rules
     * ==================================================================== */
    --chassis-border-thin:   1px;
    --chassis-border-normal: 2px;
    --chassis-border-thick:  3px;
    --chassis-border-accent: 4px;

    /* ====================================================================
     * SHADOW SCALE (general)
     * ==================================================================== */
    --chassis-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --chassis-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --chassis-shadow:    0 2px 8px rgba(0,0,0,0.1);
    --chassis-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
    --chassis-shadow-xl: 0 8px 30px rgba(0,0,0,0.2);

    /* ===== SHADOW (component-specific) ===== */
    --chassis-shadow-btn:             none;
    --chassis-shadow-card:            0 2px 8px rgba(0,0,0,0.08);
    --chassis-shadow-card-hover:      0 4px 16px rgba(0,0,0,0.12);
    --chassis-shadow-card-elevated:   0 4px 20px rgba(0,0,0,0.08);
    --chassis-shadow-card-elevated-hover: 0 8px 30px rgba(0,0,0,0.12);
    --chassis-shadow-modal:           0 25px 50px rgba(0,0,0,0.25);
    --chassis-shadow-modal-deep:      0 20px 60px rgba(0,0,0,0.3);
    --chassis-shadow-header:          0 2px 10px rgba(0,0,0,0.1);
    --chassis-shadow-search:          0 4px 15px rgba(0,0,0,0.08);
    --chassis-shadow-category:        0 2px 8px rgba(0,0,0,0.08);
    --chassis-shadow-category-hover:  0 8px 25px rgba(0,0,0,0.15);

    /* ====================================================================
     * COMPONENT HEIGHTS
     * ==================================================================== */
    --chassis-header-height:     80px;
    --chassis-topbar-height:     60px;
    --chassis-breadcrumb-height: 60px;
    --chassis-input-height:      48px;
    --chassis-search-height:     50px;
    --chassis-pagination-size:   40px;

    /* ====================================================================
     * COMPONENT PADDING
     * ==================================================================== */
    --chassis-footer-padding: 60px;
    --chassis-card-padding:   20px;
    --chassis-btn-padding-x:  24px;
    --chassis-btn-padding-y:  12px;
    --chassis-badge-padding:  4px 12px;
    --chassis-alert-padding:  16px 20px;
    --chassis-pagination-gap: 5px;

    /* ====================================================================
     * COMPONENT TYPOGRAPHY (sizes + weights for specific UI elements)
     * NOT the type scale — that lives in theme (operator-tunable).
     * These are component-internal decisions (button text, badge text,
     * topbar text, breadcrumb heading, etc.).
     * ==================================================================== */

    /* Button */
    --chassis-typo-btn-size:   14px;
    --chassis-typo-btn-weight: 600;

    /* Badge */
    --chassis-typo-badge-size:   12px;
    --chassis-typo-badge-weight: 600;

    /* Item card */
    --chassis-typo-item-name-size:    14px;
    --chassis-typo-item-name-weight:  500;
    --chassis-typo-item-price-size:   16px;
    --chassis-typo-item-price-weight: 700;

    /* Topbar */
    --chassis-typo-topbar-size: 14px;

    /* Breadcrumb */
    --chassis-typo-breadcrumb-name-size: 24px;

    /* Navigation */
    --chassis-typo-nav-size:   15px;
    --chassis-typo-nav-weight: 500;

    /* ====================================================================
     * IMAGE TAXONOMY — unified card-image sizes
     * One canonical size per usage type.
     * Origin: ThemeService image_size_* tokens (added 2026-05-08).
     * ==================================================================== */

    /* Brand logos */
    --chassis-image-brand-card:       80px;   /* homepage/catalogs grid */
    --chassis-image-brand-inline-h:   14px;   /* inside item card (height) */
    --chassis-image-brand-inline-w:   32px;   /* inside item card (max-width) */
    --chassis-image-tag-logo:         32px;   /* quality brand logo in offers */

    /* Catalog vehicle thumbs */
    --chassis-image-catalog-vehicle:       100%;   /* width (aspect 4:3) */
    --chassis-image-catalog-vehicle-max-h: 200px;  /* cap for wide screens */

    /* Part item card */
    --chassis-image-item-card: 100%;   /* width (aspect 1:1) */

    /* Avatars + logos */
    --chassis-image-avatar-sm: 32px;   /* merchant/user thumb */
    --chassis-image-avatar-md: 40px;   /* sidebar profile */
    --chassis-image-logo-h:    40px;   /* site logo (topbar+footer) */

    /* Icons */
    --chassis-image-icon-sm: 24px;

    /* Modal thumbnails */
    --chassis-image-modal-main-max: 400px;
    --chassis-image-modal-thumb:    60px;

    /* ====================================================================
     * Z-INDEX SCALE
     * ==================================================================== */
    --chassis-z-dropdown: 1000;
    --chassis-z-sticky:   1020;
    --chassis-z-modal:    1050;
    --chassis-z-tooltip:  1070;

    /* ====================================================================
     * ANIMATION TIMING
     * ==================================================================== */
    --chassis-duration-fast:   0.15s;
    --chassis-duration-quick:  0.2s;
    --chassis-duration-normal: 0.3s;
    --chassis-duration-slow:   0.5s;
    --chassis-duration-slower: 1.2s;

    --chassis-transition: all 0.3s ease;

    /* ====================================================================
     * MICRO-INTERACTIONS
     * ==================================================================== */
    --chassis-scale-hover-item: 1.02;
    --chassis-scrollbar-width:  14px;

    /* ====================================================================
     * MISC OVERLAYS / SEPARATORS
     * ==================================================================== */
    --chassis-breadcrumb-overlay-opacity: 0.5;
    --chassis-breadcrumb-separator:       "/";
}

/* ========================================================================
 * MOBILE BREAKPOINT BINDINGS
 * Re-bind chassis tokens inside @media (max-width: 767.98px) so CSS
 * rules can write var(--chassis-header-height) once and let the
 * breakpoint flip the value on mobile.
 * ======================================================================== */
@media (max-width: 767.98px) {
    :root {
        --chassis-header-height: 60px;
        --chassis-topbar-height: 50px;
        --chassis-card-padding:  16px;
        /* mobile_font_size_base lives in theme (font-scale base), not chassis. */
    }
}