/**
 * PingGalaxy Design Tokens
 * Shared CSS custom properties used across all pages
 *
 * @package TT_Expert_Child
 */

:root {
    /* Brand Colors */
    --pg-galaxy: #4F46E5;
    --pg-galaxy-hover: #4338CA;
    --pg-galaxy-light: rgba(79, 70, 229, 0.05);
    --pg-galaxy-light-bg: #EEF2FF;
    --pg-galaxy-light-hover: rgba(79, 70, 229, 0.12);
    --pg-galaxy-shadow: rgba(79, 70, 229, 0.2);

    /* Semantic Colors */
    --pg-success: #059669;
    --pg-error: #DC2626;
    --pg-info: #3B82F6;
    --pg-price: #D32F2F;

    /* Neutral Colors */
    --pg-dark: #1A1A1A;
    --pg-text: #333;
    --pg-grey: #666;
    --pg-grey-medium: #6B7280;
    --pg-grey-light: #767676;
    --pg-light-grey: #F5F5F5;
    --pg-bg-light: #F9FAFB;
    --pg-bg-page: #F5F5F7;

    /* Borders */
    --pg-border: #E5E5E5;
    --pg-border-light: #E5E7EB;
    --pg-border-medium: #D4D4D8;
    --pg-border-dark: #D1D5DB;
    --pg-border-subtle: #f0f0f0;

    /* White (used 40+ times across all CSS files) */
    --pg-white: #ffffff;
    --pg-white-alpha-70: rgba(255, 255, 255, 0.7);
    --pg-white-alpha-30: rgba(255, 255, 255, 0.3);

    /* Shadows */
    --pg-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --pg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --pg-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.06);

    /* Layout */
    --pg-header-height: 110px;

    /* Status Colors */
    --pg-stock-in-bg: #E8F5E9;
    --pg-stock-in-text: #2E7D32;
    --pg-stock-out-bg: #FFEBEE;
    --pg-stock-out-text: #C62828;
    --pg-status-pending-bg: #FEF3C7;
    --pg-status-pending-text: #B45309;
}

/* "À partir de" prefix — global, used on category cards and product page */
.pg-price-prefix {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--pg-grey-light);
}

/* Global focus-visible for accessibility */
.pg-add-product-btn:focus-visible,
.pg-product-card:focus-visible,
.pg-cat-card:focus-visible,
.pg-cat-tab:focus-visible,
.pg-cat-chip:focus-visible,
.pg-add-montage-btn:focus-visible,
.pg-modal-close:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--pg-galaxy);
    outline-offset: 2px;
}