/* 
 * SWEDISH THRIFTING - PREMIUM CSS - V3.0
 * Vinted-inspired grid + Tradera-inspired product page
 */

:root {
    /* Base Primitives */
    --sp-accent: #c18653;

    /* Primär knappstil (samma som CookieYes CMP — brun fyllning, vit text, diskret radius) */
    --st-btn-primary-bg: #8b7355;
    --st-btn-primary-border: #8b7355;
    --st-btn-primary-fg: #ffffff;
    --st-btn-primary-bg-hover: #735d45;
    --st-btn-secondary-bg: #3d342d;
    --st-btn-secondary-border: #3d342d;
    --st-btn-radius: 4px;
    --sp-dark: #464646;
    --sp-light-bg: #F7F4EF;
    --sp-light-border: #c4bdb6;
    --sp-chrome-bg: #e3d6c6; /* Header + Footer */
    --sp-content-bg: #f0ebe3; /* Content area between header/footer */
    --black: var(--sp-dark);
    --dark-grey: var(--sp-dark);
    --gold: var(--sp-accent);
    --gold-bright: #d8b08a;
    --gold-gradient: linear-gradient(135deg, var(--sp-accent) 0%, #e3d6c6 50%, var(--sp-accent) 100%);
    --white: #ffffff;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s ease;
    --theme-transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    --radius: 8px;

    /* Semantic Variables — Light Mode */
    --bg-color: var(--sp-content-bg);
    --bg-secondary: var(--sp-chrome-bg);
    --text-color: var(--sp-dark);
    --text-dim: #6a6a6a;
    --card-bg: #ffffff;
    --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --accent-gold: var(--sp-accent);
    --border: rgba(0, 0, 0, 0.08);
    --header-bg: var(--sp-chrome-bg);
    --search-bg: rgba(255, 255, 255, 0.72);
}