/* =========================================================
   Global Design Tokens (Base / Defaults)
   Används som fallback – överskrivs av skins
========================================================= */

:root {

  /* =========================
     TYPOGRAFI
  ========================= */

  --vcom-font: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;


  /* =========================
     TEXTFÄRGER
  ========================= */

  --vcom-text: #111111;
  --vcom-muted: #666666;
  --vcom-text-inverted: #ffffff;


  /* =========================
     YTOR & LINJER
  ========================= */

  --vcom-bg: #ffffff;
  --vcom-bg-muted: #f7f7f7;
  --vcom-bg-elevated: #ffffff;
  --vcom-border: #e5e7eb;


  /* =========================
     BRAND / ACCENT (ROLLER)
  ========================= */

  --vcom-brand: #111827;
  --vcom-accent: #4B5563;

  --vcom-primary: #0f766e;
  --vcom-primary-hover: #0d5f59;
  --vcom-primary-soft: #e6f4f3;


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

  --vcom-success: #16a34a;
  --vcom-warning: #d97706;
  --vcom-danger: #dc2626;


  /* =========================
     FORM & ELEVATION
  ========================= */

  --vcom-radius-sm: 6px;
  --vcom-radius: 12px;
  --vcom-radius-lg: 16px;

  --vcom-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --vcom-shadow: 0 8px 24px rgba(0,0,0,.08);


  /* =========================
     LAYOUT
  ========================= */

  --vcom-max: 1440px;
  --vcom-gap: 16px;
  --vcom-header-h: 72px;
  
    /* =========================
     BADGES
  ========================= */
  
  --vcom-sale: #e11d48;        /* stark pink/röd */
  --vcom-sale-text: #ffffff;
  
/* =========================
   HEADER
========================= */

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

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

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

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

--vcom-footer-bg: #ffffff;
--vcom-footer-meta-bg: #ffffff;

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

--vcom-footer-heading: #111111;

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

--vcom-footer-border: #eeeeee;
}