/**
 * Master Theme Design Tokens & CSS Custom Properties
 * File: shop/mobile/mobile-style/components/variables.css
 * Focus: Synchronized values from shop.css for layout grids, colors, and typography.
 */

:root {
    /* ==========================================
       1. GRID & LAYOUT BOUNDARIES
       ========================================== */
    --sm-grid-mobile-gap: 20px 12px;
    --sm-grid-desktop-gap: 32px 20px;
    --sm-grid-margin: clamp(12px, 2.5vw, 28px);
    --sm-container-max-width: 1200px;

    /* ==========================================
       2. COLOR PALETTE
       ========================================== */
    --sm-color-bg: #ffffff;
    --sm-color-text-primary: #000000;
    --sm-color-text-dark: #111111;
    --sm-color-accent-gold: #ffbb00;
    --sm-color-border-dark: #111111;

    /* ==========================================
       3. TYPOGRAPHY & SPACING
       ========================================== */
    --sm-font-family-primary: 'Montserrat', sans-serif;
    --sm-border-radius-base: 6px;
}