/* =========================================================
   PusselAvenyn – Brand Tokens
   Grön profil (stabil & konsekvent)
========================================================= */

:root {

  /* =========================
     TEXT
  ========================= */

  --vcom-text: #222222;
  --vcom-muted: #555555;
  --vcom-text-inverted: #ffffff;

/* =========================
   BUTTON TOKENS – PusselAvenyn
========================= */

--btn-primary-bg: var(--vcom-primary);
--btn-primary-bg-hover: var(--vcom-primary-hover);
--btn-primary-text: #ffffff;
--btn-primary-border: var(--vcom-primary);
--btn-primary-border-hover: var(--vcom-primary-hover);

  /* =========================
     BACKGROUNDS
  ========================= */

  --vcom-bg: #ffffff;
  --vcom-bg-muted: #f7f7f7;
  --vcom-border: #e5e5e5;

  /* =========================
     BRAND
  ========================= */

  --vcom-primary: #41a34b;
  --vcom-primary-hover: #358a3e;   /* mörkare grön */
  --vcom-primary-soft: #eaf7ec;    /* mjuk ljusgrön bakgrund */

  --vcom-accent: #2e7d32;          /* djupare grön accent */

  /* =========================
     STATES
  ========================= */

  --vcom-success: #22c55e;
  --vcom-warning: #f59e0b;
  --vcom-danger: #b91c1c;

  /* =========================
     RIBBONS / SALE
  ========================= */

  --vcom-ribbon-green: #16a34a;
  --vcom-ribbon-dark: #111827;
  --vcom-ribbon-text: #ffffff;

  --vcom-sale: #d32f2f;          /* röd för REA – separera från brand */
  --vcom-sale-text: #ffffff;

  /* =========================
     FOOTER
  ========================= */

  --vcom-footer-bg: #f4f6f5;
  --vcom-footer-text: #222222;
  --vcom-footer-muted: #444444;

  --vcom-footer-link: #222222;
  --vcom-footer-link-hover: var(--vcom-primary);

  --vcom-footer-border: #e0e0e0;

  /* =========================
     HEADER
  ========================= */

  --vcom-header-bg: rgba(255,255,255,.95);
  --vcom-header-text: #111111;
  --vcom-header-hover-bg: rgba(0,0,0,.04);

  --vcom-header-cart-bg: var(--vcom-primary);
  --vcom-header-cart-text: #ffffff;

  /* Topbar */
  --vcom-topbar-bg: #1f2937;
  --vcom-topbar-text: #ffffff;

  --vcom-header-h: 100px;
}