/* ========================================
   RockPins — CSS Variables
   Theme: Playful, youthful, sky blue + pink
   ======================================== */

:root {
    /* Brand Colors */
    --rp-sky: #B4D4E7;
    --rp-pink: #E8B0CB;
    --rp-pink-light: #f5dce8;
    --rp-blue-light: #dceaf5;

    /* Shop Theme (shared elements integration) */
    --shop-primary: #9ec0e0;
    --shop-secondary: #E8A0C0;
    --shop-bg: #ffffff;
    --shop-background: #ffffff;
    --shop-text: #1a1a2e;
    --shop-heading-font: 'Fredoka', sans-serif;
    --shop-body-font: 'Montserrat', Arial, sans-serif;

    /* Derived */
    --shop-primary-light: #dceaf5;
    --shop-promo: #E8A0C0;
    --shop-border: #e2e8f0;
    --shop-muted: #8896a6;
    --shop-text-muted: #8896a6;
    --shop-surface: #f4f8fc;
    --shop-radius: 16px;
    --shop-radius-sm: 10px;
    --shop-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shop-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
    --shop-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shop-max-width: 1200px;

    /* Layout */
    --nav-height: 72px;
    --announcement-bar-height: 40px; /* set precisely via JS in main.js */
}