:root {
    /* Theme-dependent colors (read from theme CSS files) */
    --pin-red: var(--theme-btn-bg, #e60023);
    --pin-red-hover: var(--theme-btn-hover, #ad081b);
    --pin-dark: var(--theme-text, #111);
    --pin-bg: var(--theme-bg, #efefef);
    --pin-surface: var(--theme-surface, #fff);
    --pin-accent: var(--theme-accent, #e60023);
    --pin-link-color: var(--theme-link-color, #e60023);
    --pin-gray-100: var(--theme-gray-100, #efefef);
    --pin-gray-200: var(--theme-gray-200, #ddd);

    /* Static colors */
    --pin-gray-300: #cdcdcd;
    --pin-gray-400: #8e8e8e;
    --pin-gray-500: #767676;
    --pin-gray-600: #5f5f5f;
    --pin-white: #fff;
    --pin-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pin-radius: 16px;
    --pin-radius-sm: 8px;
    --pin-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    --pin-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.15);
}