:root{
  --dark:#1d1f20;
  --light:#f8f9fa;
  --grey:#6c757d;

  --bg:#1e2022;
  --card:#141516;
  --line:#2a2c2e;
  --text:#eaeaea;
  --muted:#b9b9b9;
  --accent:#e63946;
  --input:#101112;
}

html[data-theme="dark"]{
  --dark:#1d1f20;
  --light:#f8f9fa;
  --grey:#000000;

  --bg:#1e2022;
  --text:#eaeaea;
  --muted:#b9b9b9;
  --input:#101112;
}

html[data-theme="grey"]{
  --dark:#a7a7a7;
  --light:#111;
  --grey:#444;

  --bg:#818181;
  --text:#111;
  --muted:#444;
  --input:#ffffff;
}

html[data-theme="light"]{
  --dark:#dddddd;
  --light:#0f1115;
  --grey:#e6e7e7;

  --bg:#ffffff;
  --text:#0f1115;
  --muted:#3e4450;
  --input:#ffffff;
}

/* apply vars */
.shop-card { background:var(--dark); color:var(--light); border-color:var(--line); }
#fullscreenMenu{ background:var(--dark); color:var(--light); }
.header{ background:var(--dark); color:var(--light); }
.footer{ background:var(--dark); color:var(--light); }
body{ background:var(--grey); color:var(--light); }
.card, .wizard{ background:var(--card); border-color:var(--line); }
input,select,textarea{ background:var(--input); color:var(--text); border-color:var(--line); }
.small,.hint,.sub{ color:var(--muted); }
button{ background:var(--accent); }